<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useConfigStore } from '../../stores/config'
import OverviewDashboard from './OverviewDashboard.vue'
import ConnectionManager from './ConnectionManager.vue'
import TableRegistry from './TableRegistry.vue'
import JoinEditor from './JoinEditor.vue'
import ApiSettings from './ApiSettings.vue'
import DomainKnowledge from './DomainKnowledge.vue'

const configStore = useConfigStore()
const activeTab = ref<'overview' | 'connections' | 'tables' | 'joins' | 'knowledge' | 'api'>('overview')

onMounted(() => configStore.fetchAll())
</script>

<template>
  <div class="h-full flex flex-col">
    <!-- Tabs -->
    <div class="flex border-b border-dark-700 px-4 bg-dark-900">
      <button
        v-for="tab in ([
          { id: 'overview', label: 'Overview' },
          { id: 'connections', label: 'Connections' },
          { id: 'tables', label: 'Tables' },
          { id: 'joins', label: 'Joins' },
          { id: 'knowledge', label: 'Knowledge' },
          { id: 'api', label: 'API & Logs' },
        ] as const)"
        :key="tab.id"
        @click="activeTab = tab.id"
        :class="['px-4 py-3 text-sm font-medium border-b-2 transition-colors', activeTab === tab.id ? 'text-primary-400 border-primary-400' : 'text-dark-400 border-transparent hover:text-dark-200']"
      >{{ tab.label }}</button>
    </div>

    <!-- Content -->
    <div class="flex-1 overflow-y-auto p-4">
      <OverviewDashboard v-if="activeTab === 'overview'" />
      <ConnectionManager v-else-if="activeTab === 'connections'" />
      <TableRegistry v-else-if="activeTab === 'tables'" />
      <JoinEditor v-else-if="activeTab === 'joins'" />
      <DomainKnowledge v-else-if="activeTab === 'knowledge'" />
      <ApiSettings v-else-if="activeTab === 'api'" />
    </div>
  </div>
</template>
