<script setup lang="ts">
import { ref } from 'vue'
import { __ } from '@wordpress/i18n'
import { Folder, Tag } from 'lucide-vue-next'
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
import { getI18n } from '@/helper'

const emit = defineEmits(['upgrade-click'])

const isLoading = ref(false)
const topCategories = ref([
  { id: 1, name: 'Electronics', wishlist_count: 250, purchase_count: 80 },
  { id: 2, name: 'Clothing', wishlist_count: 180, purchase_count: 65 },
  { id: 3, name: 'Home & Garden', wishlist_count: 150, purchase_count: 50 },
])

const topBrands = ref([
  { id: 1, name: 'Brand A', wishlist_count: 200, purchase_count: 70 },
  { id: 2, name: 'Brand B', wishlist_count: 160, purchase_count: 55 },
  { id: 3, name: 'Brand C', wishlist_count: 140, purchase_count: 45 },
])

const tabs = [
  { name: getI18n('categories', __('Categories', 'saveto-wishlist-lite-for-woocommerce')), icon: Folder },
  { name: getI18n('brands', __('Brands', 'saveto-wishlist-lite-for-woocommerce')), icon: Tag },
]

const selectedTab = ref(0)

const formatNumber = (num: number): string => {
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num.toString()
}

const handleClick = () => {
  emit('upgrade-click')
}
</script>

