<script setup lang="ts">
import { ref, computed } from 'vue'
import { __ } from '@wordpress/i18n'
import {
  Calendar,
  Clock,
  TrendingUp,
  TrendingDown,
  Activity,
  BarChart3,
  LineChart,
  Sunrise,
  Sun,
  Sunset,
  Moon,
  Zap,
  Timer,
  CalendarClock,
  ArrowUpRight,
  ArrowDownRight,
  AlertTriangle,
} from 'lucide-vue-next'
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
import { getI18n } from '@/helper'

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

const dateRange = ref<'7days' | '30days' | '90days' | '365days'>('30days')
const trackingPeriod = computed(() => {
  const trackingPeriodText = getI18n('tracking_period', __('Last %1$s', 'saveto-wishlist-lite-for-woocommerce'))
  const days = dateRange.value === '7days' ? '7 days' : dateRange.value === '30days' ? '30 days' : dateRange.value === '90days' ? '90 days' : '365 days'
  return trackingPeriodText.replace('%1$s', days)
})

// Mock data
const timeSeriesData = ref([
  { date: '2024-01-01', saves: 45 },
  { date: '2024-01-02', saves: 52 },
  { date: '2024-01-03', saves: 38 },
  { date: '2024-01-04', saves: 61 },
  { date: '2024-01-05', saves: 55 },
  { date: '2024-01-06', saves: 72 },
  { date: '2024-01-07', saves: 68 },
  { date: '2024-01-08', saves: 48 },
  { date: '2024-01-09', saves: 59 },
  { date: '2024-01-10', saves: 64 },
  { date: '2024-01-11', saves: 71 },
  { date: '2024-01-12', saves: 66 },
  { date: '2024-01-13', saves: 58 },
  { date: '2024-01-14', saves: 73 },
  { date: '2024-01-15', saves: 69 },
  { date: '2024-01-16', saves: 54 },
  { date: '2024-01-17', saves: 62 },
  { date: '2024-01-18', saves: 75 },
  { date: '2024-01-19', saves: 68 },
  { date: '2024-01-20', saves: 70 },
  { date: '2024-01-21', saves: 77 },
  { date: '2024-01-22', saves: 72 },
  { date: '2024-01-23', saves: 65 },
  { date: '2024-01-24', saves: 79 },
  { date: '2024-01-25', saves: 74 },
  { date: '2024-01-26', saves: 81 },
  { date: '2024-01-27', saves: 76 },
  { date: '2024-01-28', saves: 83 },
  { date: '2024-01-29', saves: 78 },
  { date: '2024-01-30', saves: 85 },
])

const wishlistAgeData = ref([
  { range: '0-3 days', count: 320, percentage: 25.6 },
  { range: '4-7 days', count: 280, percentage: 22.4 },
  { range: '8-30 days', count: 380, percentage: 30.4 },
  { range: '31-60 days', count: 150, percentage: 12.0 },
  { range: '61-90 days', count: 80, percentage: 6.4 },
  { range: '90+ days', count: 40, percentage: 3.2 },
])

const peakActivity = ref({
  hour: 19,
  period: '7:00 PM - 9:00 PM',
  saves: 125,
  day: 'Saturday'
})

const tabs = [
  { 
    name: getI18n('saves_over_time', __('Saves Over Time', 'saveto-wishlist-lite-for-woocommerce')), 
    icon: LineChart,
  },
  { 
    name: getI18n('wishlist_age', __('Wishlist Age Analysis', 'saveto-wishlist-lite-for-woocommerce')), 
    icon: Timer,
  },
]

const selectedTab = ref(0)

// Computed metrics
const totalSaves = computed(() => 
  timeSeriesData.value.reduce((sum, item) => sum + item.saves, 0)
)

const avgDailySaves = computed(() => 
  timeSeriesData.value.length > 0 
    ? Math.round(totalSaves.value / timeSeriesData.value.length)
    : 0
)

const savesGrowth = computed(() => {
  if (timeSeriesData.value.length < 2) return 0
  const recent = timeSeriesData.value.slice(-7)
  const previous = timeSeriesData.value.slice(-14, -7)
  
  const recentAvg = recent.reduce((sum, item) => sum + item.saves, 0) / recent.length
  const previousAvg = previous.reduce((sum, item) => sum + item.saves, 0) / previous.length
  
  return previousAvg > 0 ? parseFloat((((recentAvg - previousAvg) / previousAvg) * 100).toFixed(1)) : 0
})

