<script setup lang="ts">
import { ref, computed } from 'vue'
import { __ } from '@wordpress/i18n'
import {
  ShoppingCart,
  Heart,
  TrendingUp,
  TrendingDown,
  AlertTriangle,
  CheckCircle2,
  Zap,
  Target,
  BarChart3,
  Activity,
  ExternalLink,
  Package,
} 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 || ''

// Mock data
const conversionMetrics = ref({
  overall_conversion_rate: 32.5,
  total_wishlisted_products: 1250,
  total_purchased_from_wishlist: 406,
  avg_time_to_purchase: '12 days',
  trend: 5.2
})

const highWishlistLowSales = ref([
  { id: 1, name: 'Premium Product A', sku: 'SKU-PA001', price: '$199.99', image: wcPlaceholderImg, wishlist_count: 85, purchase_count: 8, conversion_rate: 9.4, product_url: '#' },
  { id: 2, name: 'Premium Product B', sku: 'SKU-PB002', price: '$149.99', image: wcPlaceholderImg, wishlist_count: 72, purchase_count: 6, conversion_rate: 8.3, product_url: '#' },
  { id: 3, name: 'Premium Product C', sku: 'SKU-PC003', price: '$179.99', image: wcPlaceholderImg, wishlist_count: 68, purchase_count: 5, conversion_rate: 7.4, product_url: '#' },
])

const highSalesLowWishlist = ref([
  { id: 1, name: 'Impulse Product X', sku: 'SKU-IX001', price: '$29.99', image: wcPlaceholderImg, wishlist_count: 5, purchase_count: 45, product_url: '#' },
  { id: 2, name: 'Impulse Product Y', sku: 'SKU-IY002', price: '$39.99', image: wcPlaceholderImg, wishlist_count: 8, purchase_count: 52, product_url: '#' },
  { id: 3, name: 'Impulse Product Z', sku: 'SKU-IZ003', price: '$24.99', image: wcPlaceholderImg, wishlist_count: 6, purchase_count: 38, product_url: '#' },
])

const topConverters = ref([
  { id: 1, name: 'Top Converter A', sku: 'SKU-TCA001', price: '$89.99', image: wcPlaceholderImg, wishlist_count: 120, purchase_count: 58, conversion_rate: 48.3, product_url: '#' },
  { id: 2, name: 'Top Converter B', sku: 'SKU-TCB002', price: '$79.99', image: wcPlaceholderImg, wishlist_count: 95, purchase_count: 42, conversion_rate: 44.2, product_url: '#' },
  { id: 3, name: 'Top Converter C', sku: 'SKU-TCC003', price: '$99.99', image: wcPlaceholderImg, wishlist_count: 110, purchase_count: 48, conversion_rate: 43.6, product_url: '#' },
])

const tabs = [
  { 
    name: getI18n('high_wishlist_low_sales', __('High Wishlist / Low Sales', 'saveto-wishlist-lite-for-woocommerce')), 
    icon: AlertTriangle,
    color: 'orange'
  },
  { 
    name: getI18n('high_sales_low_wishlist', __('High Sales / Low Wishlist', 'saveto-wishlist-lite-for-woocommerce')), 
    icon: Zap,
    color: 'yellow'
  },
  { 
    name: getI18n('top_converters', __('Top Converters', 'saveto-wishlist-lite-for-woocommerce')), 
    icon: Target,
    color: 'green'
  },
]

const selectedTab = ref(0)

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

const getConversionRateColor = (rate: number): string => {
  if (rate >= 40) return 'stwlite-tw-text-green-600 stwlite-tw-bg-green-100'
  if (rate >= 20) return 'stwlite-tw-text-yellow-600 stwlite-tw-bg-yellow-100'
  return 'stwlite-tw-text-red-600 stwlite-tw-bg-red-100'
}

const getConversionRateLabel = (rate: number): string => {
  if (rate >= 40) return getI18n('excellent', __('Excellent', 'saveto-wishlist-lite-for-woocommerce'))
  if (rate >= 20) return getI18n('good', __('Good', 'saveto-wishlist-lite-for-woocommerce'))
  return getI18n('needs_attention', __('Needs Attention', 'saveto-wishlist-lite-for-woocommerce'))
}

