<script setup lang="ts">
import { __ } from '@wordpress/i18n'
import { X, Crown, TrendingUp, Sparkles } from 'lucide-vue-next'
import { Dialog, DialogPanel, DialogTitle, TransitionRoot, TransitionChild } from '@headlessui/vue'
import { getI18n } from '@/helper'
import { getSavetoWishlistObj, savetoWishlistSiteURL } from '@/config'

const props = defineProps({
  isOpen: {
    type: Boolean,
    required: true
  }
})

const emit = defineEmits(['close'])

/**
 * Generates a UTM-tracked URL for external links to SaveTo Wishlist website
 */
const getUtmUrl = (urlPath: string, utmSource: string = 'stwlite', utmMedium: string = 'action', utmCampaign: string = 'default') => {
  const siteUrl = savetoWishlistSiteURL
  const baseUrl = siteUrl.endsWith('/') ? siteUrl : siteUrl + '/'
  const fullUrl = baseUrl + urlPath
  const utmContent = getSavetoWishlistObj?.stwInstalledBy || false

  const params = new URLSearchParams({
    utm_source: utmSource,
    utm_medium: utmMedium,
    utm_campaign: utmCampaign,
  })

  if (utmContent) {
    params.append('utm_content', utmContent)
  }

  return `${fullUrl}?${params.toString()}`
}

const upgradeUrl = getUtmUrl('pricing', 'stwlite', 'upgrade_modal', 'upgrade')

const closeModal = () => {
  emit('close')
}
</script>

