<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { __ } from '@wordpress/i18n'
import { Edit3, Trash2, Loader2, Plus } from 'lucide-vue-next'
import { getI18n } from '@/helper'
import { Header } from '@/apps/partials'
import UpgradeModal from './UpgradeModal.vue'

const infoData = {
  title: getI18n('automations_title', __( 'Wishlist Automations', 'saveto-wishlist-lite-for-woocommerce' )),
  description: getI18n('automations_description', __('Create and manage automated workflows for your wishlists', 'saveto-wishlist-lite-for-woocommerce')),
}

const demoNoticeText = getI18n('automations_demo_notice', __('This is a temporary demo view for the Automations page and will be removed once PRO is installed.', 'saveto-wishlist-lite-for-woocommerce'))

const showUpgradeModal = ref(false)
const isLoading = ref(false)

// Mock automations data for display
const automations = ref([
  {
    id: 1,
    trigger_type: 'product_added',
    action_type: 'send_email',
    status: 'active',
    description: 'Send email notification when a product is added to wishlist',
  },
  {
    id: 2,
    trigger_type: 'wishlist_shared',
    action_type: 'create_webhook',
    status: 'inactive',
    description: 'Trigger webhook when wishlist is shared',
  },
])

const automationTriggerTypes: Record<string, string> = {
  'product_added': getI18n('product_added', __('Product Added', 'saveto-wishlist-lite-for-woocommerce')),
  'wishlist_shared': getI18n('wishlist_shared', __('Wishlist Shared', 'saveto-wishlist-lite-for-woocommerce')),
  'item_removed': getI18n('item_removed', __('Item Removed', 'saveto-wishlist-lite-for-woocommerce')),
}

const automationActionTypes: Record<string, string> = {
  'send_email': getI18n('send_email', __('Send Email', 'saveto-wishlist-lite-for-woocommerce')),
  'create_webhook': getI18n('create_webhook', __('Create Webhook', 'saveto-wishlist-lite-for-woocommerce')),
  'update_usermeta': getI18n('update_usermeta', __('Update User Meta', 'saveto-wishlist-lite-for-woocommerce')),
}

const handleButtonClick = () => {
  showUpgradeModal.value = true
}

const handleEdit = () => {
  showUpgradeModal.value = true
}

const handleDelete = () => {
  showUpgradeModal.value = true
}

const handleToggle = () => {
  showUpgradeModal.value = true
}

const getTriggerLabel = (triggerType: string) => {
  return automationTriggerTypes[triggerType] || triggerType
}

const getActionLabel = (actionType: string) => {
  return automationActionTypes[actionType] || actionType
}

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

onMounted(() => {
  isLoading.value = false
})
</script>

