<script setup lang="ts">
import { ref, computed } from 'vue'
import { __ } from '@wordpress/i18n'
import {
  TrendingUp,
  Heart,
  Clock,
  ShoppingCart,
  ExternalLink,
  ArrowUpRight,
  ArrowDownRight,
} from 'lucide-vue-next'
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
import { getI18n } from '@/helper'
import { getSavetoWishlistObj } from '@/config'

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

// Get WooCommerce placeholder image URL
const wcPlaceholderImg = getSavetoWishlistObj?.wcPlaceholderImg || ''

const isLoading = ref(false)
const trendingPeriod = ref<'7days' | '30days'>('7days')
const biggestIncrease = computed(() => {
  const biggestIncrease = getI18n('biggest_increase', __('Biggest increase in the past %1$s days', 'saveto-wishlist-lite-for-woocommerce'))
  const days = trendingPeriod.value === '7days' ? '7' : '30'
  return biggestIncrease.replace('%1$s', days)
})

// Mock data for display
const mostPopularProducts = ref([
  { id: 1, name: 'Sample Product 1', sku: 'SKU-001', price: '$29.99', image: wcPlaceholderImg, wishlist_count: 150, purchase_count: 45 },
  { id: 2, name: 'Sample Product 2', sku: 'SKU-002', price: '$49.99', image: wcPlaceholderImg, wishlist_count: 120, purchase_count: 38 },
  { id: 3, name: 'Sample Product 3', sku: 'SKU-003', price: '$19.99', image: wcPlaceholderImg, wishlist_count: 100, purchase_count: 30 },
])

const trendingProducts = ref([
  { id: 1, name: 'Trending Product 1', sku: 'SKU-T001', price: '$39.99', image: wcPlaceholderImg, wishlist_count: 80, purchase_count: 25, percentage_change: 15.5 },
  { id: 2, name: 'Trending Product 2', sku: 'SKU-T002', price: '$59.99', image: wcPlaceholderImg, wishlist_count: 65, purchase_count: 20, percentage_change: 12.3 },
])

const recentlyAddedProducts = ref([
  { id: 1, name: 'New Product 1', sku: 'SKU-N001', price: '$24.99', image: wcPlaceholderImg, wishlist_count: 50, added_date: '2024-01-15' },
  { id: 2, name: 'New Product 2', sku: 'SKU-N002', price: '$34.99', image: wcPlaceholderImg, wishlist_count: 40, added_date: '2024-01-14' },
])

const tabs = [
  { name: getI18n('most_popular_products', __('Most Popular', 'saveto-wishlist-lite-for-woocommerce')), icon: Heart },
  { name: getI18n('trending_products', __('Trending', 'saveto-wishlist-lite-for-woocommerce')), icon: TrendingUp },
  { name: getI18n('recently_added_products', __('Recently Added', 'saveto-wishlist-lite-for-woocommerce')), icon: Clock },
]

const selectedTab = ref(0)

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

const getTrendClass = (percentage: number | undefined): string => {
  if (!percentage) return ''
  return percentage > 0 ? 'stwlite-tw-text-green-600' : 'stwlite-tw-text-red-600'
}

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

