<script setup lang="ts">
import { ref, markRaw, Raw, onMounted } from 'vue'
import { __ } from '@wordpress/i18n'
import {
  ChartLine,
  Folder,
  ShoppingCart,
  Calendar,
  Users,
} from 'lucide-vue-next'
import {
  getI18n,
  getPagesAsyncComponent,
  setParamValue,
  getParamValue,
} from '@/helper'
import { Header } from '@/apps/partials'
import UpgradeModal from './UpgradeModal.vue'

const layout: Raw<any> = ref(null)
const showUpgradeModal = ref(false)
const isInitialLoad = ref(true)
const infoData = {
  title: getI18n('analytics_title', __( 'Wishlist Analytics', 'saveto-wishlist-lite-for-woocommerce' )),
  description: getI18n('analytics_description', __('Comprehensive insights into your customer\'s wishlist activity.', 'saveto-wishlist-lite-for-woocommerce')),
}

const demoNoticeText = getI18n('analytics_demo_notice', __('This is a temporary demo view for the Analytics page and will be removed once PRO is installed.', 'saveto-wishlist-lite-for-woocommerce'))
const selectedOption = ref<string | null>(null)

const selectOptions = ref<Array<{ value: string, label: string, description: string, icon: any }>>([
  { value: 'product_insights', label: getI18n('product_insights', __('Product Insights', 'saveto-wishlist-lite-for-woocommerce')), description: getI18n('product_insights_description', __('Analyze product performance and trends', 'saveto-wishlist-lite-for-woocommerce')), 'icon': ChartLine },
  { value: 'category_brand_insights', label: getI18n('category_brand_insights', __('Category & Brand Insights', 'saveto-wishlist-lite-for-woocommerce')), description: getI18n('category_brand_insights_description', __('Discover top categories and brands', 'saveto-wishlist-lite-for-woocommerce')), 'icon': Folder },
  { value: 'engagement_insights', label: getI18n('engagement_insights', __('Engagement Insights', 'saveto-wishlist-lite-for-woocommerce')), description: getI18n('engagement_insights_description', __('Track customer engagement metrics', 'saveto-wishlist-lite-for-woocommerce')), 'icon': ShoppingCart },
  { value: 'timebased_trends', label: getI18n('timebased_trends', __('Time-based Trends', 'saveto-wishlist-lite-for-woocommerce')), description: getI18n('timebased_trends_description', __('View trends over time', 'saveto-wishlist-lite-for-woocommerce')), 'icon': Calendar },
  { value: 'customer_behavior', label: getI18n('customer_behavior', __('Customer Behavior', 'saveto-wishlist-lite-for-woocommerce')), description: getI18n('customer_behavior_description', __('Understand customer patterns', 'saveto-wishlist-lite-for-woocommerce')), 'icon': Users },
])

const handleSelectChange = (value: string) => {
  const currentValue = getParamValue('analytics')
  if (currentValue !== value) {
    setParamValue('analytics', value)
  }
  selectedOption.value = value

  // Show upgrade modal only if not initial load
  if (!isInitialLoad.value) {
    showUpgradeModal.value = true
  }

  // Load the component
  if (value === 'product_insights') {
    layout.value = markRaw(getPagesAsyncComponent('components/analytics/ProductInsights.vue'))
  } else if (value === 'category_brand_insights') {
    layout.value = markRaw(getPagesAsyncComponent('components/analytics/CategoryBrandInsights.vue'))
  } else if (value === 'engagement_insights') {
    layout.value = markRaw(getPagesAsyncComponent('components/analytics/EngagementInsights.vue'))
  } else if (value === 'timebased_trends') {
    layout.value = markRaw(getPagesAsyncComponent('components/analytics/TimebasedTrends.vue'))
  } else if (value === 'customer_behavior') {
    layout.value = markRaw(getPagesAsyncComponent('components/analytics/CustomerBehavior.vue'))
  }
  
  // Mark that initial load is complete
  if (isInitialLoad.value) {
    isInitialLoad.value = false
  }
}

const closeUpgradeModal = () => {
  showUpgradeModal.value = false
}

onMounted(() => {
  const currentValue = getParamValue('analytics')
  if (currentValue) {
    handleSelectChange(currentValue)
  } else {
    handleSelectChange('product_insights')
  }
})
</script>

<template>
  <Header
    :infoData="infoData"
    :showSelect="true"
    :selectedOption="selectedOption"
    :selectOptions="selectOptions"
    @select-change="handleSelectChange"
  />

  <!-- Demo Notice Banner -->
  <div class="stwlite-tw-max-w-7xl stwlite-tw-mx-auto">
    <div class="stwlite-tw-bg-amber-50 stwlite-tw-border-l-4 stwlite-tw-border-amber-400 stwlite-tw-p-4 stwlite-tw-mt-4 stwlite-tw-rounded-md">
      <div class="stwlite-tw-flex stwlite-tw-items-center">
        <div class="stwlite-tw-flex-shrink-0">
          <svg class="stwlite-tw-h-5 stwlite-tw-w-5 stwlite-tw-text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
          </svg>
        </div>
        <div class="stwlite-tw-ml-3">
          <p class="stwlite-tw-text-sm stwlite-tw-text-amber-800">
            {{ demoNoticeText }}
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Analytics Content -->
  <div class="stwlite-tw-max-w-7xl stwlite-tw-mx-auto stwlite-tw-px-4 sm:stwlite-tw-px-6 lg:stwlite-tw-px-8 stwlite-tw-py-8 stwlite-tw-space-y-12">
    <component :is="layout" @upgrade-click="showUpgradeModal = true" />
  </div>

  <!-- Upgrade Modal -->
  <UpgradeModal :isOpen="showUpgradeModal" @close="closeUpgradeModal" />
</template>

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