<template>
  <div>
    <!-- Header -->
    <div class="flex items-center justify-between mb-4">
      <div>
        <h1 class="text-3xl font-bold text-gray-800">{{ $t('Saved Replies') }}</h1>
        <p class="text-gray-600 mt-1">{{ $t('Manage predefined responses for common questions.') }}</p>
      </div>
      <!-- Add Button - Only show on List tab -->
      <router-link
        v-if="isListTab"
        to="/settings/saved-replies/add"
        class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 transition-colors"
      >
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
        </svg>
        {{ $t('Add Reply') }}
      </router-link>
    </div>

    <!-- Tab Navigation (hidden on add/edit pages) -->
    <div v-if="!hidesTabs" class="border-b border-gray-200 mb-6">
      <nav class="flex space-x-8" aria-label="Tabs">
        <router-link
          v-for="tab in tabs"
          :key="tab.id"
          :to="tab.route"
          class="group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm transition-colors"
          :class="[
            isActiveTab(tab.id)
              ? 'border-blue-500 text-blue-600'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
          ]"
        >
          <component
            :is="tab.icon"
            class="w-5 h-5 mr-2"
            :class="[
              isActiveTab(tab.id)
                ? 'text-blue-500'
                : 'text-gray-400 group-hover:text-gray-500'
            ]"
          />
          {{ tab.label }}
        </router-link>
      </nav>
    </div>

    <!-- Child Route Content -->
    <router-view />
  </div>
</template>

<script setup>
import { computed, h } from 'vue'
import { useRoute } from 'vue-router'
import { t } from '@/Admin/js/composables/useI18n.js'

const route = useRoute()

// Tab definitions
const tabs = [
  {
    id: 'list',
    label: t('Replies'),
    route: '/settings/saved-replies',
    icon: ListIcon
  },
  {
    id: 'semantic',
    label: t('Semantic Matching'),
    route: '/settings/saved-replies/semantic',
    icon: SemanticIcon
  },
  {
    id: 'analytics',
    label: t('Analytics'),
    route: '/settings/saved-replies/analytics',
    icon: AnalyticsIcon
  }
]

// Check if current route is a tab or add/edit page
const hidesTabs = computed(() => {
  return route.meta?.hidesTabs === true
})

// Check if we're on the list tab
const isListTab = computed(() => {
  return route.name === 'SavedRepliesList' || route.path === '/settings/saved-replies'
})

// Check if a tab is active
const isActiveTab = (tabId) => {
  const tabMeta = route.meta?.tab
  if (tabMeta) return tabMeta === tabId
  // Fallback: check route path
  if (tabId === 'list') return route.path === '/settings/saved-replies'
  if (tabId === 'semantic') return route.path.includes('/semantic')
  if (tabId === 'analytics') return route.path.includes('/analytics')
  return false
}

// Icon Components (inline SVG render functions)
function ListIcon(props) {
  return h('svg', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', ...props }, [
    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M4 6h16M4 10h16M4 14h16M4 18h16' })
  ])
}

function SemanticIcon(props) {
  return h('svg', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', ...props }, [
    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z' })
  ])
}

function AnalyticsIcon(props) {
  return h('svg', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', ...props }, [
    h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' })
  ])
}
</script>