<template>
  <div class="stwlite-tw-space-y-6">
    <!-- Header Section -->
    <div class="stwlite-tw-bg-gradient-to-r stwlite-tw-from-indigo-50 stwlite-tw-to-purple-50 stwlite-tw-rounded-lg stwlite-tw-p-6 stwlite-tw-border stwlite-tw-border-indigo-100">
      <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-justify-between">
        <div>
          <h2 class="stwlite-tw-text-2xl stwlite-tw-font-bold stwlite-tw-text-gray-900 stwlite-tw-mb-2">
            {{ getI18n('product_insights_title', __('Product Insights', 'saveto-wishlist-lite-for-woocommerce')) }}
          </h2>
          <p class="stwlite-tw-text-gray-600 stwlite-tw-max-w-3xl">
            {{ getI18n('product_insights_subtitle', __('Detailed visibility into how customers engage with individual products through wishlist activity and purchases.', 'saveto-wishlist-lite-for-woocommerce')) }}
          </p>
        </div>
        <div v-if="selectedTab === 1" class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-space-x-2">
          <button
            @click="handleClick"
            :class="[
              'stwlite-tw-px-4 stwlite-tw-py-2 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-indigo-600 focus:stwlite-tw-outline-none stwlite-tw-cursor-pointer',
              trendingPeriod === '7days' 
                ? 'stwlite-tw-bg-indigo-600 stwlite-tw-text-white stwlite-tw-shadow-sm' 
                : 'stwlite-tw-text-gray-600 hover:stwlite-tw-text-gray-900 hover:stwlite-tw-bg-gray-50'
            ]"
          >
            {{ getI18n('7_days', __('7 Days', 'saveto-wishlist-lite-for-woocommerce')) }}
          </button>
          <button
            @click="handleClick"
            :class="[
              'stwlite-tw-px-4 stwlite-tw-py-2 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-indigo-600 focus:stwlite-tw-outline-none stwlite-tw-cursor-pointer',
              trendingPeriod === '30days' 
                ? 'stwlite-tw-bg-indigo-600 stwlite-tw-text-white stwlite-tw-shadow-sm' 
                : 'stwlite-tw-text-gray-600 hover:stwlite-tw-text-gray-900 hover:stwlite-tw-bg-gray-50'
            ]"
          >
            {{ getI18n('30_days', __('30 Days', 'saveto-wishlist-lite-for-woocommerce')) }}
          </button>
        </div>
      </div>
    </div>

    <!-- Tabs -->
    <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-indigo-600 focus:stwlite-tw-outline-none stwlite-tw-cursor-pointer',
              selected ? 'stwlite-tw-bg-indigo-600 stwlite-tw-text-white stwlite-tw-shadow-sm' : 'stwlite-tw-text-gray-600 hover:stwlite-tw-text-gray-900 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>
        <!-- Most Popular Products -->
        <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-px-6 stwlite-tw-py-4 stwlite-tw-bg-gray-50 stwlite-tw-border-b stwlite-tw-border-gray-200">
              <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between">
                <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-space-x-2">
                  <Heart class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-tw-text-indigo-600" />
                  <h3 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-text-gray-900 stwlite-tw-p-0 stwlite-tw-m-0">
                    {{ getI18n('most_popular_products_title', __('Most Popular Products', 'saveto-wishlist-lite-for-woocommerce')) }}
                  </h3>
                </div>
                <span class="stwlite-tw-text-sm stwlite-tw-text-gray-500">
                  {{ getI18n('ranked_by_wishlists', __('Ranked by total wishlists', 'saveto-wishlist-lite-for-woocommerce')) }}
                </span>
              </div>
            </div>

            <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 stwlite-tw-tracking-wider">
                      {{ getI18n('column_rank', __('Rank', '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 stwlite-tw-tracking-wider">
                      {{ getI18n('column_product', __('Product', '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 stwlite-tw-tracking-wider">
                      {{ getI18n('column_price', __('Price', '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 stwlite-tw-tracking-wider">
                      {{ 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 stwlite-tw-tracking-wider">
                      {{ getI18n('column_purchases', __('Purchases', 'saveto-wishlist-lite-for-woocommerce')) }}
                    </th>
                    <th class="stwlite-tw-px-6 stwlite-tw-py-3 stwlite-tw-text-right stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-text-gray-500 stwlite-tw-uppercase stwlite-tw-tracking-wider">
                      {{ getI18n('column_actions', __('Actions', '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="(product, index) in mostPopularProducts"
                    :key="product.id"
                    class="hover:stwlite-tw-bg-gray-50 stwlite-tw-transition-colors stwlite-tw-duration-150"
                  >
                    <td class="stwlite-tw-px-6 stwlite-tw-py-4 stwlite-tw-whitespace-nowrap">
                      <div class="stwlite-tw-flex stwlite-tw-items-center">
                        <div
                          :class="[
                            'stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-rounded-full stwlite-tw-font-bold stwlite-tw-text-sm',
                            index === 0 ? 'stwlite-tw-bg-yellow-100 stwlite-tw-text-yellow-800' :
                            index === 1 ? 'stwlite-tw-bg-gray-100 stwlite-tw-text-gray-800' :
                            index === 2 ? 'stwlite-tw-bg-orange-100 stwlite-tw-text-orange-800' :
                            'stwlite-tw-bg-gray-50 stwlite-tw-text-gray-600'
                          ]"
                        >
                          {{ index + 1 }}
                        </div>
                      </div>
                    </td>
                    <td class="stwlite-tw-px-6 stwlite-tw-py-4 stwlite-tw-whitespace-nowrap">
                      <div class="stwlite-tw-flex stwlite-tw-items-center">
                        <img
                          :src="product.image"
                          :alt="product.name"
                          class="stwlite-tw-w-12 stwlite-tw-h-12 stwlite-tw-rounded-lg stwlite-tw-object-cover stwlite-tw-border stwlite-tw-border-gray-200"
                        />
                        <div class="stwlite-tw-ml-4">
                          <div class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ product.name }}</div>
                          <div class="stwlite-tw-text-xs stwlite-tw-text-gray-500">{{ product.sku }}</div>
                        </div>
                      </div>
                    </td>
                    <td class="stwlite-tw-px-6 stwlite-tw-py-4 stwlite-tw-whitespace-nowrap">
                      <div class="stwlite-tw-text-sm stwlite-tw-font-semibold stwlite-tw-text-gray-900">{{ product.price }}</div>
                    </td>
                    <td class="stwlite-tw-px-6 stwlite-tw-py-4 stwlite-tw-whitespace-nowrap">
                      <div class="stwlite-tw-flex stwlite-tw-items-center">
                        <Heart class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-text-pink-500 stwlite-tw-mr-2" />
                        <span class="stwlite-tw-text-sm stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ formatNumber(product.wishlist_count) }}</span>
                      </div>
                    </td>
                    <td class="stwlite-tw-px-6 stwlite-tw-py-4 stwlite-tw-whitespace-nowrap">
                      <div class="stwlite-tw-flex stwlite-tw-items-center">
                        <ShoppingCart class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-text-green-500 stwlite-tw-mr-2" />
                        <span class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ product.purchase_count }}</span>
                      </div>
                    </td>
                    <td class="stwlite-tw-px-6 stwlite-tw-py-4 stwlite-tw-whitespace-nowrap stwlite-tw-text-right">
                      <button
                        @click="handleClick"
                        class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-text-indigo-600 hover:stwlite-tw-text-indigo-900 stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-cursor-pointer"
                      >
                        {{ getI18n('view', __('View', 'saveto-wishlist-lite-for-woocommerce')) }}
                        <ExternalLink class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-ml-1" />
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </TabPanel>

        <!-- Trending Products -->
        <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-px-6 stwlite-tw-py-4 stwlite-tw-bg-gradient-to-r stwlite-tw-from-purple-50 stwlite-tw-to-pink-50 stwlite-tw-border-b stwlite-tw-border-gray-200">
              <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between">
                <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-space-x-2">
                  <TrendingUp class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-tw-text-purple-600" />
                  <h3 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-text-gray-900 stwlite-tw-p-0 stwlite-tw-m-0">
                    {{ getI18n('trending_products_title', __('Recent Trending Products', 'saveto-wishlist-lite-for-woocommerce')) }}
                  </h3>
                </div>
                <span class="stwlite-tw-text-sm stwlite-tw-text-gray-600">
                  {{ biggestIncrease }}
                </span>
              </div>
            </div>

            <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 stwlite-tw-tracking-wider">
                      {{ getI18n('column_product', __('Product', '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 stwlite-tw-tracking-wider">
                      {{ 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 stwlite-tw-tracking-wider">
                      {{ getI18n('column_change', __('Change', '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="product in trendingProducts"
                    :key="product.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">
                        <img :src="product.image" :alt="product.name" class="stwlite-tw-w-12 stwlite-tw-h-12 stwlite-tw-rounded-lg stwlite-tw-object-cover stwlite-tw-border stwlite-tw-border-gray-200" />
                        <div class="stwlite-tw-ml-4">
                          <div class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ product.name }}</div>
                          <div class="stwlite-tw-text-xs stwlite-tw-text-gray-500">{{ product.sku }}</div>
                        </div>
                      </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(product.wishlist_count) }}</span>
                    </td>
                    <td class="stwlite-tw-px-6 stwlite-tw-py-4">
                      <div class="stwlite-tw-flex stwlite-tw-items-center" :class="getTrendClass(product.percentage_change)">
                        <component :is="product.percentage_change && product.percentage_change > 0 ? ArrowUpRight : ArrowDownRight" class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-1" />
                        <span class="stwlite-tw-text-sm stwlite-tw-font-medium">{{ product.percentage_change }}%</span>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </TabPanel>

        <!-- Recently Added Products -->
        <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-px-6 stwlite-tw-py-4 stwlite-tw-bg-gray-50 stwlite-tw-border-b stwlite-tw-border-gray-200">
              <h3 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-text-gray-900">
                {{ getI18n('recently_added_products_title', __('Recently Added Products', 'saveto-wishlist-lite-for-woocommerce')) }}
              </h3>
            </div>
            <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_product', __('Product', '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_date', __('Date Added', '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="product in recentlyAddedProducts" :key="product.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">
                        <img :src="product.image" :alt="product.name" class="stwlite-tw-w-12 stwlite-tw-h-12 stwlite-tw-rounded-lg stwlite-tw-object-cover stwlite-tw-border stwlite-tw-border-gray-200" />
                        <div class="stwlite-tw-ml-4">
                          <div class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ product.name }}</div>
                          <div class="stwlite-tw-text-xs stwlite-tw-text-gray-500">{{ product.sku }}</div>
                        </div>
                      </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(product.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">{{ product.added_date }}</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </TabPanel>
      </TabPanels>
    </TabGroup>
  </div>
</template>

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