<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { __ } from '@wordpress/i18n'
import {
  getI18n,
} from '@/helper'
import { getSavetoWishlistObj } from '@/config'
import { Key, AlertCircle, X } from 'lucide-vue-next'

const isProInstalled = computed(() => getSavetoWishlistObj?.isProInstalled ?? false)
const stwproStatus = computed(() => getSavetoWishlistObj?.stwproStatus ?? { success: false, check_type: '', license_page_url: '' })
const licenseIsActive = computed(() => stwproStatus.value.success)
const licenseStatusType = computed(() => stwproStatus.value.check_type || 'license_data')
const licensePageUrl = computed(() => stwproStatus.value.license_page_url)

const isDismissed = ref(false)

// Check if notice was already dismissed
onMounted(() => {
  // Check localStorage first
  const dismissedNotices = JSON.parse(localStorage.getItem('stwpro_dismissed_license_notices') || '{}')
  const noticeKey = `license_${licenseStatusType.value}`
  isDismissed.value = dismissedNotices[noticeKey] === true
})

// Don't show notice if license is active or if it's dismissed
const shouldShowNotice = computed(() => {
  return !licenseIsActive.value
})

const getNoticeConfig = computed(() => {
  const notActive = {
    icon: AlertCircle,
    bgColor: 'stwlite-brand-bg-pink-light',
    borderColor: 'stwlite-brand-border-pink',
    iconColor: 'stwlite-brand-text-pink',
    titleColor: 'stwlite-brand-text-dark',
    textColor: 'stwlite-brand-text-gray',
    buttonColor: 'stwlite-brand-bg-pink hover:stwlite-brand-bg-pink-dark',
    title: getI18n('license_not_active_title', __('License Not Active', 'saveto-wishlist-lite-for-woocommerce')),
    message: getI18n('license_not_active_message', __('Your license is not currently active. Please validate your license key to access all premium features.', 'saveto-wishlist-lite-for-woocommerce')),
    buttonText: getI18n('activate_license', __('Activate License', 'saveto-wishlist-lite-for-woocommerce')),
  }

  const configs = {
    license_data: {
      icon: Key,
      bgColor: 'stwlite-brand-bg-pro-gold-light',
      borderColor: 'stwlite-brand-border-pro-gold',
      iconColor: 'stwlite-brand-text-pro-gold-dark',
      titleColor: 'stwlite-brand-text-dark',
      textColor: 'stwlite-brand-text-gray',
      buttonColor: 'stwlite-brand-bg-pro-gold hover:stwlite-brand-bg-pro-gold-dark',
      title: getI18n('license_not_provided_title', __('License Not Provided', 'saveto-wishlist-lite-for-woocommerce')),
      message: getI18n('license_not_provided_message', __('Please enter and activate your SaveTo Wishlist Pro license key to access all premium features and receive updates.', 'saveto-wishlist-lite-for-woocommerce')),
      buttonText: getI18n('activate_license', __('Activate License', 'saveto-wishlist-lite-for-woocommerce')),
    },
    license_activated: notActive,
    license_status: notActive,
    license_expiration: {
      icon: AlertCircle,
      bgColor: 'stwlite-brand-bg-pink-light',
      borderColor: 'stwlite-brand-border-pink',
      iconColor: 'stwlite-brand-text-pink',
      titleColor: 'stwlite-brand-text-dark',
      textColor: 'stwlite-brand-text-gray',
      buttonColor: 'stwlite-brand-bg-pink hover:stwlite-brand-bg-pink-dark',
      title: getI18n('license_expired_title', __('License Expired', 'saveto-wishlist-lite-for-woocommerce')),
      message: getI18n('license_expired_message', __('Your license has expired. Please renew your license to continue receiving updates and support.', 'saveto-wishlist-lite-for-woocommerce')),
      buttonText: getI18n('renew_license', __('Renew License', 'saveto-wishlist-lite-for-woocommerce')),
    },
  }

  return configs[licenseStatusType.value as keyof typeof configs] || configs.license_data
})

const IconComponent = computed(() => getNoticeConfig.value.icon)
</script>

<template>
  <!-- License Notice -->
  <div v-if="shouldShowNotice && isProInstalled" class="stwpro-license-notice-wrapper">
    <div :class="['stwlite-tw-border-l-4 stwlite-tw-p-6 stwlite-tw-rounded-lg stwlite-tw-shadow-sm stwlite-tw-relative', getNoticeConfig.bgColor, getNoticeConfig.borderColor]">
      <div class="stwlite-tw-flex stwlite-tw-items-start">
        <component :is="IconComponent" :class="['stwlite-tw-w-6 stwlite-tw-h-6 stwlite-tw-mr-3 stwlite-tw-mt-0.5 stwlite-tw-flex-shrink-0', getNoticeConfig.iconColor]" />
        <div class="stwlite-tw-flex-1">
          <h3 :class="['stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-mb-2 stwlite-tw-mt-0', getNoticeConfig.titleColor]">
            {{ getNoticeConfig.title }}
          </h3>
          <p :class="['stwlite-tw-mb-4', getNoticeConfig.textColor]">
            {{ getNoticeConfig.message }}
          </p>
          <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-gap-3">
            <a
              :href="licensePageUrl"
              :class="['stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-text-white stwlite-tw-font-medium stwlite-tw-rounded-lg stwlite-tw-transition-colors stwlite-tw-no-underline hover:stwlite-tw-text-white', getNoticeConfig.buttonColor]"
            >
              {{ getNoticeConfig.buttonText }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.stwpro-license-notice-wrapper {
  max-width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
  
  @media (min-width: 640px) {
    padding: 1rem 1.5rem;
  }
  
  @media (min-width: 1024px) {
    padding: 1rem 2rem;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Brand color classes */
.stwlite-brand-bg-pro-gold-light {
  background-color: rgba(255, 193, 7, 0.1) !important;
}

.stwlite-brand-bg-pro-gold {
  background-color: #FFC107 !important;
}

.stwlite-brand-bg-pro-gold-dark {
  background-color: #FFB300 !important;
}

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

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

.stwlite-brand-bg-pink-dark {
  background-color: #E63950 !important;
}

.stwlite-brand-border-pro-gold {
  border-color: #FFC107 !important;
}

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

.stwlite-brand-text-pro-gold-dark {
  color: #FFB300 !important;
}

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

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

.stwlite-brand-text-gray {
  color: #666666 !important;
}
</style>
