<script setup lang="ts">
import { ref, computed } from 'vue'
import { __ } from '@wordpress/i18n'
import {
  Users,
  Crown,
  Star,
  Heart,
  ShoppingCart,
  Share2,
  TrendingUp,
  Award,
  Medal,
  Sparkles,
  Target,
  UserCheck,
  Mail,
  Gift,
  Zap,
  BarChart3,
  ExternalLink,
  CircleDollarSign,
  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 behaviorMetrics = ref({
  total_active_customers: 1250,
  avg_wishlist_per_customer: 2.3,
  avg_items_per_wishlist: 8.5,
  share_rate: 18.5,
  purchase_rate: 32.5,
  avg_customer_value: 245.80
})

const topWishlisters = ref([
  { id: 1, name: 'John Doe', email: 'john@example.com', avatar: wcPlaceholderImg, wishlist_count: 12, total_items: 45, purchased_items: 28, shared_count: 8, total_spent: 1250.00, vip_status: 'platinum', customer_url: '#' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', avatar: wcPlaceholderImg, wishlist_count: 10, total_items: 38, purchased_items: 22, shared_count: 6, total_spent: 980.50, vip_status: 'gold', customer_url: '#' },
  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', avatar: wcPlaceholderImg, wishlist_count: 8, total_items: 32, purchased_items: 18, shared_count: 5, total_spent: 750.25, vip_status: 'silver', customer_url: '#' },
  { id: 4, name: 'Alice Williams', email: 'alice@example.com', avatar: wcPlaceholderImg, wishlist_count: 7, total_items: 28, purchased_items: 15, shared_count: 4, total_spent: 620.00, vip_status: 'bronze', customer_url: '#' },
  { id: 5, name: 'Charlie Brown', email: 'charlie@example.com', avatar: wcPlaceholderImg, wishlist_count: 6, total_items: 25, purchased_items: 12, shared_count: 3, total_spent: 485.75, vip_status: 'bronze', customer_url: '#' },
])

const customerSegments = ref([
  { name: getI18n('vip_customers', __('VIP Customers', 'saveto-wishlist-lite-for-woocommerce')), count: 125, percentage: 10.0, avg_value: 850.50, color: 'purple' },
  { name: getI18n('active_buyers', __('Active Buyers', 'saveto-wishlist-lite-for-woocommerce')), count: 450, percentage: 36.0, avg_value: 320.25, color: 'green' },
  { name: getI18n('window_shoppers', __('Window Shoppers', 'saveto-wishlist-lite-for-woocommerce')), count: 525, percentage: 42.0, avg_value: 95.50, color: 'yellow' },
  { name: getI18n('inactive_users', __('Inactive Users', 'saveto-wishlist-lite-for-woocommerce')), count: 150, percentage: 12.0, avg_value: 45.00, color: 'gray' },
])

const tabs = [
  { 
    name: getI18n('top_wishlisters', __('Top Wishlisters', 'saveto-wishlist-lite-for-woocommerce')), 
    icon: Crown,
  },
  { 
    name: getI18n('customer_segments', __('Customer Segments', 'saveto-wishlist-lite-for-woocommerce')), 
    icon: Users,
  },
]

const selectedTab = ref(0)

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

const formatCurrency = (amount: number): string => {
  return `$${amount.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
}

const getVIPBadgeClass = (status: string): string => {
  switch (status) {
    case 'platinum':
      return 'stwlite-tw-bg-gradient-to-r stwlite-tw-from-purple-500 stwlite-tw-to-pink-500 stwlite-tw-text-white'
    case 'gold':
      return 'stwlite-tw-bg-gradient-to-r stwlite-tw-from-yellow-400 stwlite-tw-to-yellow-500 stwlite-tw-text-gray-900'
    case 'silver':
      return 'stwlite-tw-bg-gradient-to-r stwlite-tw-from-gray-300 stwlite-tw-to-gray-400 stwlite-tw-text-gray-900'
    case 'bronze':
      return 'stwlite-tw-bg-gradient-to-r stwlite-tw-from-orange-400 stwlite-tw-to-orange-500 stwlite-tw-text-white'
    default:
      return 'stwlite-tw-bg-gray-100 stwlite-tw-text-gray-600'
  }
}

const getVIPIcon = (status: string) => {
  switch (status) {
    case 'platinum':
      return Crown
    case 'gold':
      return Award
    case 'silver':
      return Medal
    case 'bronze':
      return Star
    default:
      return UserCheck
  }
}

const getSegmentIcon = (color: string) => {
  switch (color) {
    case 'purple':
      return Crown
    case 'green':
      return ShoppingCart
    case 'yellow':
      return Heart
    default:
      return Users
  }
}

const vipCustomers = computed(() => 
  topWishlisters.value.filter(c => ['platinum', 'gold'].includes(c.vip_status))
)

const totalRevenue = computed(() => 
  topWishlisters.value.reduce((sum, c) => sum + c.total_spent, 0)
)

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-cyan-50 stwlite-tw-to-blue-50 stwlite-tw-rounded-lg stwlite-tw-p-6 stwlite-tw-border stwlite-tw-border-cyan-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('customer_behavior_title', __('Customer Behavior', 'saveto-wishlist-lite-for-woocommerce')) }}
          </h2>
          <p class="stwlite-tw-text-gray-600 stwlite-tw-max-w-3xl">
            {{ getI18n('customer_behavior_subtitle', __('Understand customer patterns and behavior.', '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-cyan-200">
          <Users class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-text-cyan-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-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-cyan-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('active_customers', __('Active Customers', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-4xl stwlite-tw-font-bold stwlite-tw-text-cyan-600">{{ formatNumber(behaviorMetrics.total_active_customers) }}</p>
          </div>
          <div class="stwlite-tw-bg-cyan-100 stwlite-tw-rounded-full stwlite-tw-p-3">
            <Users class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-text-cyan-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_per_customer', __('Avg. Wishlists / Customer', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ behaviorMetrics.avg_wishlist_per_customer }}</p>
          </div>
          <div class="stwlite-tw-bg-purple-100 stwlite-tw-rounded-full stwlite-tw-p-3">
            <Heart 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_items_per_wishlist', __('Avg. Items / Wishlist', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ behaviorMetrics.avg_items_per_wishlist }}</p>
          </div>
          <div class="stwlite-tw-bg-blue-100 stwlite-tw-rounded-full stwlite-tw-p-3">
            <Package 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 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('share_rate', __('Share Rate', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ behaviorMetrics.share_rate }}%</p>
          </div>
          <div class="stwlite-tw-bg-green-100 stwlite-tw-rounded-full stwlite-tw-p-3">
            <Share2 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('purchase_rate', __('Purchase Rate', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ behaviorMetrics.purchase_rate }}%</p>
          </div>
          <div class="stwlite-tw-bg-orange-100 stwlite-tw-rounded-full stwlite-tw-p-3">
            <ShoppingCart class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-text-orange-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_customer_value', __('Avg. Customer Value', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ formatCurrency(behaviorMetrics.avg_customer_value) }}</p>
          </div>
          <div class="stwlite-tw-bg-pink-100 stwlite-tw-rounded-full stwlite-tw-p-3">
            <CircleDollarSign class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-text-pink-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-cyan-600 focus:stwlite-tw-outline-none stwlite-tw-cursor-pointer',
              selected
                ? 'stwlite-tw-bg-cyan-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>
        <!-- Top Wishlisters 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-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">
                  <Crown 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('top_wishlisters_title', __('Top Wishlisters - VIP Candidates', 'saveto-wishlist-lite-for-woocommerce')) }}
                  </h3>
                </div>
                <span class="stwlite-tw-text-sm stwlite-tw-text-gray-600">
                  {{ getI18n('high_value_customers', __('High-value customers for loyalty programs', '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_customer', __('Customer', '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_wishlists', __('Wishlists', '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_total_items', __('Total Items', '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_purchased', __('Purchased', '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_shared', __('Shared', '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_total_spent', __('Total Spent', '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_vip_status', __('VIP Status', '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="(customer, index) in topWishlisters"
                    :key="customer.id"
                    class="hover:stwlite-tw-bg-purple-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="customer.avatar"
                          :alt="customer.name"
                          class="stwlite-tw-w-10 stwlite-tw-h-10 stwlite-tw-rounded-full stwlite-tw-border-2 stwlite-tw-border-gray-200"
                        />
                        <div class="stwlite-tw-ml-3">
                          <div class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ customer.name }}</div>
                          <div class="stwlite-tw-text-xs stwlite-tw-text-gray-500">{{ customer.email }}</div>
                        </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">
                        <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">{{ customer.wishlist_count }}</span>
                      </div>
                    </td>
                    <td class="stwlite-tw-px-6 stwlite-tw-py-4 stwlite-tw-whitespace-nowrap">
                      <span class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ customer.total_items }}</span>
                    </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-semibold stwlite-tw-text-green-600">{{ customer.purchased_items }}</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">
                        <Share2 class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-text-blue-500 stwlite-tw-mr-2" />
                        <span class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ customer.shared_count }}</span>
                      </div>
                    </td>
                    <td class="stwlite-tw-px-6 stwlite-tw-py-4 stwlite-tw-whitespace-nowrap">
                      <span class="stwlite-tw-text-sm stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ formatCurrency(customer.total_spent) }}</span>
                    </td>
                    <td class="stwlite-tw-px-6 stwlite-tw-py-4 stwlite-tw-whitespace-nowrap">
                      <span
                        :class="[
                          'stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-2.5 stwlite-tw-py-1 stwlite-tw-rounded-full stwlite-tw-text-xs stwlite-tw-font-bold',
                          getVIPBadgeClass(customer.vip_status)
                        ]"
                      >
                        <component :is="getVIPIcon(customer.vip_status)" class="stwlite-tw-w-3 stwlite-tw-h-3 stwlite-tw-mr-1" />
                        {{ customer.vip_status.toUpperCase() }}
                      </span>
                    </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-purple-600 hover:stwlite-tw-text-purple-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>

            <!-- VIP Program Suggestions -->
            <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-t stwlite-tw-border-purple-100">
              <h4 class="stwlite-tw-text-sm stwlite-tw-font-semibold stwlite-tw-text-purple-900 stwlite-tw-mb-3 stwlite-tw-flex stwlite-tw-items-center">
                <Sparkles class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-2" />
                {{ getI18n('vip_program_opportunities', __('VIP Program Opportunities', 'saveto-wishlist-lite-for-woocommerce')) }}
              </h4>
              <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 md:stwlite-tw-grid-cols-3 stwlite-tw-gap-4">
                <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-p-4 stwlite-tw-border stwlite-tw-border-purple-200">
                  <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between stwlite-tw-mb-2">
                    <Crown class="stwlite-tw-w-6 stwlite-tw-h-6 stwlite-tw-text-purple-600" />
                    <span class="stwlite-tw-text-2xl stwlite-tw-font-bold stwlite-tw-text-purple-600">{{ vipCustomers.length }}</span>
                  </div>
                  <p class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ getI18n('vip_candidates', __('VIP Candidates', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                  <p class="stwlite-tw-text-xs stwlite-tw-text-gray-600 stwlite-tw-mt-1">{{ getI18n('vip_candidates_desc', __('Platinum & Gold tier customers', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                </div>
                
                <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-p-4 stwlite-tw-border stwlite-tw-border-green-200">
                  <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between stwlite-tw-mb-2">
                    <CircleDollarSign class="stwlite-tw-w-6 stwlite-tw-h-6 stwlite-tw-text-green-600" />
                    <span class="stwlite-tw-text-2xl stwlite-tw-font-bold stwlite-tw-text-green-600">{{ formatCurrency(totalRevenue) }}</span>
                  </div>
                  <p class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ getI18n('total_revenue', __('Total Revenue', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                  <p class="stwlite-tw-text-xs stwlite-tw-text-gray-600 stwlite-tw-mt-1">{{ getI18n('from_top_wishlisters', __('From top wishlisters', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                </div>
                
                <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-p-4 stwlite-tw-border stwlite-tw-border-blue-200">
                  <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between stwlite-tw-mb-2">
                    <Share2 class="stwlite-tw-w-6 stwlite-tw-h-6 stwlite-tw-text-blue-600" />
                    <span class="stwlite-tw-text-2xl stwlite-tw-font-bold stwlite-tw-text-blue-600">{{ topWishlisters.reduce((sum, c) => sum + c.shared_count, 0) }}</span>
                  </div>
                  <p class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ getI18n('total_shares', __('Total Shares', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                  <p class="stwlite-tw-text-xs stwlite-tw-text-gray-600 stwlite-tw-mt-1">{{ getI18n('referral_potential', __('Referral program potential', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                </div>
              </div>
            </div>
          </div>
        </TabPanel>

        <!-- Customer Segments 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-blue-50 stwlite-tw-to-indigo-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">
                  <Users class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-tw-text-blue-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('customer_segments_title', __('Customer Segments', 'saveto-wishlist-lite-for-woocommerce')) }}
                  </h3>
                </div>
                <span class="stwlite-tw-text-sm stwlite-tw-text-gray-600">
                  {{ getI18n('segmentation_analysis', __('Behavioral segmentation analysis', 'saveto-wishlist-lite-for-woocommerce')) }}
                </span>
              </div>
            </div>

            <div class="stwlite-tw-p-6">
              <!-- Segment Cards -->
              <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 md:stwlite-tw-grid-cols-2 stwlite-tw-gap-6 stwlite-tw-mb-6">
                <div
                  v-for="(segment, index) in customerSegments"
                  :key="index"
                  class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-border-2 stwlite-tw-p-6 hover:stwlite-tw-shadow-lg stwlite-tw-transition-all stwlite-tw-duration-300"
                  :class="{
                    'stwlite-tw-border-purple-200 hover:stwlite-tw-border-purple-300': segment.color === 'purple',
                    'stwlite-tw-border-green-200 hover:stwlite-tw-border-green-300': segment.color === 'green',
                    'stwlite-tw-border-yellow-200 hover:stwlite-tw-border-yellow-300': segment.color === 'yellow',
                    'stwlite-tw-border-gray-200 hover:stwlite-tw-border-gray-300': segment.color === 'gray'
                  }"
                >
                  <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-justify-between stwlite-tw-mb-4">
                    <div
                      class="stwlite-tw-rounded-full stwlite-tw-p-3"
                      :class="{
                        'stwlite-tw-bg-purple-100': segment.color === 'purple',
                        'stwlite-tw-bg-green-100': segment.color === 'green',
                        'stwlite-tw-bg-yellow-100': segment.color === 'yellow',
                        'stwlite-tw-bg-gray-100': segment.color === 'gray'
                      }"
                    >
                      <component
                        :is="getSegmentIcon(segment.color)"
                        class="stwlite-tw-w-8 stwlite-tw-h-8"
                        :class="{
                          'stwlite-tw-text-purple-600': segment.color === 'purple',
                          'stwlite-tw-text-green-600': segment.color === 'green',
                          'stwlite-tw-text-yellow-600': segment.color === 'yellow',
                          'stwlite-tw-text-gray-600': segment.color === 'gray'
                        }"
                      />
                    </div>
                    <div class="stwlite-tw-text-right">
                      <p class="stwlite-tw-text-3xl stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ segment.percentage }}%</p>
                      <p class="stwlite-tw-text-xs stwlite-tw-text-gray-500">{{ getI18n('of_customers', __('of customers', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                    </div>
                  </div>
                  
                  <h4 class="stwlite-tw-text-lg stwlite-tw-font-bold stwlite-tw-text-gray-900 stwlite-tw-mb-2">{{ segment.name }}</h4>
                  
                  <div class="stwlite-tw-space-y-2">
                    <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between stwlite-tw-text-sm">
                      <span class="stwlite-tw-text-gray-600">{{ getI18n('customers', __('Customers', 'saveto-wishlist-lite-for-woocommerce')) }}</span>
                      <span class="stwlite-tw-font-semibold stwlite-tw-text-gray-900">{{ formatNumber(segment.count) }}</span>
                    </div>
                    <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between stwlite-tw-text-sm">
                      <span class="stwlite-tw-text-gray-600">{{ getI18n('avg_value', __('Avg. Value', 'saveto-wishlist-lite-for-woocommerce')) }}</span>
                      <span class="stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ formatCurrency(segment.avg_value) }}</span>
                    </div>
                  </div>
                  
                  <!-- Progress Bar -->
                  <div class="stwlite-tw-mt-4 stwlite-tw-w-full stwlite-tw-bg-gray-200 stwlite-tw-rounded-full stwlite-tw-h-2 stwlite-tw-overflow-hidden">
                    <div
                      class="stwlite-tw-h-2 stwlite-tw-rounded-full stwlite-tw-transition-all stwlite-tw-duration-500"
                      :class="{
                        'stwlite-tw-bg-gradient-to-r stwlite-tw-from-purple-400 stwlite-tw-to-purple-600': segment.color === 'purple',
                        'stwlite-tw-bg-gradient-to-r stwlite-tw-from-green-400 stwlite-tw-to-green-600': segment.color === 'green',
                        'stwlite-tw-bg-gradient-to-r stwlite-tw-from-yellow-400 stwlite-tw-to-yellow-600': segment.color === 'yellow',
                        'stwlite-tw-bg-gradient-to-r stwlite-tw-from-gray-400 stwlite-tw-to-gray-600': segment.color === 'gray'
                      }"
                      :style="{ width: `${segment.percentage}%` }"
                    ></div>
                  </div>
                </div>
              </div>

              <!-- Segment Strategies -->
              <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">
                <h4 class="stwlite-tw-text-sm stwlite-tw-font-semibold stwlite-tw-text-blue-900 stwlite-tw-mb-4 stwlite-tw-flex stwlite-tw-items-center">
                  <Target class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-2" />
                  {{ getI18n('segment_strategies', __('Recommended Strategies by Segment', 'saveto-wishlist-lite-for-woocommerce')) }}
                </h4>
                <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 md:stwlite-tw-grid-cols-2 stwlite-tw-gap-4">
                  <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-p-4 stwlite-tw-border stwlite-tw-border-purple-200">
                    <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-3">
                      <Crown 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-bold stwlite-tw-text-purple-900">{{ getI18n('vip_customers', __('VIP Customers', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                        <p class="stwlite-tw-text-xs stwlite-tw-text-gray-600 stwlite-tw-mt-1">{{ getI18n('vip_strategy', __('Exclusive previews, early access, personalized service, loyalty rewards', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                      </div>
                    </div>
                  </div>
                  
                  <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-p-4 stwlite-tw-border stwlite-tw-border-green-200">
                    <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-3">
                      <ShoppingCart 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-bold stwlite-tw-text-green-900">{{ getI18n('active_buyers', __('Active Buyers', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                        <p class="stwlite-tw-text-xs stwlite-tw-text-gray-600 stwlite-tw-mt-1">{{ getI18n('active_strategy', __('Regular engagement, product recommendations, bundle offers', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                      </div>
                    </div>
                  </div>
                  
                  <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-p-4 stwlite-tw-border stwlite-tw-border-yellow-200">
                    <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-3">
                      <Heart class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-tw-text-yellow-600 stwlite-tw-mt-0.5" />
                      <div>
                        <p class="stwlite-tw-text-sm stwlite-tw-font-bold stwlite-tw-text-yellow-900">{{ getI18n('window_shoppers', __('Window Shoppers', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                        <p class="stwlite-tw-text-xs stwlite-tw-text-gray-600 stwlite-tw-mt-1">{{ getI18n('window_strategy', __('Conversion campaigns, time-limited offers, social proof, reviews', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                      </div>
                    </div>
                  </div>
                  
                  <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-p-4 stwlite-tw-border stwlite-tw-border-gray-200">
                    <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-3">
                      <Mail class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-tw-text-gray-600 stwlite-tw-mt-0.5" />
                      <div>
                        <p class="stwlite-tw-text-sm stwlite-tw-font-bold stwlite-tw-text-gray-900">{{ getI18n('inactive_users', __('Inactive Users', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                        <p class="stwlite-tw-text-xs stwlite-tw-text-gray-600 stwlite-tw-mt-1">{{ getI18n('inactive_strategy', __('Re-engagement campaigns, win-back offers, survey feedback', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </TabPanel>
      </TabPanels>
    </TabGroup>

    <!-- Action Items -->
    <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">
        <Zap class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-tw-mr-2 stwlite-tw-text-indigo-600" />
        {{ getI18n('immediate_actions', __('Immediate Actions', '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-4">
        <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-3 stwlite-tw-p-4 stwlite-tw-bg-purple-50 stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-purple-100">
          <Gift 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('launch_vip_program', __('Launch VIP Program', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-xs stwlite-tw-text-gray-600 stwlite-tw-mt-1">{{ getI18n('vip_program_desc', __('Create exclusive benefits for top wishlisters', '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-4 stwlite-tw-bg-green-50 stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-green-100">
          <Share2 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('referral_program', __('Enable Referral Program', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-xs stwlite-tw-text-gray-600 stwlite-tw-mt-1">{{ getI18n('referral_desc', __('Leverage sharing behavior for growth', '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-4 stwlite-tw-bg-blue-50 stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-blue-100">
          <TrendingUp 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('personalize_experience', __('Personalize Experience', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
            <p class="stwlite-tw-text-xs stwlite-tw-text-gray-600 stwlite-tw-mt-1">{{ getI18n('personalize_desc', __('Tailor communications by segment', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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