const avgWishlistAge = computed(() => {
  const totalProducts = wishlistAgeData.value.reduce((sum, item) => sum + item.count, 0)
  if (totalProducts === 0) return '0 days'
  
  const weights = [2, 7, 20, 45, 75, 120]
  let weightedSum = 0
  
  wishlistAgeData.value.forEach((item, index) => {
    if (index < weights.length) {
      weightedSum += item.count * weights[index]
    }
  })
  
  const avgDays = Math.round(weightedSum / totalProducts)
  return `${avgDays} days`
})

const quickConvertersPercentage = computed(() => 
  wishlistAgeData.value[0]?.percentage ?? 0
)

const considerationPhasePercentage = computed(() => {
  const phase1 = wishlistAgeData.value[1]?.percentage ?? 0
  const phase2 = wishlistAgeData.value[2]?.percentage ?? 0
  return phase1 + phase2
})

const staleWishlistsPercentage = computed(() => {
  const phase4 = wishlistAgeData.value[4]?.percentage ?? 0
  const phase5 = wishlistAgeData.value[5]?.percentage ?? 0
  return phase4 + phase5
})

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

const getMaxSaves = computed(() => 
  Math.max(...timeSeriesData.value.map(item => item.saves), 1)
)

const formatDate = (dateStr: string): string => {
  const date = new Date(dateStr)
  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
}

const getDayOfWeek = (dateStr: string): string => {
  const date = new Date(dateStr)
  return date.toLocaleDateString('en-US', { weekday: 'short' })
}

const getTimeIcon = (hour: number) => {
  if (hour >= 6 && hour < 12) return Sunrise
  if (hour >= 12 && hour < 18) return Sun
  if (hour >= 18 && hour < 24) return Sunset
  return Moon
}

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

const handleDateRangeChange = (range: '7days' | '30days' | '90days' | '365days') => {
  dateRange.value = range
  handleClick()
}
</script>

