<template>
  <div class="tabs">
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, provide, onMounted, getCurrentInstance, type VNode } from 'vue';
import type { TabId, TabsContext } from './types';
import { TabsProviderKey } from './types';

const props = defineProps<{
  modelValue?: TabId | null;
  initialTab?: TabId | null;
}>();

const emit = defineEmits(['update:modelValue']);

const activeTabId = ref<TabId | null>(props.modelValue ?? props.initialTab ?? null);

watch(() => props.modelValue, (newVal) => {
  if (newVal !== undefined && newVal !== null) {
    activeTabId.value = newVal;
  }
});

const selectTab = (tabId: TabId) => {
  activeTabId.value = tabId;
  emit('update:modelValue', tabId);
};

provide<TabsContext>(TabsProviderKey, {
  activeTabId,
  selectTab,
});

// Determine initial tab if not set by props
onMounted(() => {
  if (activeTabId.value === null) {
    // Try to find the first VTab's ID from slots
    // This is a bit more complex due to Vue's slot structure
    const instance = getCurrentInstance();
    if (instance && instance.slots.default) {
      const defaultSlots = instance.slots.default();
      let firstTabId: TabId | null = null;

      const findFirstTabRecursive = (nodes: VNode[]) => {
        for (const node of nodes) {
          if (firstTabId) break;
          // Check if node is VTabList
          if (node.type && (node.type as any).name === 'VTabList') {
            if (node.children && Array.isArray(node.children)) {
              // Children of VTabList could be VTab components directly or wrapped
              for (const childNode of node.children as VNode[]) {
                 if (childNode.type && (childNode.type as any).name === 'VTab') {
                    if (childNode.props?.id) {
                        firstTabId = childNode.props.id;
                        break;
                    }
                 } else if (Array.isArray(childNode.children)) { // Handle cases where VTabs are nested in fragments or other elements
                    findFirstTabRecursive(childNode.children as VNode[]);
                    if (firstTabId) break;
                 }
              }
            } else if (typeof node.children === 'object' && node.children && 'default' in node.children) {
                // If VTabList has its own default slot (e.g. from a render function)
                // This part might need adjustment based on how VTabList is structured
            }
          } else if (node.children && Array.isArray(node.children)) {
            findFirstTabRecursive(node.children as VNode[]);
          }
        }
      };
      findFirstTabRecursive(defaultSlots);

      if (firstTabId) {
        selectTab(firstTabId);
      }
    }
  }
});

</script>

<style lang="scss" scoped>
.tabs {
  // Basic container styling for the entire tabs system
  // border: 1px solid #ccc; // Example border
  // border-radius: 4px;
  // overflow: hidden;
  display: flex;
  flex-direction: column; // Stack tablist and tabpanels
}
</style>
