<template>
  <div>
    <h1 class="text-3xl font-bold mb-4 text-gray-800">{{ $t('Data Source Settings') }}</h1>
    <div class="border-b border-gray-100 mb-4"></div>

    <!-- Tab Navigation -->
    <div class="border-b border-gray-200 mb-6">
      <nav class="-mb-px flex space-x-8" aria-label="Tabs">
        <button
          @click="activeTab = 'internal'"
          :class="[
            'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors',
            activeTab === 'internal'
              ? 'border-blue-500 text-blue-600'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
          ]"
        >
          <Icon icon="material-symbols:folder-outline" class="w-5 h-5 mr-2 inline-block" />
          {{ $t('Internal Content') }}
        </button>
        <button
          @click="activeTab = 'external'"
          :class="[
            'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors',
            activeTab === 'external'
              ? 'border-blue-500 text-blue-600'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
          ]"
        >
          <Icon icon="material-symbols:link" class="w-5 h-5 mr-2 inline-block" />
          {{ $t('External Sources') }}
        </button>
        <div class="relative">
          <button
            disabled
            :title="$t('Upcoming')"
            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors border-transparent text-gray-400 cursor-not-allowed opacity-60"
          >
            <Icon icon="material-symbols:auto-awesome-outline" class="w-5 h-5 mr-2 inline-block" />
            {{ $t('Automatic Builder') }}
            <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600">
              {{ $t('Upcoming') }}
            </span>
          </button>
        </div>
        <div class="relative">
          <button
            disabled
            :title="$t('Upcoming')"
            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors border-transparent text-gray-400 cursor-not-allowed opacity-60"
          >
            <Icon icon="material-symbols:folder-managed-outline" class="w-5 h-5 mr-2 inline-block" />
            {{ $t('Resources') }}
            <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600">
              {{ $t('Upcoming') }}
            </span>
          </button>
        </div>
      </nav>
    </div>

    <!-- Tab Content -->
    <div>
      <!-- Internal Content Tab -->
      <div v-if="activeTab === 'internal'">
        <InternalContentTab />
      </div>

      <!-- External Sources Tab -->
      <div v-if="activeTab === 'external'">
        <ExternalSourcesTab />
      </div>
  </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Icon } from '@iconify/vue'
import InternalContentTab from './Components/InternalContentTab.vue'
import ExternalSourcesTab from './Components/ExternalSourcesTab.vue'

// Active tab state
const activeTab = ref('internal')
</script>