<template>
  <TransitionRoot appear :show="isOpen" as="template">
    <Dialog as="div" class="stwlite-tw-z-[9999]" @close="closeModal">
      <!-- Backdrop -->
      <TransitionChild
        as="template"
        enter="stwlite-tw-ease-out stwlite-tw-duration-300"
        enter-from="stwlite-tw-opacity-0"
        enter-to="stwlite-tw-opacity-100"
        leave="stwlite-tw-ease-in stwlite-tw-duration-200"
        leave-from="stwlite-tw-opacity-100"
        leave-to="stwlite-tw-opacity-0"
      >
        <div class="stwlite-tw-fixed stwlite-tw-inset-0 stwlite-tw-bg-black stwlite-tw-bg-opacity-40" />
      </TransitionChild>

      <!-- Dialog Panel -->
      <div class="stwlite-tw-fixed stwlite-tw-inset-0 stwlite-tw-overflow-y-auto">
        <div class="stwlite-tw-flex stwlite-tw-min-h-full stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-p-4 stwlite-tw-text-center">
          <TransitionChild
            as="template"
            enter="stwlite-tw-ease-out stwlite-tw-duration-300"
            enter-from="stwlite-tw-opacity-0 stwlite-tw-scale-95"
            enter-to="stwlite-tw-opacity-100 stwlite-tw-scale-100"
            leave="stwlite-tw-ease-in stwlite-tw-duration-200"
            leave-from="stwlite-tw-opacity-100 stwlite-tw-scale-100"
            leave-to="stwlite-tw-opacity-0 stwlite-tw-scale-95"
          >
            <DialogPanel class="stwlite-tw-w-full stwlite-tw-max-w-lg stwlite-tw-transform stwlite-tw-overflow-hidden stwlite-tw-rounded-xl stwlite-tw-bg-white stwlite-tw-p-8 stwlite-tw-text-left stwlite-tw-align-middle stwlite-tw-shadow-xl stwlite-tw-transition-all">
              <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-justify-between stwlite-tw-mb-6">
                <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-space-x-3">
                  <div class="stwlite-tw-w-12 stwlite-tw-h-12 stwlite-brand-gradient-button stwlite-tw-rounded-lg stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-center">
                    <Crown class="stwlite-tw-w-6 stwlite-tw-h-6 stwlite-tw-text-white" />
                  </div>
                  <DialogTitle as="h2" class="stwlite-tw-text-2xl stwlite-tw-font-bold stwlite-brand-text-dark stwlite-tw-m-0 stwlite-tw-p-0">
                    {{ getI18n('upgrade_to_pro', __('Upgrade to Pro', 'saveto-wishlist-lite-for-woocommerce')) }}
                  </DialogTitle>
                </div>
                <button
                  @click="closeModal"
                  aria-label="{{ getI18n('close', __('Close', 'saveto-wishlist-lite-for-woocommerce')) }}"
                  type="button"
                  class="stwlite-tw-text-gray-400 hover:stwlite-tw-text-gray-600 stwlite-tw-transition-colors stwlite-tw-bg-transparent stwlite-tw-border-0 stwlite-tw-cursor-pointer"
                >
                  <X class="stwlite-tw-w-6 stwlite-tw-h-6" />
                </button>
              </div>

              <div class="stwlite-tw-space-y-4 stwlite-tw-mb-6">
                <p class="stwlite-brand-text-gray stwlite-tw-text-lg">
                  {{ getI18n('upgrade_modal_description', __('Unlock powerful features like advanced analytics, automations, and more to take your wishlist management to the next level.', 'saveto-wishlist-lite-for-woocommerce')) }}
                </p>

                <div class="stwlite-brand-bg-pink-light stwlite-tw-rounded-lg stwlite-tw-p-4 stwlite-tw-border stwlite-brand-border-pink">
                  <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-space-x-2 stwlite-tw-mb-2">
                    <Sparkles class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-brand-text-pink" />
                    <h3 class="stwlite-tw-font-semibold stwlite-brand-text-dark stwlite-tw-m-0">
                      {{ getI18n('pro_features_include', __('Pro Features Include:', 'saveto-wishlist-lite-for-woocommerce')) }}
                    </h3>
                  </div>
                  <ul class="stwlite-tw-space-y-2 stwlite-brand-text-gray">
                    <li class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-space-x-2">
                      <span class="stwlite-brand-text-pink">✓</span>
                      <span>{{ getI18n('advanced_analytics', __('Advanced Analytics & Insights', 'saveto-wishlist-lite-for-woocommerce')) }}</span>
                    </li>
                    <li class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-space-x-2">
                      <span class="stwlite-brand-text-pink">✓</span>
                      <span>{{ getI18n('wishlist_automations', __('Wishlist Automations', 'saveto-wishlist-lite-for-woocommerce')) }}</span>
                    </li>
                    <li class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-space-x-2">
                      <span class="stwlite-brand-text-pink">✓</span>
                      <span>{{ getI18n('priority_support', __('Priority Support', 'saveto-wishlist-lite-for-woocommerce')) }}</span>
                    </li>
                    <li class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-space-x-2">
                      <span class="stwlite-brand-text-pink">✓</span>
                      <span>{{ getI18n('and_more', __('And much more!', 'saveto-wishlist-lite-for-woocommerce')) }}</span>
                    </li>
                  </ul>
                </div>
              </div>

              <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-end stwlite-tw-space-x-4">
                <button
                  @click="closeModal"
                  aria-label="{{ getI18n('maybe_later', __('Maybe Later', 'saveto-wishlist-lite-for-woocommerce')) }}"
                  type="button"
                  class="stwlite-tw-px-4 stwlite-tw-py-2 stwlite-brand-text-gray stwlite-tw-bg-gray-100 stwlite-tw-rounded-lg hover:stwlite-tw-bg-gray-200 stwlite-tw-transition-colors stwlite-tw-font-medium stwlite-tw-border-0 stwlite-tw-cursor-pointer"
                >
                  {{ getI18n('maybe_later', __('Maybe Later', 'saveto-wishlist-lite-for-woocommerce')) }}
                </button>
                <a
                  :href="upgradeUrl"
                  target="_blank"
                  aria-label="{{ getI18n('upgrade_now', __('Upgrade Now', 'saveto-wishlist-lite-for-woocommerce')) }}"
                  class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-6 stwlite-tw-py-3 stwlite-brand-gradient-button stwlite-tw-text-white stwlite-tw-rounded-lg hover:stwlite-brand-gradient-button-hover stwlite-tw-transition-all stwlite-tw-font-semibold stwlite-tw-shadow-lg hover:stwlite-tw-shadow-xl stwlite-tw-no-underline"
                >
                  <Crown class="stwlite-tw-w-5 stwlite-tw-h-5 stwlite-tw-mr-2" />
                  {{ getI18n('upgrade_now', __('Upgrade Now', 'saveto-wishlist-lite-for-woocommerce')) }}
                  <TrendingUp class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-ml-2" />
                </a>
              </div>
            </DialogPanel>
          </TransitionChild>
        </div>
      </div>
    </Dialog>
  </TransitionRoot>
</template>

<style scoped lang="scss">
/* Brand color classes */
.stwlite-brand-gradient-button {
  background: linear-gradient(to right, #FF4D6D, #2C3E50);
}

.stwlite-brand-gradient-button-hover {
  background: linear-gradient(to right, #E63950, #1A252F);
}

.stwlite-brand-text-pink {
  color: #FF4D6D !important;
}

.stwlite-brand-text-dark {
  color: #333333 !important;
}

.stwlite-brand-text-gray {
  color: #666666 !important;
}

.stwlite-brand-bg-pink-light {
  background-color: rgba(255, 77, 109, 0.1) !important;
}

.stwlite-brand-border-pink {
  border-color: #FF4D6D !important;
}
</style>