<template>
  <div>
    <Header
      :infoData="infoData"
      :showButton="true"
      buttonIcon="plus"
      :buttonText="getI18n('add_new', __( 'Add New', 'saveto-wishlist-lite-for-woocommerce' ))"
      @trigger-button="handleButtonClick"
    />

    <!-- 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>

    <!-- Loading Spinner -->
    <div v-if="isLoading" class="stwlite-tw-flex stwlite-tw-justify-center stwlite-tw-items-center stwlite-tw-py-12">
      <Loader2 class="stwlite-tw-w-8 stwlite-tw-h-8 stwlite-tw-animate-spin stwlite-tw-text-blue-600" />
    </div>

    <!-- Main Automations Content -->
    <div v-else 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">
      <!-- Empty State -->
      <div v-if="automations.length === 0" class="stwlite-tw-text-center stwlite-tw-py-12">
        <p class="stwlite-tw-text-gray-500 stwlite-tw-text-lg stwlite-tw-mb-4">{{ getI18n('no_automations', __('No automations found. Create your first automation!', 'saveto-wishlist-lite-for-woocommerce')) }}</p>
        <button
          @click="handleButtonClick"
          class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-6 stwlite-tw-py-3 stwlite-tw-bg-blue-600 stwlite-tw-text-white stwlite-tw-font-medium stwlite-tw-rounded-lg hover:stwlite-tw-bg-blue-700 stwlite-tw-transition-colors stwlite-tw-cursor-pointer stwlite-tw-border-solid stwlite-tw-border-0"
        >
          {{ getI18n('create_first_automation', __('Create First Automation', 'saveto-wishlist-lite-for-woocommerce')) }}
        </button>
      </div>

      <!-- Automations Grid -->
      <div v-else 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 
          v-for="automation in automations" 
          :key="automation.id"
          class="stwlite-tw-bg-white stwlite-tw-rounded-xl stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-overflow-hidden hover:stwlite-tw-shadow-lg hover:stwlite-tw-border-gray-300 stwlite-tw-transition-all stwlite-tw-duration-200 stwlite-tw-flex stwlite-tw-flex-col stwlite-tw-border-solid"
        >
          <div class="stwlite-tw-p-6 stwlite-tw-flex-1">
            <div class="stwlite-tw-mb-4">
              <h3 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-leading-loose">
                <span class="stwlite-tw-bg-blue-50 stwlite-tw-text-gray-900 stwlite-tw-px-2 stwlite-tw-py-1 stwlite-tw-border-b-2 stwlite-tw-border-blue-600">
                  {{ getTriggerLabel(automation.trigger_type) }}
                </span>
                <span class="stwlite-tw-text-gray-900"> then </span>
                <span class="stwlite-tw-bg-green-50 stwlite-tw-text-gray-900 stwlite-tw-px-2 stwlite-tw-py-1 stwlite-tw-border-b-2 stwlite-tw-border-green-600">
                  {{ getActionLabel(automation.action_type) }}
                </span>
              </h3>
            </div>

            <p class="stwlite-tw-text-sm stwlite-tw-text-gray-600 stwlite-tw-leading-relaxed" v-if="automation.description">
              {{ automation.description }}
            </p>
          </div>

          <div class="stwlite-tw-px-6 stwlite-tw-py-3 stwlite-tw-bg-gray-50 stwlite-tw-border-t stwlite-tw-border-gray-100 stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between stwlite-tw-gap-3 stwlite-tw-mt-auto">
            <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-gap-2">
              <button
                @click="handleEdit"
                class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-gap-1 stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-bg-white stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-rounded-lg stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-700 hover:stwlite-tw-bg-gray-50 hover:stwlite-tw-border-gray-400 stwlite-tw-transition-all stwlite-tw-cursor-pointer stwlite-tw-border-solid"
                :title="getI18n('edit_automation', __('Edit Automation', 'saveto-wishlist-lite-for-woocommerce'))"
              >
                <Edit3 class="stwlite-tw-w-4 stwlite-tw-h-4" />
                {{ getI18n('edit_automation', __('Edit Automation', 'saveto-wishlist-lite-for-woocommerce')) }}
              </button>
              <button
                @click="handleDelete"
                class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-gap-1 stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-bg-white stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-rounded-lg stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-red-600 hover:stwlite-tw-bg-red-50 hover:stwlite-tw-border-red-400 stwlite-tw-transition-all stwlite-tw-cursor-pointer stwlite-tw-border-solid"
                :title="getI18n('delete_automation', __('Delete Automation', 'saveto-wishlist-lite-for-woocommerce'))"
              >
                <Trash2 class="stwlite-tw-w-4 stwlite-tw-h-4" />
              </button>
            </div>

            <!-- Toggle Switch -->
            <div class="stwlite-tw-flex stwlite-tw-items-center">
              <button
                type="button"
                @click="handleToggle"
                :class="[
                  'stwlite-tw-relative stwlite-tw-inline-flex stwlite-tw-h-7 stwlite-tw-w-12 stwlite-tw-items-center stwlite-tw-rounded-full stwlite-tw-transition-colors focus:stwlite-tw-outline-none focus:stwlite-tw-ring-2 focus:stwlite-tw-ring-offset-2 stwlite-tw-border-0 stwlite-tw-cursor-pointer',
                  automation.status === 'active' ? 'stwlite-tw-bg-green-600 focus:stwlite-tw-ring-green-500' : 'stwlite-tw-bg-gray-300 focus:stwlite-tw-ring-gray-400'
                ]"
              >
                <span
                  :class="[
                    'stwlite-tw-inline-block stwlite-tw-h-5 stwlite-tw-w-5 stwlite-tw-transform stwlite-tw-rounded-full stwlite-tw-bg-white stwlite-tw-transition-transform stwlite-tw-shadow-lg',
                    automation.status === 'active' ? 'stwlite-tw-translate-x-4' : 'stwlite-tw-translate-x-0'
                  ]"
                />
              </button>
              <span class="stwlite-tw-sr-only">
                {{ automation.status === 'active' ? getI18n('active', __( 'Active', 'saveto-wishlist-lite-for-woocommerce' )) : getI18n('inactive', __( 'Inactive', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

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

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