<template>
  <div class="stwlite-tw-space-y-6">
    <!-- Header Section -->
    <div class="stwlite-tw-bg-gradient-to-r stwlite-tw-from-violet-50 stwlite-tw-to-purple-50 stwlite-tw-rounded-lg stwlite-tw-p-6 stwlite-tw-border stwlite-tw-border-violet-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('timebased_trends_title', __('Time-based Trends', 'saveto-wishlist-lite-for-woocommerce')) }}
          </h2>
          <p class="stwlite-tw-text-gray-600 stwlite-tw-max-w-3xl">
            {{ getI18n('timebased_trends_subtitle', __('View trends and patterns over time.', 'saveto-wishlist-lite-for-woocommerce')) }}
          </p>
        </div>
        <div v-if="selectedTab === 0" class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-space-x-3">
          <!-- Date Range Selector -->
          <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-space-x-2">
            <button
              @click="handleDateRangeChange('7days')"
              :class="[
                'stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-rounded-md stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-transition-all stwlite-tw-duration-200 stwlite-tw-border-2 stwlite-tw-border-solid stwlite-tw-border-violet-600 focus:stwlite-tw-outline-none stwlite-tw-cursor-pointer',
                dateRange === '7days' 
                  ? 'stwlite-tw-bg-violet-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'
              ]"
            >
              7D
            </button>
            <button
              @click="handleDateRangeChange('30days')"
              :class="[
                'stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-rounded-md stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-transition-all stwlite-tw-duration-200 stwlite-tw-border-2 stwlite-tw-border-solid stwlite-tw-border-violet-600 focus:stwlite-tw-outline-none stwlite-tw-cursor-pointer',
                dateRange === '30days' 
                  ? 'stwlite-tw-bg-violet-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'
              ]"
            >
              30D
            </button>
            <button
              @click="handleDateRangeChange('90days')"
              :class="[
                'stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-rounded-md stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-transition-all stwlite-tw-duration-200 stwlite-tw-border-2 stwlite-tw-border-solid stwlite-tw-border-violet-600 focus:stwlite-tw-outline-none stwlite-tw-cursor-pointer',
                dateRange === '90days' 
                  ? 'stwlite-tw-bg-violet-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'
              ]"
            >
              90D
            </button>
            <button
              @click="handleDateRangeChange('365days')"
              :class="[
                'stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-rounded-md stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-transition-all stwlite-tw-duration-200 stwlite-tw-border-2 stwlite-tw-border-solid stwlite-tw-border-violet-600 focus:stwlite-tw-outline-none stwlite-tw-cursor-pointer',
                dateRange === '365days' 
                  ? 'stwlite-tw-bg-violet-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'
              ]"
            >
              1Y
            </button>
          </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-violet-200">
            <CalendarClock class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-text-violet-600" />
          </div>
        </div>
      </div>
    </div>

    <!-- Key Metrics Cards -->
    <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 md: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 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('total_saves', __('Total Saves', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ formatNumber(totalSaves) }}</p>
          </div>
          <div class="stwlite-tw-bg-violet-100 stwlite-tw-rounded-full stwlite-tw-p-3">
            <Activity class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-text-violet-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_daily_saves', __('Avg. Daily Saves', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ avgDailySaves }}</p>
          </div>
          <div class="stwlite-tw-bg-blue-100 stwlite-tw-rounded-full stwlite-tw-p-3">
            <BarChart3 class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-text-blue-600" />
          </div>
        </div>
      </div>

      <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-shadow-sm stwlite-tw-border-2 stwlite-tw-border-purple-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('growth_trend', __('Growth Trend', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-tw-text-purple-600 stwlite-tw-mb-2">
              {{ Math.abs(savesGrowth) }}%
            </p>
            <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-text-sm">
              <TrendingUp v-if="savesGrowth >= 0" class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-1 stwlite-tw-text-green-600" />
              <TrendingDown v-else class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-1 stwlite-tw-text-red-600" />
              <span :class="savesGrowth >= 0 ? 'stwlite-tw-text-green-600' : 'stwlite-tw-text-red-600'">
                {{ savesGrowth >= 0 ? getI18n('increasing', __('Increasing', 'saveto-wishlist-lite-for-woocommerce')) : getI18n('decreasing', __('Decreasing', 'saveto-wishlist-lite-for-woocommerce')) }}
              </span>
            </div>
          </div>
          <div class="stwlite-tw-bg-purple-100 stwlite-tw-rounded-full stwlite-tw-p-3">
            <TrendingUp class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-text-purple-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_wishlist_age', __('Avg. Wishlist Age', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ avgWishlistAge }}</p>
          </div>
          <div class="stwlite-tw-bg-orange-100 stwlite-tw-rounded-full stwlite-tw-p-3">
            <Clock 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-violet-600 focus:stwlite-tw-outline-none stwlite-tw-cursor-pointer',
              selected
                ? 'stwlite-tw-bg-violet-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>
        <!-- Saves Over Time Tab -->
        <TabPanel>
          <div class="stwlite-tw-space-y-6">
            <!-- Chart Area -->
            <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-violet-50 stwlite-tw-to-purple-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">
                    <LineChart class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-tw-text-violet-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('wishlist_saves_over_time', __('Wishlist Saves Over Time', 'saveto-wishlist-lite-for-woocommerce')) }}
                    </h3>
                  </div>
                  <span class="stwlite-tw-text-sm stwlite-tw-text-gray-600">
                    {{ trackingPeriod }}
                  </span>
                </div>
              </div>

              <!-- Simple Bar Chart Visualization -->
              <div class="stwlite-tw-p-6">
                <div class="stwlite-tw-space-y-4">
                  <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 stwlite-tw-gap-3 md:stwlite-tw-grid-cols-10">
                    <div
                      v-for="(item, index) in timeSeriesData.slice(-30)"
                      :key="index"
                      class="stwlite-tw-flex stwlite-tw-flex-col stwlite-tw-items-center stwlite-tw-space-y-2"
                    >
                      <div class="stwlite-tw-w-full stwlite-tw-flex stwlite-tw-flex-col stwlite-tw-items-center stwlite-tw-justify-end stwlite-tw-h-48 stwlite-tw-relative">
                        <div class="stwlite-tw-absolute stwlite-tw-top-0 stwlite-tw-left-0 stwlite-tw-right-0 stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-text-xs stwlite-tw-font-bold stwlite-tw-text-violet-600 stwlite-tw-mb-1">
                          {{ item.saves }}
                        </div>
                        <div
                          class="stwlite-tw-w-full stwlite-tw-bg-gradient-to-t stwlite-tw-from-violet-500 stwlite-tw-to-violet-400 stwlite-tw-rounded-t-lg stwlite-tw-transition-all stwlite-tw-duration-300 hover:stwlite-tw-from-violet-600 hover:stwlite-tw-to-violet-500 stwlite-tw-cursor-pointer stwlite-tw-relative stwlite-tw-group"
                          :style="{ height: `${(item.saves / getMaxSaves) * 85}%` }"
                          @click="handleClick"
                        >
                          <div class="stwlite-tw-absolute stwlite-tw-inset-0 stwlite-tw-bg-white stwlite-tw-opacity-0 group-hover:stwlite-tw-opacity-10 stwlite-tw-transition-opacity stwlite-tw-rounded-t-lg"></div>
                        </div>
                      </div>
                      <div class="stwlite-tw-text-center">
                        <div class="stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ formatDate(item.date) }}</div>
                        <div class="stwlite-tw-text-xs stwlite-tw-text-gray-500">{{ getDayOfWeek(item.date) }}</div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Legend -->
                <div class="stwlite-tw-mt-6 stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-space-x-6">
                  <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-space-x-2">
                    <div class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-bg-gradient-to-t stwlite-tw-from-violet-500 stwlite-tw-to-violet-400 stwlite-tw-rounded"></div>
                    <span class="stwlite-tw-text-sm stwlite-tw-text-gray-600">{{ getI18n('wishlist_saves', __('Wishlist Saves', 'saveto-wishlist-lite-for-woocommerce')) }}</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- Peak Activity Card -->
            <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 md:stwlite-tw-grid-cols-2 stwlite-tw-gap-6">
              <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">
                <h4 class="stwlite-tw-text-sm stwlite-tw-font-semibold stwlite-tw-text-gray-700 stwlite-tw-mb-4 stwlite-tw-flex stwlite-tw-items-center">
                  <Zap class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-2 stwlite-tw-text-yellow-500" />
                  {{ getI18n('peak_activity_time', __('Peak Activity Time', 'saveto-wishlist-lite-for-woocommerce')) }}
                </h4>
                <div v-if="peakActivity" class="stwlite-tw-space-y-4">
                  <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between stwlite-tw-p-4 stwlite-tw-bg-gradient-to-r stwlite-tw-from-yellow-50 stwlite-tw-to-amber-50 stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-yellow-100">
                    <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-space-x-3">
                      <component :is="getTimeIcon(peakActivity.hour)" class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-text-yellow-600" />
                      <div>
                        <p class="stwlite-tw-text-sm stwlite-tw-text-gray-600">{{ getI18n('most_active_period', __('Most Active Period', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                        <p class="stwlite-tw-text-lg stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ peakActivity.period }}</p>
                      </div>
                    </div>
                    <div class="stwlite-tw-text-right">
                      <p class="stwlite-tw-text-2xl stwlite-tw-font-bold stwlite-tw-text-yellow-600">{{ peakActivity.saves }}</p>
                      <p class="stwlite-tw-text-xs stwlite-tw-text-gray-500">{{ getI18n('avg_saves', __('avg saves', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                    </div>
                  </div>
                  
                  <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between stwlite-tw-p-4 stwlite-tw-bg-gradient-to-r stwlite-tw-from-blue-50 stwlite-tw-to-indigo-50 stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-blue-100">
                    <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-space-x-3">
                      <Calendar class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-text-blue-600" />
                      <div>
                        <p class="stwlite-tw-text-sm stwlite-tw-text-gray-600">{{ getI18n('most_active_day', __('Most Active Day', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                        <p class="stwlite-tw-text-lg stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ peakActivity.day }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Trend Insights -->
              <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">
                <h4 class="stwlite-tw-text-sm stwlite-tw-font-semibold stwlite-tw-text-gray-700 stwlite-tw-mb-4 stwlite-tw-flex stwlite-tw-items-center">
                  <TrendingUp class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-2 stwlite-tw-text-green-500" />
                  {{ getI18n('trend_insights', __('Trend Insights', 'saveto-wishlist-lite-for-woocommerce')) }}
                </h4>
                <div class="stwlite-tw-space-y-3">
                  <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-3 stwlite-tw-p-3 stwlite-tw-bg-green-50 stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-green-100">
                    <ArrowUpRight class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-tw-text-green-600 stwlite-tw-mt-0.5" />
                    <div>
                      <p class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ getI18n('weekend_boost', __('Weekend Boost', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                      <p class="stwlite-tw-text-xs stwlite-tw-text-gray-600">{{ getI18n('weekend_boost_desc', __('Wishlist activity increases by 25% on weekends', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                    </div>
                  </div>
                  
                  <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-3 stwlite-tw-p-3 stwlite-tw-bg-blue-50 stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-blue-100">
                    <Activity class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-tw-text-blue-600 stwlite-tw-mt-0.5" />
                    <div>
                      <p class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ getI18n('consistent_growth', __('Consistent Growth', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                      <p class="stwlite-tw-text-xs stwlite-tw-text-gray-600">{{ getI18n('consistent_growth_desc', __('Steady upward trend in wishlist engagement', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                    </div>
                  </div>
                  
                  <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-3 stwlite-tw-p-3 stwlite-tw-bg-purple-50 stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-purple-100">
                    <Zap class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-tw-text-purple-600 stwlite-tw-mt-0.5" />
                    <div>
                      <p class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ getI18n('evening_peak', __('Evening Peak', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                      <p class="stwlite-tw-text-xs stwlite-tw-text-gray-600">{{ getI18n('evening_peak_desc', __('Higher engagement during evening hours (6-9 PM)', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </TabPanel>

        <!-- Wishlist Age Analysis Tab -->
        <TabPanel>
          <div class="stwlite-tw-space-y-6">
            <!-- Age Distribution -->
            <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-amber-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">
                    <Timer class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-tw-text-orange-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('wishlist_age_distribution', __('Wishlist Age Distribution', 'saveto-wishlist-lite-for-woocommerce')) }}
                    </h3>
                  </div>
                  <span class="stwlite-tw-text-sm stwlite-tw-text-gray-600">
                    {{ getI18n('time_on_wishlist', __('Time products spend on wishlists', 'saveto-wishlist-lite-for-woocommerce')) }}
                  </span>
                </div>
              </div>

              <div class="stwlite-tw-p-6">
                <div class="stwlite-tw-space-y-4">
                  <div
                    v-for="(item, index) in wishlistAgeData"
                    :key="index"
                    class="stwlite-tw-space-y-2"
                  >
                    <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-3">
                        <div
                          :class="[
                            'stwlite-tw-w-10 stwlite-tw-h-10 stwlite-tw-rounded-lg stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-text-sm stwlite-tw-font-bold',
                            index === 0 ? 'stwlite-tw-bg-green-100 stwlite-tw-text-green-600' :
                            index === 1 ? 'stwlite-tw-bg-blue-100 stwlite-tw-text-blue-600' :
                            index === 2 ? 'stwlite-tw-bg-yellow-100 stwlite-tw-text-yellow-600' :
                            index === 3 ? 'stwlite-tw-bg-orange-100 stwlite-tw-text-orange-600' :
                            index === 4 ? 'stwlite-tw-bg-red-100 stwlite-tw-text-red-600' :
                            'stwlite-tw-bg-gray-100 stwlite-tw-text-gray-600'
                          ]"
                        >
                          <Clock class="stwlite-tw-w-5 stwlite-tw-h-5" />
                        </div>
                        <div>
                          <p class="stwlite-tw-text-sm stwlite-tw-font-semibold stwlite-tw-text-gray-900">{{ item.range }}</p>
                          <p class="stwlite-tw-text-xs stwlite-tw-text-gray-500">{{ item.count }} {{ getI18n('products', __('products', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                        </div>
                      </div>
                      <div class="stwlite-tw-text-right">
                        <p class="stwlite-tw-text-lg stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ item.percentage }}%</p>
                      </div>
                    </div>
                    
                    <div class="stwlite-tw-w-full stwlite-tw-bg-gray-200 stwlite-tw-rounded-full stwlite-tw-h-3 stwlite-tw-overflow-hidden">
                      <div
                        :class="[
                          'stwlite-tw-h-3 stwlite-tw-rounded-full stwlite-tw-transition-all stwlite-tw-duration-500',
                          index === 0 ? 'stwlite-tw-bg-gradient-to-r stwlite-tw-from-green-400 stwlite-tw-to-green-600' :
                          index === 1 ? 'stwlite-tw-bg-gradient-to-r stwlite-tw-from-blue-400 stwlite-tw-to-blue-600' :
                          index === 2 ? 'stwlite-tw-bg-gradient-to-r stwlite-tw-from-yellow-400 stwlite-tw-to-yellow-600' :
                          index === 3 ? 'stwlite-tw-bg-gradient-to-r stwlite-tw-from-orange-400 stwlite-tw-to-orange-600' :
                          index === 4 ? 'stwlite-tw-bg-gradient-to-r stwlite-tw-from-red-400 stwlite-tw-to-red-600' :
                          'stwlite-tw-bg-gradient-to-r stwlite-tw-from-gray-400 stwlite-tw-to-gray-600'
                        ]"
                        :style="{ width: `${item.percentage}%` }"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Insights Grid -->
            <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 md:stwlite-tw-grid-cols-3 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-green-200 stwlite-tw-p-6">
                <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between stwlite-tw-mb-4">
                  <div class="stwlite-tw-bg-green-100 stwlite-tw-rounded-full stwlite-tw-p-3">
                    <Zap class="stwlite-tw-w-6 stwlite-tw-h-6 stwlite-tw-text-green-600" />
                  </div>
                </div>
                <h4 class="stwlite-tw-text-sm stwlite-tw-font-semibold stwlite-tw-text-gray-700 stwlite-tw-mb-2">{{ getI18n('quick_converters', __('Quick Converters', 'saveto-wishlist-lite-for-woocommerce')) }}</h4>
                <p class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-tw-text-green-600 stwlite-tw-mb-2">
                  {{ quickConvertersPercentage }}%
                </p>
                <p class="stwlite-tw-text-xs stwlite-tw-text-gray-600">{{ getI18n('quick_converters_desc', __('Convert within 3 days', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
              </div>

              <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-shadow-sm stwlite-tw-border-2 stwlite-tw-border-yellow-200 stwlite-tw-p-6">
                <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between stwlite-tw-mb-4">
                  <div class="stwlite-tw-bg-yellow-100 stwlite-tw-rounded-full stwlite-tw-p-3">
                    <Timer class="stwlite-tw-w-6 stwlite-tw-h-6 stwlite-tw-text-yellow-600" />
                  </div>
                </div>
                <h4 class="stwlite-tw-text-sm stwlite-tw-font-semibold stwlite-tw-text-gray-700 stwlite-tw-mb-2">{{ getI18n('consideration_phase', __('Consideration Phase', 'saveto-wishlist-lite-for-woocommerce')) }}</h4>
                <p class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-tw-text-yellow-600 stwlite-tw-mb-2">
                  {{ considerationPhasePercentage }}%
                </p>
                <p class="stwlite-tw-text-xs stwlite-tw-text-gray-600">{{ getI18n('consideration_phase_desc', __('4-30 days on wishlist', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
              </div>

              <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-shadow-sm stwlite-tw-border-2 stwlite-tw-border-red-200 stwlite-tw-p-6">
                <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between stwlite-tw-mb-4">
                  <div class="stwlite-tw-bg-red-100 stwlite-tw-rounded-full stwlite-tw-p-3">
                    <Clock class="stwlite-tw-w-6 stwlite-tw-h-6 stwlite-tw-text-red-600" />
                  </div>
                </div>
                <h4 class="stwlite-tw-text-sm stwlite-tw-font-semibold stwlite-tw-text-gray-700 stwlite-tw-mb-2">{{ getI18n('stale_wishlists', __('Stale Wishlists', 'saveto-wishlist-lite-for-woocommerce')) }}</h4>
                <p class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-tw-text-red-600 stwlite-tw-mb-2">
                  {{ staleWishlistsPercentage }}%
                </p>
                <p class="stwlite-tw-text-xs stwlite-tw-text-gray-600">{{ getI18n('stale_wishlists_desc', __('Over 60 days old', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
              </div>
            </div>
          </div>
        </TabPanel>
      </TabPanels>
    </TabGroup>
  </div>
</template>

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