<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import PageHeader from '@/components/PageHeader.vue'
import DkuSpinner from '@/components/DkuSpinner.vue'
import GlossaryBindingsEditor from '@/components/editor/GlossaryBindingsEditor.vue'
import GlossaryTermsEditor from '@/components/editor/GlossaryTermsEditor.vue'
import { useRouteVersionId } from '@/composables/useRouteVersionId'
import { useVersionLoader } from '@/composables/useVersionLoader'
import { useSaveDiscard } from '@/composables/useSaveDiscard'
import { useSemanticModelsStore } from '@/stores/semantic-models'

const route = useRoute()
const store = useSemanticModelsStore()

const modelId = computed(() => route.params.id as string)
const versionId = useRouteVersionId(route)

const { isLoading } = useVersionLoader({
  modelId,
  versionId,
})

const { handleSave, handleDiscard } = useSaveDiscard({
  modelId,
  versionId,
})

// Tab state
type TabId = 'terms' | 'bindings'
const activeTab = ref<TabId>('terms')

const tabs: { id: TabId; label: string; iconClass: string }[] = [
  { id: 'terms', label: 'Terms', iconClass: 'dku-icon-book-16' },
  { id: 'bindings', label: 'Used', iconClass: 'dku-icon-link-16' },
]

</script>

<template>
  <div class="flex h-full flex-col">
    <PageHeader
      :version-id="versionId"
      title="Glossary"
      description="Manage business terms and bind them to your semantic model"
      show-save-discard
      :has-unsaved-changes="store.hasUnsavedChanges"
      :is-saving="store.isSavingDraft"
      @save="handleSave"
      @discard="handleDiscard"
    />

    <!-- Loading state -->
    <div v-if="isLoading" class="flex flex-1 items-center justify-center">
      <DkuSpinner size="xl" />
    </div>

    <!-- Content -->
    <div v-else class="flex flex-1 flex-col overflow-hidden">
      <!-- Tabs -->
      <div class="border-b px-6">
        <div class="flex">
          <button
            v-for="tab in tabs"
            :key="tab.id"
            :class="[
              'relative mx-1 inline-flex items-center gap-2 transition-colors hover:no-underline focus:outline-none',
              activeTab === tab.id
                ? 'font-medium'
                : 'font-normal',
            ]"
            :style="{
              fontSize: '13px',
              lineHeight: '48px',
              letterSpacing: '0.2px',
              color: '#666666',
              padding: activeTab === tab.id ? '0 10px 1px' : '0 13px',
            }"
            @click="activeTab = tab.id"
          >
            <i :class="tab.iconClass" />
            {{ tab.label }}
            <span
              v-if="tab.id === 'terms'"
              class="rounded-full bg-muted px-2 py-0.5 text-xs"
            >
              {{ store.draftGlossaryTerms.length }}
            </span>
            <span
              v-if="tab.id === 'bindings'"
              class="rounded-full bg-muted px-2 py-0.5 text-xs"
            >
              {{ store.draftGlossaryBindings.length }}
            </span>
            <!-- Active indicator -->
            <span
              v-if="activeTab === tab.id"
              class="absolute bottom-0 left-0 right-0 h-0.5 bg-[#666666]"
            />
          </button>
        </div>
      </div>

      <!-- Tab Content -->
      <div class="flex-1 overflow-auto p-6">
        <div class="mx-auto max-w-6xl">
          <GlossaryTermsEditor
            v-if="activeTab === 'terms'"
            :model-id="modelId"
            :version-id="versionId"
          />

          <GlossaryBindingsEditor
            v-else-if="activeTab === 'bindings' && store.draftSpec"
            :model-id="modelId"
            :version-id="versionId"
            :spec="store.draftSpec"
          />
        </div>
      </div>
    </div>

  </div>
</template>