<template>
  <div class="stwlite-tw-space-y-6">
    <div class="stwlite-tw-bg-gradient-to-r stwlite-tw-from-blue-50 stwlite-tw-to-cyan-50 stwlite-tw-rounded-lg stwlite-tw-p-6 stwlite-tw-border stwlite-tw-border-blue-100">
      <h2 class="stwlite-tw-text-2xl stwlite-tw-font-bold stwlite-tw-text-gray-900 stwlite-tw-mb-2">
        {{ getI18n('category_brand_insights_title', __('Category & Brand Insights', 'saveto-wishlist-lite-for-woocommerce')) }}
      </h2>
      <p class="stwlite-tw-text-gray-600">
        {{ getI18n('category_brand_insights_subtitle', __('Discover which categories and brands are most popular in wishlists.', 'saveto-wishlist-lite-for-woocommerce')) }}
      </p>
    </div>

    <TabGroup @change="(index) => { selectedTab = index; handleClick() }">
      <TabList class="stwlite-tw-flex stwlite-tw-space-x-4">
        <Tab
          v-for="(tab, index) in tabs"
          :key="index"
          v-slot="{ selected }"
          class="stwlite-tw-w-full stwlite-tw-cursor-pointer stwlite-tw-border-none stwlite-tw-outline-none stwlite-tw-bg-transparent stwlite-tw-p-0 stwlite-tw-m-0"
        >
          <div
            @click="handleClick"
            :class="[
              'stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-space-x-2 stwlite-tw-py-3 stwlite-tw-px-4 stwlite-tw-rounded-md stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-transition-all stwlite-tw-duration-200 stwlite-tw-border-2 stwlite-tw-border-solid stwlite-tw-border-blue-600 focus:stwlite-tw-outline-none stwlite-tw-cursor-pointer',
              selected ? 'stwlite-tw-bg-blue-600 stwlite-tw-text-white' : 'stwlite-tw-text-gray-600 hover:stwlite-tw-bg-gray-50'
            ]"
          >
            <component :is="tab.icon" class="stwlite-tw-w-5 stwlite-tw-h-5" />
            <span>{{ tab.name }}</span>
          </div>
        </Tab>
      </TabList>

      <TabPanels>
        <TabPanel>
          <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-shadow-sm stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-overflow-hidden">
            <div class="stwlite-tw-overflow-x-auto">
              <table class="stwlite-tw-min-w-full stwlite-tw-divide-y stwlite-tw-divide-gray-200">
                <thead class="stwlite-tw-bg-gray-50">
                  <tr>
                    <th class="stwlite-tw-px-6 stwlite-tw-py-3 stwlite-tw-text-left stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-text-gray-500 stwlite-tw-uppercase">{{ getI18n('column_category', __('Category', 'saveto-wishlist-lite-for-woocommerce')) }}</th>
                    <th class="stwlite-tw-px-6 stwlite-tw-py-3 stwlite-tw-text-left stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-text-gray-500 stwlite-tw-uppercase">{{ getI18n('column_wishlist_saves', __('Wishlist Saves', 'saveto-wishlist-lite-for-woocommerce')) }}</th>
                    <th class="stwlite-tw-px-6 stwlite-tw-py-3 stwlite-tw-text-left stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-text-gray-500 stwlite-tw-uppercase">{{ getI18n('column_purchases', __('Purchases', 'saveto-wishlist-lite-for-woocommerce')) }}</th>
                  </tr>
                </thead>
                <tbody class="stwlite-tw-bg-white stwlite-tw-divide-y stwlite-tw-divide-gray-200">
                  <tr v-for="category in topCategories" :key="category.id" class="hover:stwlite-tw-bg-gray-50">
                    <td class="stwlite-tw-px-6 stwlite-tw-py-4">
                      <div class="stwlite-tw-flex stwlite-tw-items-center">
                        <Folder class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-tw-text-blue-600 stwlite-tw-mr-2" />
                        <span class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ category.name }}</span>
                      </div>
                    </td>
                    <td class="stwlite-tw-px-6 stwlite-tw-py-4">
                      <span class="stwlite-tw-text-sm stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ formatNumber(category.wishlist_count) }}</span>
                    </td>
                    <td class="stwlite-tw-px-6 stwlite-tw-py-4">
                      <span class="stwlite-tw-text-sm stwlite-tw-text-gray-600">{{ category.purchase_count }}</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </TabPanel>

        <TabPanel>
          <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-shadow-sm stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-overflow-hidden">
            <div class="stwlite-tw-overflow-x-auto">
              <table class="stwlite-tw-min-w-full stwlite-tw-divide-y stwlite-tw-divide-gray-200">
                <thead class="stwlite-tw-bg-gray-50">
                  <tr>
                    <th class="stwlite-tw-px-6 stwlite-tw-py-3 stwlite-tw-text-left stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-text-gray-500 stwlite-tw-uppercase">{{ getI18n('column_brand', __('Brand', 'saveto-wishlist-lite-for-woocommerce')) }}</th>
                    <th class="stwlite-tw-px-6 stwlite-tw-py-3 stwlite-tw-text-left stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-text-gray-500 stwlite-tw-uppercase">{{ getI18n('column_wishlist_saves', __('Wishlist Saves', 'saveto-wishlist-lite-for-woocommerce')) }}</th>
                    <th class="stwlite-tw-px-6 stwlite-tw-py-3 stwlite-tw-text-left stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-text-gray-500 stwlite-tw-uppercase">{{ getI18n('column_purchases', __('Purchases', 'saveto-wishlist-lite-for-woocommerce')) }}</th>
                  </tr>
                </thead>
                <tbody class="stwlite-tw-bg-white stwlite-tw-divide-y stwlite-tw-divide-gray-200">
                  <tr v-for="brand in topBrands" :key="brand.id" class="hover:stwlite-tw-bg-gray-50">
                    <td class="stwlite-tw-px-6 stwlite-tw-py-4">
                      <div class="stwlite-tw-flex stwlite-tw-items-center">
                        <Tag class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-tw-text-purple-600 stwlite-tw-mr-2" />
                        <span class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ brand.name }}</span>
                      </div>
                    </td>
                    <td class="stwlite-tw-px-6 stwlite-tw-py-4">
                      <span class="stwlite-tw-text-sm stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ formatNumber(brand.wishlist_count) }}</span>
                    </td>
                    <td class="stwlite-tw-px-6 stwlite-tw-py-4">
                      <span class="stwlite-tw-text-sm stwlite-tw-text-gray-600">{{ brand.purchase_count }}</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </TabPanel>
      </TabPanels>
    </TabGroup>
  </div>
</template>

<style scoped lang="scss">
</style>