const conversionTrendClass = computed(() => 
  conversionMetrics.value.trend >= 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-blue-50 stwlite-tw-to-indigo-50 stwlite-tw-rounded-lg stwlite-tw-p-6 stwlite-tw-border stwlite-tw-border-blue-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('engagement_insights_title', __('Engagement Insights', 'saveto-wishlist-lite-for-woocommerce')) }}
          </h2>
          <p class="stwlite-tw-text-gray-600 stwlite-tw-max-w-3xl">
            {{ getI18n('engagement_insights_subtitle', __('Track customer engagement metrics and conversion rates.', 'saveto-wishlist-lite-for-woocommerce')) }}
          </p>
        </div>
        <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-shadow-sm stwlite-tw-p-3 stwlite-tw-border stwlite-tw-border-blue-200">
          <Activity class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-text-blue-600" />
        </div>
      </div>
    </div>

    <!-- Key Metrics Cards -->
    <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 md:stwlite-tw-grid-cols-2 lg:stwlite-tw-grid-cols-4 stwlite-tw-gap-6">
      <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-shadow-sm stwlite-tw-border-2 stwlite-tw-border-indigo-200 stwlite-tw-p-6">
        <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-justify-between">
          <div class="stwlite-tw-flex-1">
            <p class="stwlite-tw-text-sm stwlite-tw-text-gray-600 stwlite-tw-mb-1">{{ getI18n('overall_conversion_rate', __('Overall Conversion Rate', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-4xl stwlite-tw-font-bold stwlite-tw-text-indigo-600 stwlite-tw-mb-2">
              {{ conversionMetrics.overall_conversion_rate }}%
            </p>
            <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-text-sm">
              <TrendingUp v-if="conversionMetrics.trend >= 0" :class="['stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-1', conversionTrendClass]" />
              <TrendingDown v-else :class="['stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-1', conversionTrendClass]" />
              <span :class="conversionTrendClass">
                {{ Math.abs(conversionMetrics.trend) }}% {{ getI18n('vs_last_period', __('vs last period', 'saveto-wishlist-lite-for-woocommerce')) }}
              </span>
            </div>
          </div>
          <div class="stwlite-tw-bg-indigo-100 stwlite-tw-rounded-full stwlite-tw-p-3">
            <Target class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-text-indigo-600" />
          </div>
        </div>
      </div>

      <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-shadow-sm stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-p-6">
        <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between">
          <div>
            <p class="stwlite-tw-text-sm stwlite-tw-text-gray-600 stwlite-tw-mb-1">{{ getI18n('wishlisted_products', __('Wishlisted Products', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ formatNumber(conversionMetrics.total_wishlisted_products) }}</p>
          </div>
          <div class="stwlite-tw-bg-pink-100 stwlite-tw-rounded-full stwlite-tw-p-3">
            <Heart class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-text-pink-600" />
          </div>
        </div>
      </div>

      <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-shadow-sm stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-p-6">
        <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between">
          <div>
            <p class="stwlite-tw-text-sm stwlite-tw-text-gray-600 stwlite-tw-mb-1">{{ getI18n('purchased_from_wishlist', __('Purchased from Wishlist', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ formatNumber(conversionMetrics.total_purchased_from_wishlist) }}</p>
          </div>
          <div class="stwlite-tw-bg-green-100 stwlite-tw-rounded-full stwlite-tw-p-3">
            <ShoppingCart class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-text-green-600" />
          </div>
        </div>
      </div>

      <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-shadow-sm stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-p-6">
        <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between">
          <div>
            <p class="stwlite-tw-text-sm stwlite-tw-text-gray-600 stwlite-tw-mb-1">{{ getI18n('avg_time_to_purchase', __('Avg. Time to Purchase', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ conversionMetrics.avg_time_to_purchase }}</p>
          </div>
          <div class="stwlite-tw-bg-orange-100 stwlite-tw-rounded-full stwlite-tw-p-3">
            <Activity class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-text-orange-600" />
          </div>
        </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
                ? tab.color === 'orange' ? 'stwlite-tw-bg-orange-600 stwlite-tw-text-white stwlite-tw-shadow-sm stwlite-tw-border-orange-600' :
                  tab.color === 'yellow' ? 'stwlite-tw-bg-yellow-500 stwlite-tw-text-white stwlite-tw-shadow-sm stwlite-tw-border-yellow-600' :
                  'stwlite-tw-bg-green-600 stwlite-tw-text-white stwlite-tw-shadow-sm stwlite-tw-border-green-600'
                : '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>
        <!-- High Wishlist / Low Sales Tab -->
        <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-orange-50 stwlite-tw-to-red-50 stwlite-tw-border-b stwlite-tw-border-gray-200">
              <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-justify-between">
                <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-3">
                  <AlertTriangle class="stwlite-tw-w-6 stwlite-tw-h-6 stwlite-tw-text-orange-600 stwlite-tw-mt-1" />
                  <div>
                    <h3 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-text-gray-900">
                      {{ getI18n('high_wishlist_low_sales_title', __('High Wishlist / Low Sales Products', 'saveto-wishlist-lite-for-woocommerce')) }}
                    </h3>
                    <p class="stwlite-tw-text-sm stwlite-tw-text-gray-600 stwlite-tw-mt-1">
                      {{ getI18n('high_wishlist_low_sales_desc', __('Products heavily saved but rarely purchased. This could indicate pricing issues, stock availability problems, or a need for promotional strategies.', 'saveto-wishlist-lite-for-woocommerce')) }}
                    </p>
                  </div>
                </div>
              </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_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-left stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-text-gray-500 stwlite-tw-uppercase stwlite-tw-tracking-wider">
                      {{ getI18n('column_conversion_rate', __('Conversion Rate', '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 in highWishlistLowSales"
                    :key="product.id"
                    class="hover:stwlite-tw-bg-orange-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">
                        <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-gray-400 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">
                      <div class="stwlite-tw-flex stwlite-tw-items-center">
                        <span :class="['stwlite-tw-text-sm stwlite-tw-font-bold stwlite-tw-px-2.5 stwlite-tw-py-1 stwlite-tw-rounded-full', getConversionRateColor(product.conversion_rate)]">
                          {{ product.conversion_rate }}%
                        </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-orange-600 hover:stwlite-tw-text-orange-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>

        <!-- High Sales / Low Wishlist Tab -->
        <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-yellow-50 stwlite-tw-to-amber-50 stwlite-tw-border-b stwlite-tw-border-gray-200">
              <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-justify-between">
                <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-3">
                  <Zap class="stwlite-tw-w-6 stwlite-tw-h-6 stwlite-tw-text-yellow-600 stwlite-tw-mt-1" />
                  <div>
                    <h3 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-text-gray-900">
                      {{ getI18n('high_sales_low_wishlist_title', __('High Sales / Low Wishlist Products', 'saveto-wishlist-lite-for-woocommerce')) }}
                    </h3>
                    <p class="stwlite-tw-text-sm stwlite-tw-text-gray-600 stwlite-tw-mt-1">
                      {{ getI18n('high_sales_low_wishlist_desc', __('Products selling well without much wishlist activity. These are likely impulse buys or have strong immediate appeal.', 'saveto-wishlist-lite-for-woocommerce')) }}
                    </p>
                  </div>
                </div>
              </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_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_purchases', __('Purchases', '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-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 in highSalesLowWishlist"
                    :key="product.id"
                    class="hover:stwlite-tw-bg-yellow-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">
                        <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">
                        <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-bold stwlite-tw-text-green-600">{{ formatNumber(product.purchase_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">
                        <Heart class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-text-gray-400 stwlite-tw-mr-2" />
                        <span class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ product.wishlist_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-yellow-600 hover:stwlite-tw-text-yellow-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>

        <!-- Top Converters Tab -->
        <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-green-50 stwlite-tw-to-emerald-50 stwlite-tw-border-b stwlite-tw-border-gray-200">
              <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-justify-between">
                <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-3">
                  <Target class="stwlite-tw-w-6 stwlite-tw-h-6 stwlite-tw-text-green-600 stwlite-tw-mt-1" />
                  <div>
                    <h3 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-text-gray-900">
                      {{ getI18n('top_converters_title', __('Top Converting Products', 'saveto-wishlist-lite-for-woocommerce')) }}
                    </h3>
                    <p class="stwlite-tw-text-sm stwlite-tw-text-gray-600 stwlite-tw-mt-1">
                      {{ getI18n('top_converters_desc', __('Products with the highest wishlist-to-purchase conversion rates.', 'saveto-wishlist-lite-for-woocommerce')) }}
                    </p>
                  </div>
                </div>
              </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-left stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-text-gray-500 stwlite-tw-uppercase stwlite-tw-tracking-wider">
                      {{ getI18n('column_conversion_rate', __('Conversion Rate', '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 topConverters"
                    :key="product.id"
                    class="hover:stwlite-tw-bg-green-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-gradient-to-r stwlite-tw-from-yellow-400 stwlite-tw-to-yellow-500 stwlite-tw-text-white' :
                            index === 1 ? 'stwlite-tw-bg-gradient-to-r stwlite-tw-from-gray-300 stwlite-tw-to-gray-400 stwlite-tw-text-gray-900' :
                            index === 2 ? 'stwlite-tw-bg-gradient-to-r stwlite-tw-from-orange-400 stwlite-tw-to-orange-500 stwlite-tw-text-white' :
                            'stwlite-tw-bg-gray-100 stwlite-tw-text-gray-700'
                          ]"
                        >
                          {{ 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-bold stwlite-tw-text-green-600">{{ product.purchase_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">
                        <span class="stwlite-tw-text-lg stwlite-tw-font-bold stwlite-tw-text-green-600">{{ product.conversion_rate }}%</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-green-600 hover:stwlite-tw-text-green-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>
      </TabPanels>
    </TabGroup>

    <!-- Conversion Funnel Visualization -->
    <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-shadow-sm stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-p-6">
      <h3 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-text-gray-900 stwlite-tw-mb-4 stwlite-tw-flex stwlite-tw-items-center">
        <BarChart3 class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-tw-mr-2 stwlite-tw-text-indigo-600" />
        {{ getI18n('wishlist_conversion_funnel', __('Wishlist Conversion Funnel', 'saveto-wishlist-lite-for-woocommerce')) }}
      </h3>
      <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 md:stwlite-tw-grid-cols-3 stwlite-tw-gap-6">
        <div class="stwlite-tw-relative">
          <div class="stwlite-tw-bg-gradient-to-br stwlite-tw-from-blue-500 stwlite-tw-to-blue-600 stwlite-tw-rounded-lg stwlite-tw-p-6 stwlite-tw-text-white stwlite-tw-shadow-lg">
            <Package class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-mb-2 stwlite-tw-opacity-80" />
            <p class="stwlite-tw-text-sm stwlite-tw-opacity-90 stwlite-tw-mb-1">{{ getI18n('step_1', __('Step 1: Product Views', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-3xl stwlite-tw-font-bold">100%</p>
          </div>
        </div>

        <div class="stwlite-tw-relative">
          <div class="stwlite-tw-bg-gradient-to-br stwlite-tw-from-purple-500 stwlite-tw-to-purple-600 stwlite-tw-rounded-lg stwlite-tw-p-6 stwlite-tw-text-white stwlite-tw-shadow-lg">
            <Heart class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-mb-2 stwlite-tw-opacity-80" />
            <p class="stwlite-tw-text-sm stwlite-tw-opacity-90 stwlite-tw-mb-1">{{ getI18n('step_2', __('Step 2: Wishlist Saves', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-3xl stwlite-tw-font-bold">45%</p>
          </div>
        </div>

        <div class="stwlite-tw-relative">
          <div class="stwlite-tw-bg-gradient-to-br stwlite-tw-from-green-500 stwlite-tw-to-green-600 stwlite-tw-rounded-lg stwlite-tw-p-6 stwlite-tw-text-white stwlite-tw-shadow-lg">
            <ShoppingCart class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-mb-2 stwlite-tw-opacity-80" />
            <p class="stwlite-tw-text-sm stwlite-tw-opacity-90 stwlite-tw-mb-1">{{ getI18n('step_3', __('Step 3: Purchases', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-3xl stwlite-tw-font-bold">{{ conversionMetrics.overall_conversion_rate }}%</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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