<script setup lang="ts">
import { __ } from '@wordpress/i18n'
import { ref, toRefs, onMounted, watch, computed } from 'vue'
import { 
  Plus,
  Trash,
  ShoppingBag,
  ArrowLeft,
  Save,
  ChevronsUpDownIcon,
  Check,
  X,
  Share2,
  Mail,
  User,
  Lock,
} from 'lucide-vue-next'
import {
  TransitionRoot,
  TransitionChild,
  Dialog,
  DialogPanel,
  DialogTitle,
  Combobox,
  ComboboxInput,
  ComboboxOptions,
  ComboboxOption,
} from '@headlessui/vue'
import { getI18n, l10nObj, setParamValue, getParamValue } from '@/helper'
import { useUserSearch } from '@/composables/useUserSearch'
import { ICollectionPayload, IUsers } from '@/types'
import { useCollectionsStore, useProductsStore, useUsersStore } from '@/api'
import { getSavetoWishlistObj } from '@/config'

// Components.
import { Header } from '@/apps/partials'
import Notification from '@/helper/Notification.vue'
import Confirmation from '@/helper/Confirmation.vue'

const props = defineProps<{
  item: ICollectionPayload
  itemIndex: number | null
}>()

const emit = defineEmits<{
  (e: 'action', action: string): void
}>()

const { item, itemIndex } = toRefs(props)
const { saveCollection, deleteCollections } = useCollectionsStore()
const { getProducts, getCollectionProducts } = useProductsStore()
const { getUsers } = useUsersStore()
const form = ref<ICollectionPayload>({
  key: '',
  user_id: '',
  id: 0,
  name: '',
  description: '',
  status: '',
  is_default: false,
  is_public: false,
  url_code: '',
  items: [],
  emails: [],
  user_ids: [],
  allowed_roles: [],
  allowed_edit_emails: [],
})

const wishlistRootUrl = getSavetoWishlistObj.wishlistUrl

// Pro dependencies.
const proDependencies = ref<any>(getSavetoWishlistObj.proDependencies)
const activePro = ref<boolean>(proDependencies.value?.activePro || false)
const wpRoles = ref<Record<string, string>>(proDependencies.value?.wpRoles || {})

const itemData = ref<ICollectionPayload>(item.value)
const productItems = ref<any[]>([])
const fetchingProducts = ref(false)
const selectedProduct = ref<any[]>([])
const newAddedProduct = ref<any[]>([])
const productOptions = ref<any[]>([])
const productLists = ref<any[]>([])
const selectedUser = ref<any>(null)
const {
  query: searchUser,
  options: filteredUserOptions,
  fetching: fetchingUsers,
  search: filterUsers,
  reset: resetUserSearch,
} = useUserSearch()
const {
  query: shareUserSearch,
  options: shareUserOptions,
  fetching: fetchingShareUsers,
  search: searchShareUsers,
  reset: resetShareUserSearch,
} = useUserSearch({
  exclude: (u) => {
    const currentUserId = typeof form.value.user_id === 'string'
      ? parseInt(form.value.user_id)
      : (form.value.user_id as number)
    return u.value === currentUserId
  },
})
const savingWishlist = ref<boolean>(false)
const isModalOpen = ref(false)
const notificationMessageTitle = ref<string>('')
const notificationMessage = ref<string>('')
const notificationType = ref<string>('')
const searchProduct = ref<string>('')
const isConfirmationOpen = ref<boolean>(false)
const confirmationMessage = ref<string>('')
const confirmDeleteItem = ref<any>(null)
const confirmDeleteProductRecord = ref<{ record: any; index: number } | null>(null)
const confirmActionType = ref<string>('delete')
const isConfirming = ref<boolean>(false)
const wishlistUrl = ref<string>('')
const copied = ref<boolean>(false)
const isShareModalOpen = ref<boolean>(false)
const shareEmails = ref<string[]>([])
const shareEmailInput = ref<string>('')
const shareSelectedUsers = ref<any[]>([])
const sharingWishlist = ref<boolean>(false)
const isRestrictionsModalOpen = ref<boolean>(false)
const restrictionSelectedRoles = ref<any[]>([])
const restrictionRoleOptions = ref<any[]>([])
const restrictionEditEmails = ref<string[]>([])
const restrictionEditEmailInput = ref<string>('')

const statusOptions = [
  { label: getI18n('select_status', __( 'Select Status', 'saveto-wishlist-lite-for-woocommerce' )), value: '' },
  { label: getI18n('publish', __( 'Publish', 'saveto-wishlist-lite-for-woocommerce' )), value: 'publish' },
  { label: getI18n('draft', __( 'Draft', 'saveto-wishlist-lite-for-woocommerce' )), value: 'draft' },
]

const isDraftWishlist = computed(() => form.value.status === 'draft')

const columns = [
  { title: getI18n('column_name', __('Name', 'saveto-wishlist-lite-for-woocommerce')), dataIndex: 'name', key: 'name' },
  { title: getI18n('column_sku', __('SKU', 'saveto-wishlist-lite-for-woocommerce')), dataIndex: 'sku', key: 'sku' },
  { title: getI18n('column_price', __('Price', 'saveto-wishlist-lite-for-woocommerce')), dataIndex: 'price', key: 'price' },
  { title: getI18n('column_quantity', __('Quantity', 'saveto-wishlist-lite-for-woocommerce')), dataIndex: 'quantity', key: 'quantity' },
  { title: getI18n('column_actions', __('Actions', 'saveto-wishlist-lite-for-woocommerce')), dataIndex: 'actions', key: 'actions' },
]

const handleBack = () => {
  emit('action', 'close')
}

const handleSave = async () => {
  savingWishlist.value = true

  await saveCollection(form.value).then((response: any) => {
    if (response.status === 'success') {
      const data = response.data
      const isPublic = parseInt(data.is_public as unknown as string) === 1 ? true : false
      const isDefault = parseInt(data.is_default as unknown as string) === 1 ? true : false
      const formData = {
        id: data.id,
        user_id: parseInt(data.user_id),
        name: data.name || '',
        description: data.description || '',
        status: data.status || '',
        is_default: isDefault,
        is_public: isPublic,
        url_code: data.url_code || '',
        items: data.items || [],
        emails: [],
        user_ids: [],
        allowed_roles: [],
        allowed_edit_emails: [],
      }

      itemData.value = {
        ...itemData.value,
        ...formData,
      }

      form.value = {
        ...form.value,
        ...formData,
      }

      formatProductItems()
      formFormatItems()

      const add = getParamValue('add')
      if (data.id > 0 && add === 'new') {
        setParamValue('item', data.id)
        setParamValue('add', '')
      }

      savingWishlist.value = false

      wishlistUrl.value = wishlistRootUrl + itemData.value.url_code

      notificationMessage.value = getI18n('wishlist_saved', __( 'Wishlist saved successfully', 'saveto-wishlist-lite-for-woocommerce' ))
      notificationMessageTitle.value = getI18n('success', __( 'Success', 'saveto-wishlist-lite-for-woocommerce' ))
      notificationType.value = 'success'
    } else {
      savingWishlist.value = false

      notificationMessage.value = getI18n('wishlist_not_saved', __( 'Wishlist not saved', 'saveto-wishlist-lite-for-woocommerce' ))
      notificationMessageTitle.value = getI18n('error', __( 'Error', 'saveto-wishlist-lite-for-woocommerce' ))
      notificationType.value = 'error'
    }
  })
}

const handleDelete = () => {
  isConfirmationOpen.value = true
  confirmationMessage.value = getI18n('confirmDeleteText', __('Are you sure you want to delete this wishlist?', 'saveto-wishlist-lite-for-woocommerce'))
  confirmActionType.value = 'delete'
  confirmDeleteItem.value = itemData.value.id
}

const handleDeleteProduct = (record: any, index: number) => {
  isConfirmationOpen.value = true
  confirmationMessage.value = getI18n('confirmRemoveProductText', __('Are you sure you want to remove this product from the wishlist?', 'saveto-wishlist-lite-for-woocommerce'))
  confirmActionType.value = 'delete-product'
  confirmDeleteProductRecord.value = { record, index }
}

const executeDeleteProduct = (record: any, index: number) => {
  const productId = parseInt(record.product_id)
  selectedProduct.value = selectedProduct.value.filter((item: any) => parseInt(item.value) !== productId)
  productItems.value = productItems.value.filter((item: any, i: number) => i !== index)
  formFormatItems()
}

const fetchProducts = async (params: Record<string, any> = {}) => {
  fetchingProducts.value = true

  await getProducts(params).then((response: any) => {
    productLists.value = response as any[]

    // Table data
    productOptions.value = (response as any[]).filter((product: any) => !selectedProduct.value.some((item: any) => parseInt(item.value) === product.id)).map((product: any) => ({
      label: product.name,
      value: product.id,
      product: product,
    }))

    fetchingProducts.value = false

  }).catch(e => {
    if (e.error?.message) {
      notificationMessage.value = e.error?.message
      notificationMessageTitle.value = getI18n('error', __( 'Error', 'saveto-wishlist-lite-for-woocommerce' ))
      notificationType.value = 'error'
    }
  })
}

const handleShowAddProductModal = () => {
  if (isDraftWishlist.value) return
  isModalOpen.value = true
  newAddedProduct.value = []
}

const handleAddProduct = () => {
  let newSelectedProduct: any[] = []
  selectedProduct.value.forEach((productItem: any) => {
    const productData = productItem.product
    const exists = productItems.value.some((item: any) => parseInt(item.product_id) === productData.id)
    if (!exists) {
      newSelectedProduct.push({
        id: 0,
        product_id: productData.id,
        variation_id: productData.id,
        name: productData.name,
        sku: productData.sku,
        price: productData.price,
        quantity: 1,
        priority: 0,
        notes: '',
      })
    } else {
      const existsItem = productItems.value.find((item: any) => parseInt(item.product_id) === productData.id)
      newSelectedProduct.push({
        id: existsItem.id,
        product_id: productData.id,
        variation_id: productData.id,
        name: productData.name,
        sku: productData.sku,
        price: productData.price,
        quantity: existsItem.quantity,
        priority: existsItem.priority,
        notes: existsItem.notes,
      })
    }
  })

  productItems.value = newSelectedProduct

  formFormatItems()
  isModalOpen.value = false
}

const handleCancelAddProduct = () => {
  isModalOpen.value = false
  selectedProduct.value = selectedProduct.value.filter((product: any) => {
    const prodId = parseInt(product.value)
    return productItems.value.some((item: any) => parseInt(item.product_id) === prodId)
  })
}

const formatProductItems = () => {
  const formattedItems = itemData.value.items.map((item: any) => {
    const productId = parseInt(item.product_id)
    
    if (item.product) {
      return {
        ...item,
        price: item.product.price,
        name: item.product.name,
        sku: item.product.sku,
      }
    }
  })
  
  productItems.value = formattedItems
  selectedProduct.value = formattedItems.map((item: any) => ({
    label: item.name,
    value: item.product_id,
    product: item.product,
  }))
}

const formFormatItems = () => {
  form.value = {
    ...form.value,
    items: productItems.value || [],
  }
}

const handleChangeQuantity = (record: any, index: number) => {
  formFormatItems()
}

const handleUserSelectionChange = (user: any) => {
  selectedUser.value = user
  form.value.user_id = user ? user.value : ''
  if (user) {
    resetUserSearch()
  }
}

const removeOption = (value: string) => {
  newAddedProduct.value = newAddedProduct.value.filter((item: any) => item.value !== value)
  selectedProduct.value = selectedProduct.value.filter((item: any) => item.value !== value)
}

const closeNotification = () => {
  notificationMessage.value = ''
}

const closeConfirmation = () => {
  isConfirmationOpen.value = false
  confirmDeleteItem.value = null
  confirmDeleteProductRecord.value = null
  confirmActionType.value = ''
  isConfirming.value = false
}

const confirmAction = async () => {
  isConfirming.value = true
  if (confirmActionType.value === 'delete') {
    await deleteCollections([confirmDeleteItem.value]).then(() => {
      confirmDeleteItem.value = null
      isConfirmationOpen.value = false
      confirmActionType.value = ''
      isConfirming.value = false

      handleBack()
    })
  } else if (confirmActionType.value === 'delete-product') {
    if (confirmDeleteProductRecord.value) {
      executeDeleteProduct(confirmDeleteProductRecord.value.record, confirmDeleteProductRecord.value.index)
    }
    confirmDeleteProductRecord.value = null
    isConfirmationOpen.value = false
    confirmActionType.value = ''
    isConfirming.value = false
  }
}

const handleCopy = async (text: string) => {
  try {
    // Copy text to clipboard using JavaScript
    if (navigator.clipboard && window.isSecureContext) {
      await navigator.clipboard.writeText(text)
    } else {
      // fallback for older browsers
      const textarea = document.createElement('textarea')
      textarea.value = text
      textarea.style.position = 'fixed' // avoid scrolling to bottom
      textarea.style.opacity = '0'
      document.body.appendChild(textarea)
      textarea.focus()
      textarea.select()
      try {
        document.execCommand('copy')
      } finally {
        document.body.removeChild(textarea)
      }
    }

    copied.value = true
    setTimeout(() => {
      copied.value = false
    }, 2000)
  } catch (error) {
    console.error('Failed to copy text:', error)
  }
}

const onChangeSearchProduct = (event: any) => {
  searchProduct.value = event.target.value
}

const onProductSelectionChange = (selectedProducts: any[]) => {
  fetchingProducts.value = false
  productOptions.value = productLists.value.filter((product: any) => !selectedProduct.value.some((item: any) => parseInt(item.value) === product.id)).map((product: any) => ({
    label: product.name,
    value: product.id,
    product: product,
  }))
}

const handleShowShareModal = async () => {
  isShareModalOpen.value = true
  shareEmails.value = form.value.emails || []
  shareEmailInput.value = ''
  resetShareUserSearch()

  if (form.value.user_ids.length > 0) {
    const data = await getUsers({ include: form.value.user_ids, per_page: form.value.user_ids.length })
    shareSelectedUsers.value = (data as any[]).map((user: any) => ({
      label: user.name,
      value: user.id,
    }))
  } else {
    shareSelectedUsers.value = []
  }
}

const handleAddEmail = () => {
  const email = shareEmailInput.value.trim()
  if (email && email.includes('@') && !shareEmails.value.includes(email)) {
    shareEmails.value.push(email)
    shareEmailInput.value = ''
  }
}

const handleRemoveEmail = (email: string) => {
  shareEmails.value = shareEmails.value.filter((e: string) => e !== email)
}

const handleShareUserSelectionChange = (selectedUsers: any[]) => {
  shareSelectedUsers.value = selectedUsers
}

const handleShareWishlist = async () => {
  const userIds = shareSelectedUsers.value.map((user: any) => parseInt(user.value))

  form.value = {
    ...form.value,
    emails: shareEmails.value,
    user_ids: userIds,
  }

  isShareModalOpen.value = false
}

const handleCancelShare = () => {
  isShareModalOpen.value = false
  shareEmails.value = []
  shareEmailInput.value = ''
  shareSelectedUsers.value = []
  resetShareUserSearch()
}

const handleShowRestrictionsModal = () => {
  isRestrictionsModalOpen.value = true
  
  // Initialize role options from wpRoles
  restrictionRoleOptions.value = Object.entries(wpRoles.value).map(([key, value]) => ({
    label: value,
    value: key,
  }))
  
  // Initialize selected roles from form.value.allowed_roles
  restrictionSelectedRoles.value = (form.value.allowed_roles || []).map((role: string) => 
    restrictionRoleOptions.value.find((option: any) => option.value === role)
  ).filter((role: any) => role !== undefined)
  
  // Initialize edit emails from form.value.allowed_edit_emails
  restrictionEditEmails.value = form.value.allowed_edit_emails || []
  restrictionEditEmailInput.value = ''
}

const handleRestrictionRoleSelectionChange = (selectedRoles: any[]) => {
  restrictionSelectedRoles.value = selectedRoles
}

const handleAddRestrictionEditEmail = () => {
  const email = restrictionEditEmailInput.value.trim()
  if (email && email.includes('@') && !restrictionEditEmails.value.includes(email)) {
    restrictionEditEmails.value.push(email)
    restrictionEditEmailInput.value = ''
  }
}

const handleRemoveRestrictionEditEmail = (email: string) => {
  restrictionEditEmails.value = restrictionEditEmails.value.filter((e: string) => e !== email)
}

const handleSaveRestrictions = () => {
  const roleSlugs = restrictionSelectedRoles.value.map((role: any) => role.value)

  form.value = {
    ...form.value,
    allowed_roles: roleSlugs,
    allowed_edit_emails: restrictionEditEmails.value,
  }

  isRestrictionsModalOpen.value = false
}

const handleCancelRestrictions = () => {
  isRestrictionsModalOpen.value = false
  restrictionSelectedRoles.value = []
  restrictionEditEmails.value = []
  restrictionEditEmailInput.value = ''
}

watch([searchProduct, selectedProduct], async ([newQuery, newProducts]) => {
  // Handle searchProduct changes.
  if (searchProduct.value !== '' && newQuery.length > 2) {
    fetchProducts({ search: newQuery })
  } else {
    productOptions.value = []
  }

  // Handle selectedProduct changes.
  newAddedProduct.value = newProducts.filter((product: any) => !productItems.value.some((item: any) => parseInt(item.product_id) === parseInt(product.value)))
})

onMounted(() => {
  if (itemData.value.id === 0) {
    form.value = {
      ...form.value,
      user_id: '',
      id: 0,
      name: '',
      description: '',
      status: 'publish',
      emails: [],
      user_ids: [],
      allowed_roles: [],
      allowed_edit_emails: [],
    }
    selectedUser.value = null
    searchUser.value = ''
  } else {
    const isPublic = parseInt(itemData.value.is_public as unknown as string) === 1 ? true : false
    const isDefault = parseInt(itemData.value.is_default as unknown as string) === 1 ? true : false
    form.value = {
      ...form.value,
      id: itemData.value.id,
      user_id: parseInt(itemData.value.user_id as string) || '',
      is_public: isPublic,
      is_default: isDefault,
      status: itemData.value.status,
      name: itemData.value.name || '',
      description: itemData.value.description || '',
      url_code: itemData.value.url_code || '',
      items: itemData.value.items || [],
      emails: itemData.value.emails || [],
      user_ids: itemData.value.user_ids || [],
      allowed_roles: itemData.value.allowed_roles || [],
      allowed_edit_emails: itemData.value.allowed_edit_emails || [],
    }

    formatProductItems()
    wishlistUrl.value = wishlistRootUrl + itemData.value.url_code
  }

  if (form.value.user_id) {
    const userId = typeof form.value.user_id === 'string' ? parseInt(form.value.user_id) : form.value.user_id
    if (itemData.value.user_name) {
      selectedUser.value = { label: itemData.value.user_name, value: userId }
    } else {
      getUsers({ include: userId, per_page: 1 }).then((data: any) => {
        const user = (data as any[]).find((u: any) => u.id === userId)
        selectedUser.value = user ? { label: user.name, value: user.id } : null
      })
    }
  }
})
</script>

<template>
  <div class="wishlist-items">
    <div class="stwlite-tw-bg-gray-50">
      <Header
        :infoData="{
          title: form.name || getI18n('new_wishlist', __( 'New Wishlist', 'saveto-wishlist-lite-for-woocommerce' )),
        }"
        :showButton="true"
        :showBackButton="true"
        :showDeleteButton="form.id > 0"
        buttonIcon="save"
        :buttonText="form.id > 0 ? getI18n('update', __( 'Update', 'saveto-wishlist-lite-for-woocommerce' )) : getI18n('save', __( 'Save', 'saveto-wishlist-lite-for-woocommerce' ))"
        :isLoading="savingWishlist"
        @trigger-button="handleSave"
        @trigger-back="handleBack"
        @trigger-delete="handleDelete"
      />

      <div class="stwlite-tw-max-w-4xl stwlite-tw-mx-auto stwlite-tw-px-4 sm:stwlite-tw-px-6 lg:stwlite-tw-px-8 stwlite-tw-py-8">
        <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-shadow-sm stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-border-solid">
          <div class="stwlite-tw-px-6 stwlite-tw-py-6">
            <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 lg:stwlite-tw-grid-cols-3 stwlite-tw-gap-6 stwlite-tw-mb-6">
              <div class="lg:stwlite-tw-col-span-2">
                <label htmlFor="name" class="stwlite-tw-block stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-700 stwlite-tw-mb-2">
                  {{ getI18n('name', __( 'Name', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </label>
                <input
                  type="text"
                  id="name"
                  name="name"
                  v-model="form.name"
                  :placeholder="getI18n('name', __( 'Name', 'saveto-wishlist-lite-for-woocommerce' ))"
                  class="stwlite-tw-block stwlite-tw-w-full stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-border-solid stwlite-tw-rounded-md stwlite-tw-shadow-sm focus:stwlite-tw-outline-none focus:stwlite-tw-ring-blue-500 focus:stwlite-tw-border-blue-500"
                />
              </div>
              <div>
                <label class="stwlite-tw-block stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-700 stwlite-tw-mb-2">
                  {{ getI18n('publish', __( 'Publish', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </label>
                <div class="stwlite-tw-relative">
                  <select
                    id="status"
                    name="status"
                    v-model="form.status"
                    class="stwlite-tw-block stwlite-tw-w-full stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-rounded-md stwlite-tw-shadow-sm focus:stwlite-tw-outline-none focus:stwlite-tw-ring-blue-500 focus:stwlite-tw-border-blue-500 stwlite-tw-appearance-none stwlite-tw-bg-white"
                  >
                    <option v-for="status in statusOptions" :key="status.value" :value="status.value">{{ status.label }}</option>
                  </select>
                </div>
              </div>
            </div>

            <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 lg:stwlite-tw-grid-cols-3 stwlite-tw-gap-6 stwlite-tw-mb-6">
              <div class="lg:stwlite-tw-col-span-2">
                <label htmlFor="user" class="stwlite-tw-block stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-700 stwlite-tw-mb-2">
                  {{ getI18n('select_user', __( 'Select User', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </label>
                <div class="stwlite-tw-relative">
                  <Combobox v-model="selectedUser" @update:model-value="handleUserSelectionChange">
                    <div class="stwlite-tw-relative">
                      <div
                        class="stwlite-tw-relative stwlite-tw-w-full stwlite-tw-cursor-default stwlite-tw-overflow-hidden stwlite-tw-rounded-lg stwlite-tw-border-solid stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-bg-white stwlite-tw-text-left stwlite-tw-shadow-sm focus-within:stwlite-tw-ring-2 focus-within:stwlite-tw-ring-blue-500 sm:stwlite-tw-text-sm"
                      >
                        <ComboboxInput
                          class="stwlite-tw-w-full stwlite-tw-border-0 stwlite-tw-py-2 stwlite-tw-pl-3 stwlite-tw-pr-10 stwlite-tw-leading-5 stwlite-tw-text-gray-900"
                          :display-value="(user: any) => user?.label || ''"
                          :placeholder="getI18n('search_user', __( 'Search user...', 'saveto-wishlist-lite-for-woocommerce' ))"
                          autocomplete="off"
                          @change="(e: Event) => filterUsers((e.target as HTMLInputElement).value)"
                        />
                        <span
                          class="stwlite-tw-absolute stwlite-tw-inset-y-0 stwlite-tw-right-0 stwlite-tw-flex stwlite-tw-items-center stwlite-tw-pr-2 stwlite-tw-pointer-events-none"
                        >
                          <ChevronsUpDownIcon class="stwlite-tw-h-5 stwlite-tw-w-5 stwlite-tw-text-gray-400" aria-hidden="true" />
                        </span>
                      </div>

                      <div
                        v-if="fetchingUsers"
                        class="stwlite-tw-absolute stwlite-tw-z-10 stwlite-tw-mt-1 stwlite-tw-w-full stwlite-tw-bg-white stwlite-tw-py-2 stwlite-tw-px-3 stwlite-tw-text-sm stwlite-tw-text-gray-500 stwlite-tw-rounded-md stwlite-tw-shadow"
                      >
                        {{ getI18n('searching', __( 'Searching...', 'saveto-wishlist-lite-for-woocommerce' )) }}
                      </div>

                      <ComboboxOptions
                        v-else-if="filteredUserOptions.length > 0"
                        class="stwlite-tw-absolute stwlite-tw-z-10 stwlite-tw-mt-1 stwlite-tw-max-h-60 stwlite-tw-w-full stwlite-tw-overflow-auto stwlite-tw-rounded-md stwlite-tw-bg-white stwlite-tw-py-1 stwlite-tw-text-base stwlite-tw-shadow-lg stwlite-tw-ring-1 stwlite-tw-ring-black stwlite-tw-ring-opacity-5 focus:stwlite-tw-outline-none sm:stwlite-tw-text-sm"
                      >
                        <ComboboxOption
                          v-for="user in filteredUserOptions"
                          :key="user.value"
                          :value="user"
                          class="stwlite-tw-relative stwlite-tw-cursor-default stwlite-tw-select-none stwlite-tw-py-2 stwlite-tw-pl-10 stwlite-tw-pr-4"
                          v-slot="{ active, selected }"
                        >
                          <span
                            class="stwlite-tw-block stwlite-tw-truncate"
                            :class="selected ? 'font-medium' : 'font-normal'"
                          >
                            {{ user.label }}
                          </span>
                          <span
                            v-if="selected"
                            class="stwlite-tw-absolute stwlite-tw-inset-y-0 stwlite-tw-left-0 stwlite-tw-flex stwlite-tw-items-center stwlite-tw-pl-3 stwlite-tw-text-blue-600"
                          >
                            <Check class="stwlite-tw-h-5 stwlite-tw-w-5" aria-hidden="true" />
                          </span>
                        </ComboboxOption>
                      </ComboboxOptions>

                      <p
                        v-else-if="searchUser && !fetchingUsers && filteredUserOptions.length === 0"
                        class="stwlite-tw-absolute stwlite-tw-z-10 stwlite-tw-mt-1 stwlite-tw-w-full stwlite-tw-bg-white stwlite-tw-py-2 stwlite-tw-px-3 stwlite-tw-text-sm stwlite-tw-text-gray-500 stwlite-tw-rounded-md stwlite-tw-shadow"
                      >
                        {{ getI18n('no_users_found', __( 'No users found', 'saveto-wishlist-lite-for-woocommerce' )) }}
                      </p>
                    </div>
                  </Combobox>
                </div>
              </div>
              <div>
                <label class="stwlite-tw-block stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-700 stwlite-tw-mb-2">
                  {{ getI18n('is_public', __( 'Is Public', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </label>
                <div class="stwlite-tw-relative">
                  <input
                    type="checkbox"
                    name="is_public"
                    v-model="form.is_public"
                    class="stwlite-tw-rounded stwlite-tw-border-gray-300 stwlite-tw-text-blue-600 stwlite-tw-shadow-sm focus:stwlite-tw-border-blue-300 focus:stwlite-tw-ring focus:stwlite-tw-ring-blue-200 focus:stwlite-tw-ring-opacity-50"
                  /> {{ getI18n('yes', __( 'Yes', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </div>
              </div>
            </div>

            <div v-if="form.id > 0 && (form.is_public || activePro)" class="stwlite-tw-grid stwlite-tw-grid-cols-1 lg:stwlite-tw-grid-cols-3 stwlite-tw-gap-6 stwlite-tw-mb-6">
              <div class="lg:stwlite-tw-col-span-2">
                <label htmlFor="user" class="stwlite-tw-block stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-700 stwlite-tw-mb-2">
                  {{ getI18n('url', __( 'URL', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </label>
                <div class="stwlite-tw-relative">
                  <div class="copy-text-container">
                    <div class="copy-text-content">
                      {{ wishlistUrl }}
                    </div>
                    <button
                      class="copy-button"
                      @click="handleCopy(wishlistUrl)"
                      type="button"
                    >
                      <svg
                        v-if="!copied"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                      </svg>
                      <svg
                        v-else
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- Share and Restrictions Button Section (Pro Only) -->
            <div v-if="activePro" class="stwlite-tw-mb-6 stwlite-tw-flex stwlite-tw-gap-3">
              <button
                type="button"
                class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-rounded-md stwlite-tw-text-gray-700 stwlite-tw-bg-white hover:stwlite-tw-bg-gray-50 focus:stwlite-tw-outline-none focus:stwlite-tw-ring-2 focus:stwlite-tw-ring-offset-2 focus:stwlite-tw-ring-blue-500 stwlite-tw-transition-colors stwlite-tw-duration-200 stwlite-tw-cursor-pointer"
                @click="handleShowShareModal"
              >
                <Share2 class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-2" />
                {{ getI18n('share', __( 'Share', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </button>
              <button
                type="button"
                class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-rounded-md stwlite-tw-text-gray-700 stwlite-tw-bg-white hover:stwlite-tw-bg-gray-50 focus:stwlite-tw-outline-none focus:stwlite-tw-ring-2 focus:stwlite-tw-ring-offset-2 focus:stwlite-tw-ring-blue-500 stwlite-tw-transition-colors stwlite-tw-duration-200 stwlite-tw-cursor-pointer"
                @click="handleShowRestrictionsModal"
              >
                <Lock class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-2" />
                {{ getI18n('restrictions', __( 'Restrictions', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </button>
            </div>

            <div class="stwlite-tw-mb-8">
              <label htmlFor="description" class="stwlite-tw-block stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-700 stwlite-tw-mb-2">
                {{ getI18n('description', __( 'Description', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </label>
              <textarea
                id="description"
                name="description"
                v-model="form.description"
                :placeholder="getI18n('description', __( 'Description', 'saveto-wishlist-lite-for-woocommerce' ))"
                rows="4"
                class="stwlite-tw-block stwlite-tw-w-full stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-rounded-md stwlite-tw-shadow-sm focus:stwlite-tw-outline-none focus:stwlite-tw-ring-blue-500 focus:stwlite-tw-border-blue-500"
              />
            </div>
            
            <div>
              <div class="stwlite-tw-flex stwlite-tw-justify-between stwlite-tw-items-center stwlite-tw-mb-4">
                <h3 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-text-gray-900">{{ getI18n('products', __( 'Products', 'saveto-wishlist-lite-for-woocommerce' )) }}</h3>
                <button
                  class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-rounded-md stwlite-tw-text-white stwlite-tw-transition-colors stwlite-tw-duration-200"
                  :class="isDraftWishlist ? 'stwlite-tw-bg-gray-400 stwlite-tw-cursor-not-allowed stwlite-tw-opacity-60' : 'stwlite-tw-bg-blue-600 hover:stwlite-tw-bg-blue-700 focus:stwlite-tw-outline-none focus:stwlite-tw-ring-2 focus:stwlite-tw-ring-offset-2 focus:stwlite-tw-ring-blue-500 stwlite-tw-cursor-pointer'"
                  :disabled="isDraftWishlist"
                  :title="isDraftWishlist ? __( 'Products cannot be added to a draft wishlist', 'saveto-wishlist-lite-for-woocommerce' ) : undefined"
                  @click="handleShowAddProductModal"
                >
                  <Plus class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-2" />
                  {{ getI18n('add_product', __( 'Add Product', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </button>
              </div>

              <div class="stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-border-solid stwlite-tw-rounded-lg stwlite-tw-overflow-hidden">
                <div class="stwlite-tw-bg-gray-50 stwlite-tw-px-6 stwlite-tw-py-3 stwlite-tw-border-0 stwlite-tw-border-b stwlite-tw-border-gray-200 stwlite-tw-border-solid">
                  <div class="stwlite-tw-grid stwlite-tw-grid-cols-12 stwlite-tw-gap-4 stwlite-tw-text-left stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-text-gray-500 stwlite-tw-uppercase stwlite-tw-tracking-wider">
                    <div class="stwlite-tw-col-span-3">{{ getI18n('name', __( 'Name', 'saveto-wishlist-lite-for-woocommerce' )) }}</div>
                    <div class="stwlite-tw-col-span-2">{{ getI18n('sku', __( 'SKU', 'saveto-wishlist-lite-for-woocommerce' )) }}</div>
                    <div class="stwlite-tw-col-span-2">{{ getI18n('price', __( 'Price', 'saveto-wishlist-lite-for-woocommerce' )) }}</div>
                    <div class="stwlite-tw-col-span-2">{{ getI18n('quantity', __( 'Quantity', 'saveto-wishlist-lite-for-woocommerce' )) }}</div>
                    <div class="stwlite-tw-col-span-3">{{ getI18n('actions', __( 'Actions', 'saveto-wishlist-lite-for-woocommerce' )) }}</div>
                  </div>
                </div>
                
                <div v-if="productItems.length > 0">
                  <div v-for="(product, index) in productItems" :key="product.id" class="stwlite-tw-px-6 stwlite-tw-py-3 stwlite-tw-border-0 stwlite-tw-border-b stwlite-tw-border-gray-200 stwlite-tw-border-solid">
                    <div class="stwlite-tw-grid stwlite-tw-grid-cols-12 stwlite-tw-gap-4 stwlite-tw-text-left stwlite-tw-text-xs stwlite-tw-text-gray-500 stwlite-tw-tracking-wider">
                      <div class="stwlite-tw-col-span-3 stwlite-tw-inline-flex stwlite-tw-items-center">{{ product.name }}</div>
                      <div class="stwlite-tw-col-span-2 stwlite-tw-inline-flex stwlite-tw-items-center">{{ product.sku }}</div>
                      <div class="stwlite-tw-col-span-2 stwlite-tw-inline-flex stwlite-tw-items-center">
                        <span v-html="`${l10nObj().wcCurrency.currency_symbol}${product.price}`"></span>
                      </div>
                      <div class="stwlite-tw-col-span-2 stwlite-tw-inline-flex stwlite-tw-items-center">
                        <input class="stwlite-tw-border-0 stwlite-tw-w-full" type="number" v-model="product.quantity" @change="handleChangeQuantity(product, index)" />
                      </div>
                      <div class="stwlite-tw-col-span-3 stwlite-tw-inline-flex stwlite-tw-items-center">
                        <button class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-rounded-md stwlite-tw-text-white stwlite-tw-bg-red-600 hover:stwlite-tw-bg-red-700 focus:stwlite-tw-outline-none focus:stwlite-tw-ring-2 focus:stwlite-tw-ring-offset-2 focus:stwlite-tw-ring-red-500 stwlite-tw-transition-colors stwlite-tw-duration-200" @click="handleDeleteProduct(product, index)">
                          <Trash class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-2" />
                          {{ getI18n('remove', __( 'Remove', 'saveto-wishlist-lite-for-woocommerce' )) }}
                        </button>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Empty state for products -->
                <div v-else class="stwlite-tw-px-6 stwlite-tw-py-12">
                  <div class="stwlite-tw-flex stwlite-tw-flex-col stwlite-tw-items-center stwlite-tw-text-center">
                    <div class="stwlite-tw-w-16 stwlite-tw-h-16 stwlite-tw-bg-gray-100 stwlite-tw-rounded-full stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-mb-4">
                      <ShoppingBag class="stwlite-tw-w-6 stwlite-tw-h-6 stwlite-tw-text-gray-400" />
                    </div>
                    <p class="stwlite-tw-text-gray-500 stwlite-tw-text-sm">{{ getI18n('empty_wishlist_products', __( 'This wishlist is empty, add some products!', 'saveto-wishlist-lite-for-woocommerce' )) }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <TransitionRoot appear :show="isModalOpen" as="template">
    <Dialog as="div" @close="handleCancelAddProduct" class="stwlite-tw-relative stwlite-tw-z-10">
      <TransitionChild
        as="template"
        enter="duration-300 ease-out"
        enter-from="opacity-0"
        enter-to="opacity-100"
        leave="duration-200 ease-in"
        leave-from="opacity-100"
        leave-to="opacity-0"
      >
        <div class="stwlite-tw-fixed stwlite-tw-inset-0 stwlite-tw-bg-black/25" />
      </TransitionChild>

      <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="duration-300 ease-out"
            enter-from="opacity-0 scale-95"
            enter-to="opacity-100 scale-100"
            leave="duration-200 ease-in"
            leave-from="opacity-100 scale-100"
            leave-to="opacity-0 scale-95"
          >
            <DialogPanel
              class="stwlite-tw-w-full stwlite-tw-max-w-2xl stwlite-tw-transform stwlite-tw-rounded-2xl stwlite-tw-bg-white stwlite-tw-p-6 stwlite-tw-text-left stwlite-tw-align-middle stwlite-tw-shadow-xl stwlite-tw-transition-all"
            >
              <DialogTitle
                as="h3"
                class="stwlite-tw-text-lg stwlite-tw-font-medium stwlite-tw-leading-6 stwlite-tw-text-gray-900 stwlite-tw-mt-0"
              >
                <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between">
                  <span>
                    {{ getI18n('add_products', __( 'Add Products', 'saveto-wishlist-lite-for-woocommerce' )) }}
                  </span>
                  <button
                    @click="handleCancelAddProduct"
                    type="button"
                    class="stwlite-tw-ml-4 stwlite-tw-text-gray-400 hover:stwlite-tw-text-gray-600 focus:stwlite-tw-outline-none stwlite-tw-cursor-pointer stwlite-tw-bg-transparent stwlite-tw-border-0 stwlite-tw-text-sm hover:stwlite-tw-underline"
                    aria-label="Close"
                  >
                    <span aria-hidden="true">{{ getI18n('close', __( 'Close', 'saveto-wishlist-lite-for-woocommerce' )) }}</span>
                  </button>
                </div>
              </DialogTitle>

              <div class="stwlite-tw-mt-4">
                <div class="stwlite-tw-w-full stwlite-tw-py-3">
                  <Combobox v-model="selectedProduct" multiple @update:model-value="onProductSelectionChange">
                    <div class="stwlite-tw-relative">
                      <!-- Input -->
                      <div
                        class="stwlite-tw-relative stwlite-tw-w-full stwlite-tw-cursor-default stwlite-tw-overflow-hidden stwlite-tw-rounded-lg stwlite-tw-border-solid stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-bg-white stwlite-tw-text-left stwlite-tw-shadow-sm focus-within:stwlite-tw-ring-2 focus-within:stwlite-tw-ring-blue-500 sm:stwlite-tw-text-sm"
                      >
                        <ComboboxInput
                          class="stwlite-tw-w-full stwlite-tw-border-0 stwlite-tw-py-2 stwlite-tw-pl-3 stwlite-tw-pr-10 stwlite-tw-leading-5 stwlite-tw-text-gray-900"
                          :display-value="(item: any) => item?.label"
                          @change="onChangeSearchProduct"
                          :placeholder="getI18n('search_product', __( 'Search Product', 'saveto-wishlist-lite-for-woocommerce' ))"
                          autocomplete="off"
                        />
                        <span
                          class="stwlite-tw-absolute stwlite-tw-inset-y-0 stwlite-tw-right-0 stwlite-tw-flex stwlite-tw-items-center stwlite-tw-pr-2 stwlite-tw-pointer-events-none"
                        >
                          <ChevronsUpDownIcon class="stwlite-tw-h-5 stwlite-tw-w-5 stwlite-tw-text-gray-400" aria-hidden="true" />
                        </span>
                      </div>

                      <!-- Dropdown -->
                      <ComboboxOptions
                        v-if="productOptions.length > 0"
                        class="stwlite-tw-absolute stwlite-tw-mt-1 stwlite-tw-max-h-60 stwlite-tw-w-full stwlite-tw-overflow-auto stwlite-tw-rounded-md stwlite-tw-bg-white stwlite-tw-py-1 stwlite-tw-text-base stwlite-tw-shadow-lg stwlite-tw-ring-1 stwlite-tw-ring-black stwlite-tw-ring-opacity-5 focus:stwlite-tw-outline-none sm:stwlite-tw-text-sm"
                      >
                        <ComboboxOption
                          v-for="item in productOptions"
                          :key="item.value"
                          :value="item"
                          class="stwlite-tw-relative stwlite-tw-cursor-default stwlite-tw-select-none stwlite-tw-py-2 stwlite-tw-pl-10 stwlite-tw-pr-4"
                          v-slot="{ active, selected }"
                        >
                          <span
                            class="stwlite-tw-block stwlite-tw-truncate"
                            :class="selected ? 'font-medium' : 'font-normal'"
                          >
                            {{ item.label }}
                          </span>
                          <span
                            v-if="selected"
                            class="stwlite-tw-absolute stwlite-tw-inset-y-0 stwlite-tw-left-0 stwlite-tw-flex stwlite-tw-items-center stwlite-tw-pl-3 stwlite-tw-text-blue-600"
                          >
                            <Check class="stwlite-tw-h-5 stwlite-tw-w-5" aria-hidden="true" />
                          </span>
                        </ComboboxOption>
                      </ComboboxOptions>

                      <!-- Loading -->
                      <p
                        v-else-if="fetchingProducts"
                        class="stwlite-tw-absolute stwlite-tw-mt-1 stwlite-tw-w-full stwlite-tw-bg-white stwlite-tw-py-2 stwlite-tw-px-3 stwlite-tw-text-sm stwlite-tw-text-gray-500 stwlite-tw-rounded-md stwlite-tw-shadow"
                      >
                        {{ getI18n('searching', __( 'Searching...', 'saveto-wishlist-lite-for-woocommerce' )) }}
                      </p>

                      <div class="stwlite-tw-mt-4 stwlite-tw-space-y-2">
                        <div
                          v-for="item in newAddedProduct"
                          :key="item.value"
                          class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between stwlite-tw-rounded-md stwlite-tw-border stwlite-tw-px-3 stwlite-tw-py-1 stwlite-tw-bg-gray-100"
                        >
                          <span>{{ item.label }}</span>
                          <button
                            @click="removeOption(item.value)"
                            class="stwlite-tw-text-gray-500 hover:stwlite-tw-text-red-500 stwlite-tw-cursor-pointer stwlite-tw-border-0 stwlite-tw-bg-transparent"
                          >
                            <X class="stwlite-tw-h-4 stwlite-tw-w-4" />
                          </button>
                        </div>
                      </div>
                    </div>
                  </Combobox>
                </div>
              </div>

              <div class="stwlite-tw-mt-4">
                <button
                  type="button"
                  class="stwlite-tw-inline-flex stwlite-tw-justify-center stwlite-tw-rounded-md stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-bg-blue-100 stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-blue-900 hover:stwlite-tw-bg-blue-200 focus:stwlite-tw-outline-none focus-visible:stwlite-tw-ring-2 focus-visible:stwlite-tw-ring-blue-500 focus-visible:stwlite-tw-ring-offset-2"
                  @click="handleAddProduct"
                >
                  {{ getI18n('ok', __( 'OK', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </button>
              </div>
            </DialogPanel>
          </TransitionChild>
        </div>
      </div>
    </Dialog>
  </TransitionRoot>

  <Confirmation
    :isOpen="isConfirmationOpen"
    :processing="isConfirming"
    :title="getI18n('confirmation_title', __('Confirmation', 'saveto-wishlist-lite-for-woocommerce'))"
    :message="confirmationMessage"
    :confirmText="getI18n('delete', __('Delete', 'saveto-wishlist-lite-for-woocommerce'))"
    :cancelText="getI18n('cancelButtonText', __('Cancel', 'saveto-wishlist-lite-for-woocommerce'))"
    @closeAction="closeConfirmation"
    @confirmAction="confirmAction"
  />
  
  <Notification
    v-if="notificationMessage"
    :message="notificationMessage"
    :type="notificationType"
    :messageTitle="notificationMessageTitle"
    @closeNotification="closeNotification"
  />

  <!-- Share Modal -->
  <TransitionRoot appear :show="isShareModalOpen" as="template">
    <Dialog as="div" @close="handleCancelShare" class="stwlite-tw-relative stwlite-tw-z-10">
      <TransitionChild
        as="template"
        enter="duration-300 ease-out"
        enter-from="opacity-0"
        enter-to="opacity-100"
        leave="duration-200 ease-in"
        leave-from="opacity-100"
        leave-to="opacity-0"
      >
        <div class="stwlite-tw-fixed stwlite-tw-inset-0 stwlite-tw-bg-black/25" />
      </TransitionChild>

      <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="duration-300 ease-out"
            enter-from="opacity-0 scale-95"
            enter-to="opacity-100 scale-100"
            leave="duration-200 ease-in"
            leave-from="opacity-100 scale-100"
            leave-to="opacity-0 scale-95"
          >
            <DialogPanel
              class="stwlite-tw-w-full stwlite-tw-max-w-2xl stwlite-tw-transform stwlite-tw-rounded-2xl stwlite-tw-bg-white stwlite-tw-p-6 stwlite-tw-text-left stwlite-tw-align-middle stwlite-tw-shadow-xl stwlite-tw-transition-all"
            >
              <DialogTitle
                as="h3"
                class="stwlite-tw-text-lg stwlite-tw-font-medium stwlite-tw-leading-6 stwlite-tw-text-gray-900 stwlite-tw-mt-0"
              >
                <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between">
                  <span>
                    {{ getI18n('share_wishlist', __( 'Share Wishlist', 'saveto-wishlist-lite-for-woocommerce' )) }}
                  </span>
                  <button
                    @click="handleCancelShare"
                    type="button"
                    class="stwlite-tw-ml-4 stwlite-tw-text-gray-400 hover:stwlite-tw-text-gray-600 focus:stwlite-tw-outline-none stwlite-tw-cursor-pointer stwlite-tw-bg-transparent stwlite-tw-border-0 stwlite-tw-text-sm hover:stwlite-tw-underline"
                    aria-label="Close"
                  >
                    <span aria-hidden="true">{{ getI18n('close', __( 'Close', 'saveto-wishlist-lite-for-woocommerce' )) }}</span>
                  </button>
                </div>
              </DialogTitle>

              <div class="stwlite-tw-mt-6">
                <!-- Email Section -->
                <div class="stwlite-tw-mb-6">
                  <label class="stwlite-tw-block stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-700 stwlite-tw-mb-2">
                    <Mail class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-inline-block stwlite-tw-mr-2" />
                    {{ getI18n('share_by_email', __( 'Share by Email', 'saveto-wishlist-lite-for-woocommerce' )) }}
                  </label>
                  <div class="stwlite-tw-flex stwlite-tw-gap-2">
                    <input
                      type="email"
                      v-model="shareEmailInput"
                      @keyup.enter="handleAddEmail"
                      :placeholder="getI18n('enter_email', __( 'Enter email address', 'saveto-wishlist-lite-for-woocommerce' ))"
                      class="stwlite-tw-flex-1 stwlite-tw-block stwlite-tw-w-full stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-border-solid stwlite-tw-rounded-md stwlite-tw-shadow-sm focus:stwlite-tw-outline-none focus:stwlite-tw-ring-blue-500 focus:stwlite-tw-border-blue-500"
                    />
                    <button
                      type="button"
                      @click="handleAddEmail"
                      class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-rounded-md stwlite-tw-text-white stwlite-tw-bg-blue-600 hover:stwlite-tw-bg-blue-700 focus:stwlite-tw-outline-none focus:stwlite-tw-ring-2 focus:stwlite-tw-ring-offset-2 focus:stwlite-tw-ring-blue-500 stwlite-tw-transition-colors stwlite-tw-duration-200 stwlite-tw-cursor-pointer"
                    >
                      <Plus class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-1" />
                      {{ getI18n('add', __( 'Add', 'saveto-wishlist-lite-for-woocommerce' )) }}
                    </button>
                  </div>
                  <div v-if="shareEmails.length > 0" class="stwlite-tw-mt-3 stwlite-tw-space-y-2">
                    <div
                      v-for="(email, index) in shareEmails"
                      :key="index"
                      class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between stwlite-tw-rounded-md stwlite-tw-border stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-bg-gray-100"
                    >
                      <span class="stwlite-tw-text-sm stwlite-tw-text-gray-700">{{ email }}</span>
                      <button
                        @click="handleRemoveEmail(email)"
                        class="stwlite-tw-text-gray-500 hover:stwlite-tw-text-red-500 stwlite-tw-cursor-pointer stwlite-tw-border-0 stwlite-tw-bg-transparent"
                      >
                        <X class="stwlite-tw-h-4 stwlite-tw-w-4" />
                      </button>
                    </div>
                  </div>
                </div>

                <!-- User Selection Section -->
                <div class="stwlite-tw-mb-6">
                  <label class="stwlite-tw-block stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-700 stwlite-tw-mb-2">
                    <User class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-inline-block stwlite-tw-mr-2" />
                    {{ getI18n('share_with_users', __( 'Share with Users', 'saveto-wishlist-lite-for-woocommerce' )) }}
                  </label>
                  <Combobox v-model="shareSelectedUsers" multiple @update:model-value="handleShareUserSelectionChange">
                    <div class="stwlite-tw-relative">
                      <div
                        class="stwlite-tw-relative stwlite-tw-w-full stwlite-tw-cursor-default stwlite-tw-overflow-hidden stwlite-tw-rounded-lg stwlite-tw-border-solid stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-bg-white stwlite-tw-text-left stwlite-tw-shadow-sm focus-within:stwlite-tw-ring-2 focus-within:stwlite-tw-ring-blue-500 sm:stwlite-tw-text-sm"
                      >
                        <ComboboxInput
                          class="stwlite-tw-w-full stwlite-tw-border-0 stwlite-tw-py-2 stwlite-tw-pl-3 stwlite-tw-pr-10 stwlite-tw-leading-5 stwlite-tw-text-gray-900"
                          :display-value="(item: any) => item?.label"
                          :placeholder="getI18n('search_users', __( 'Search users', 'saveto-wishlist-lite-for-woocommerce' ))"
                          autocomplete="off"
                          @change="(e: Event) => searchShareUsers((e.target as HTMLInputElement).value)"
                        />
                        <span
                          class="stwlite-tw-absolute stwlite-tw-inset-y-0 stwlite-tw-right-0 stwlite-tw-flex stwlite-tw-items-center stwlite-tw-pr-2 stwlite-tw-pointer-events-none"
                        >
                          <ChevronsUpDownIcon class="stwlite-tw-h-5 stwlite-tw-w-5 stwlite-tw-text-gray-400" aria-hidden="true" />
                        </span>
                      </div>

                      <div
                        v-if="fetchingShareUsers"
                        class="stwlite-tw-absolute stwlite-tw-mt-1 stwlite-tw-w-full stwlite-tw-bg-white stwlite-tw-py-2 stwlite-tw-px-3 stwlite-tw-text-sm stwlite-tw-text-gray-500 stwlite-tw-rounded-md stwlite-tw-shadow"
                      >
                        {{ getI18n('searching', __( 'Searching...', 'saveto-wishlist-lite-for-woocommerce' )) }}
                      </div>

                      <ComboboxOptions
                        v-else-if="shareUserOptions.length > 0"
                        class="stwlite-tw-absolute stwlite-tw-mt-1 stwlite-tw-max-h-60 stwlite-tw-w-full stwlite-tw-overflow-auto stwlite-tw-rounded-md stwlite-tw-bg-white stwlite-tw-py-1 stwlite-tw-text-base stwlite-tw-shadow-lg stwlite-tw-ring-1 stwlite-tw-ring-black stwlite-tw-ring-opacity-5 focus:stwlite-tw-outline-none sm:stwlite-tw-text-sm"
                      >
                        <ComboboxOption
                          v-for="user in shareUserOptions"
                          :key="user.value"
                          :value="user"
                          class="stwlite-tw-relative stwlite-tw-cursor-default stwlite-tw-select-none stwlite-tw-py-2 stwlite-tw-pl-10 stwlite-tw-pr-4"
                          v-slot="{ active, selected }"
                        >
                          <span
                            class="stwlite-tw-block stwlite-tw-truncate"
                            :class="selected ? 'font-medium' : 'font-normal'"
                          >
                            {{ user.label }}
                          </span>
                          <span
                            v-if="selected"
                            class="stwlite-tw-absolute stwlite-tw-inset-y-0 stwlite-tw-left-0 stwlite-tw-flex stwlite-tw-items-center stwlite-tw-pl-3 stwlite-tw-text-blue-600"
                          >
                            <Check class="stwlite-tw-h-5 stwlite-tw-w-5" aria-hidden="true" />
                          </span>
                        </ComboboxOption>
                      </ComboboxOptions>

                      <p
                        v-else-if="shareUserSearch && !fetchingShareUsers && shareUserOptions.length === 0"
                        class="stwlite-tw-absolute stwlite-tw-mt-1 stwlite-tw-w-full stwlite-tw-bg-white stwlite-tw-py-2 stwlite-tw-px-3 stwlite-tw-text-sm stwlite-tw-text-gray-500 stwlite-tw-rounded-md stwlite-tw-shadow"
                      >
                        {{ getI18n('no_users_found', __( 'No users found', 'saveto-wishlist-lite-for-woocommerce' )) }}
                      </p>

                      <div v-if="shareSelectedUsers.length > 0" class="stwlite-tw-mt-4 stwlite-tw-space-y-2">
                        <div
                          v-for="user in shareSelectedUsers"
                          :key="user.value"
                          class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between stwlite-tw-rounded-md stwlite-tw-border stwlite-tw-px-3 stwlite-tw-py-1 stwlite-tw-bg-gray-100"
                        >
                          <span>{{ user.label }}</span>
                          <button
                            @click="shareSelectedUsers = shareSelectedUsers.filter((u: any) => u.value !== user.value)"
                            class="stwlite-tw-text-gray-500 hover:stwlite-tw-text-red-500 stwlite-tw-cursor-pointer stwlite-tw-border-0 stwlite-tw-bg-transparent"
                          >
                            <X class="stwlite-tw-h-4 stwlite-tw-w-4" />
                          </button>
                        </div>
                      </div>
                    </div>
                  </Combobox>
                </div>
              </div>

              <div class="stwlite-tw-mt-6 stwlite-tw-flex stwlite-tw-justify-end stwlite-tw-gap-3">
                <button
                  type="button"
                  @click="handleCancelShare"
                  class="stwlite-tw-inline-flex stwlite-tw-justify-center stwlite-tw-rounded-md stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-bg-white stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-700 hover:stwlite-tw-bg-gray-50 focus:stwlite-tw-outline-none focus-visible:stwlite-tw-ring-2 focus-visible:stwlite-tw-ring-blue-500 focus-visible:stwlite-tw-ring-offset-2"
                >
                  {{ getI18n('cancel', __( 'Cancel', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </button>
                <button
                  type="button"
                  @click="handleShareWishlist"
                  :disabled="sharingWishlist"
                  class="stwlite-tw-inline-flex stwlite-tw-justify-center stwlite-tw-rounded-md stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-bg-blue-600 stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-white hover:stwlite-tw-bg-blue-700 focus:stwlite-tw-outline-none focus-visible:stwlite-tw-ring-2 focus-visible:stwlite-tw-ring-blue-500 focus-visible:stwlite-tw-ring-offset-2 disabled:stwlite-tw-opacity-50 disabled:stwlite-tw-cursor-not-allowed"
                >
                  {{ getI18n('ok', __( 'OK', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </button>
              </div>
            </DialogPanel>
          </TransitionChild>
        </div>
      </div>
    </Dialog>
  </TransitionRoot>

  <!-- Restrictions Modal -->
  <TransitionRoot appear :show="isRestrictionsModalOpen" as="template">
    <Dialog as="div" @close="handleCancelRestrictions" class="stwlite-tw-relative stwlite-tw-z-10">
      <TransitionChild
        as="template"
        enter="duration-300 ease-out"
        enter-from="opacity-0"
        enter-to="opacity-100"
        leave="duration-200 ease-in"
        leave-from="opacity-100"
        leave-to="opacity-0"
      >
        <div class="stwlite-tw-fixed stwlite-tw-inset-0 stwlite-tw-bg-black/25" />
      </TransitionChild>

      <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="duration-300 ease-out"
            enter-from="opacity-0 scale-95"
            enter-to="opacity-100 scale-100"
            leave="duration-200 ease-in"
            leave-from="opacity-100 scale-100"
            leave-to="opacity-0 scale-95"
          >
            <DialogPanel
              class="stwlite-tw-w-full stwlite-tw-max-w-2xl stwlite-tw-transform stwlite-tw-rounded-2xl stwlite-tw-bg-white stwlite-tw-p-6 stwlite-tw-text-left stwlite-tw-align-middle stwlite-tw-shadow-xl stwlite-tw-transition-all"
            >
              <DialogTitle
                as="h3"
                class="stwlite-tw-text-lg stwlite-tw-font-medium stwlite-tw-leading-6 stwlite-tw-text-gray-900 stwlite-tw-mt-0"
              >
                <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between">
                  <span>
                    {{ getI18n('restrictions', __( 'Restrictions', 'saveto-wishlist-lite-for-woocommerce' )) }}
                  </span>
                  <button
                    @click="handleCancelRestrictions"
                    type="button"
                    class="stwlite-tw-ml-4 stwlite-tw-text-gray-400 hover:stwlite-tw-text-gray-600 focus:stwlite-tw-outline-none stwlite-tw-cursor-pointer stwlite-tw-bg-transparent stwlite-tw-border-0 stwlite-tw-text-sm hover:stwlite-tw-underline"
                    aria-label="Close"
                  >
                    <span aria-hidden="true">{{ getI18n('close', __( 'Close', 'saveto-wishlist-lite-for-woocommerce' )) }}</span>
                  </button>
                </div>
              </DialogTitle>

              <div class="stwlite-tw-mt-6">
                <!-- Role Selection Section -->
                <div class="stwlite-tw-mb-6">
                  <label class="stwlite-tw-block stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-700 stwlite-tw-mb-2">
                    <Lock class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-inline-block stwlite-tw-mr-2" />
                    {{ getI18n('restrict_by_roles', __( 'Restrict by Roles', 'saveto-wishlist-lite-for-woocommerce' )) }}
                  </label>
                  <Combobox v-model="restrictionSelectedRoles" multiple @update:model-value="handleRestrictionRoleSelectionChange">
                    <div class="stwlite-tw-relative">
                      <div
                        class="stwlite-tw-relative stwlite-tw-w-full stwlite-tw-cursor-default stwlite-tw-overflow-hidden stwlite-tw-rounded-lg stwlite-tw-border-solid stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-bg-white stwlite-tw-text-left stwlite-tw-shadow-sm focus-within:stwlite-tw-ring-2 focus-within:stwlite-tw-ring-blue-500 sm:stwlite-tw-text-sm"
                      >
                        <ComboboxInput
                          class="stwlite-tw-w-full stwlite-tw-border-0 stwlite-tw-py-2 stwlite-tw-pl-3 stwlite-tw-pr-10 stwlite-tw-leading-5 stwlite-tw-text-gray-900"
                          :display-value="(item: any) => item?.label"
                          :placeholder="getI18n('search_roles', __( 'Search roles', 'saveto-wishlist-lite-for-woocommerce' ))"
                          autocomplete="off"
                        />
                        <span
                          class="stwlite-tw-absolute stwlite-tw-inset-y-0 stwlite-tw-right-0 stwlite-tw-flex stwlite-tw-items-center stwlite-tw-pr-2 stwlite-tw-pointer-events-none"
                        >
                          <ChevronsUpDownIcon class="stwlite-tw-h-5 stwlite-tw-w-5 stwlite-tw-text-gray-400" aria-hidden="true" />
                        </span>
                      </div>

                      <ComboboxOptions
                        v-if="restrictionRoleOptions.length > 0"
                        class="stwlite-tw-absolute stwlite-tw-mt-1 stwlite-tw-max-h-60 stwlite-tw-w-full stwlite-tw-overflow-auto stwlite-tw-rounded-md stwlite-tw-bg-white stwlite-tw-py-1 stwlite-tw-text-base stwlite-tw-shadow-lg stwlite-tw-ring-1 stwlite-tw-ring-black stwlite-tw-ring-opacity-5 focus:stwlite-tw-outline-none sm:stwlite-tw-text-sm"
                      >
                        <ComboboxOption
                          v-for="role in restrictionRoleOptions"
                          :key="role.value"
                          :value="role"
                          class="stwlite-tw-relative stwlite-tw-cursor-default stwlite-tw-select-none stwlite-tw-py-2 stwlite-tw-pl-10 stwlite-tw-pr-4"
                          v-slot="{ active, selected }"
                        >
                          <span
                            class="stwlite-tw-block stwlite-tw-truncate"
                            :class="selected ? 'font-medium' : 'font-normal'"
                          >
                            {{ role.label }}
                          </span>
                          <span
                            v-if="selected"
                            class="stwlite-tw-absolute stwlite-tw-inset-y-0 stwlite-tw-left-0 stwlite-tw-flex stwlite-tw-items-center stwlite-tw-pl-3 stwlite-tw-text-blue-600"
                          >
                            <Check class="stwlite-tw-h-5 stwlite-tw-w-5" aria-hidden="true" />
                          </span>
                        </ComboboxOption>
                      </ComboboxOptions>

                      <div v-if="restrictionSelectedRoles.length > 0" class="stwlite-tw-mt-4 stwlite-tw-space-y-2">
                        <div
                          v-for="role in restrictionSelectedRoles"
                          :key="role.value"
                          class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between stwlite-tw-rounded-md stwlite-tw-border stwlite-tw-px-3 stwlite-tw-py-1 stwlite-tw-bg-gray-100"
                        >
                          <span>{{ role.label }}</span>
                          <button
                            @click="restrictionSelectedRoles = restrictionSelectedRoles.filter((r: any) => r.value !== role.value)"
                            class="stwlite-tw-text-gray-500 hover:stwlite-tw-text-red-500 stwlite-tw-cursor-pointer stwlite-tw-border-0 stwlite-tw-bg-transparent"
                          >
                            <X class="stwlite-tw-h-4 stwlite-tw-w-4" />
                          </button>
                        </div>
                      </div>
                    </div>
                  </Combobox>
                </div>
                
                <!-- Who Can Edit Section -->
                <div class="stwlite-tw-mb-6">
                  <label class="stwlite-tw-block stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-700 stwlite-tw-mb-2">
                    <Mail class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-inline-block stwlite-tw-mr-2" />
                    {{ getI18n('who_can_edit', __( 'Who Can Edit', 'saveto-wishlist-lite-for-woocommerce' )) }}
                  </label>
                  <div class="stwlite-tw-flex stwlite-tw-gap-2">
                    <input
                      type="email"
                      v-model="restrictionEditEmailInput"
                      @keyup.enter="handleAddRestrictionEditEmail"
                      :placeholder="getI18n('enter_email', __( 'Enter email address', 'saveto-wishlist-lite-for-woocommerce' ))"
                      class="stwlite-tw-flex-1 stwlite-tw-block stwlite-tw-w-full stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-border-solid stwlite-tw-rounded-md stwlite-tw-shadow-sm focus:stwlite-tw-outline-none focus:stwlite-tw-ring-blue-500 focus:stwlite-tw-border-blue-500"
                    />
                    <button
                      type="button"
                      @click="handleAddRestrictionEditEmail"
                      class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-rounded-md stwlite-tw-text-white stwlite-tw-bg-blue-600 hover:stwlite-tw-bg-blue-700 focus:stwlite-tw-outline-none focus:stwlite-tw-ring-2 focus:stwlite-tw-ring-offset-2 focus:stwlite-tw-ring-blue-500 stwlite-tw-transition-colors stwlite-tw-duration-200 stwlite-tw-cursor-pointer"
                    >
                      <Plus class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-1" />
                      {{ getI18n('add', __( 'Add', 'saveto-wishlist-lite-for-woocommerce' )) }}
                    </button>
                  </div>
                  <div v-if="restrictionEditEmails.length > 0" class="stwlite-tw-mt-3 stwlite-tw-space-y-2">
                    <div
                      v-for="(email, index) in restrictionEditEmails"
                      :key="index"
                      class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between stwlite-tw-rounded-md stwlite-tw-border stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-bg-gray-100"
                    >
                      <span class="stwlite-tw-text-sm stwlite-tw-text-gray-700">{{ email }}</span>
                      <button
                        @click="handleRemoveRestrictionEditEmail(email)"
                        class="stwlite-tw-text-gray-500 hover:stwlite-tw-text-red-500 stwlite-tw-cursor-pointer stwlite-tw-border-0 stwlite-tw-bg-transparent"
                      >
                        <X class="stwlite-tw-h-4 stwlite-tw-w-4" />
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="stwlite-tw-mt-6 stwlite-tw-flex stwlite-tw-justify-end stwlite-tw-gap-3">
                <button
                  type="button"
                  @click="handleCancelRestrictions"
                  class="stwlite-tw-inline-flex stwlite-tw-justify-center stwlite-tw-rounded-md stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-bg-white stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-700 hover:stwlite-tw-bg-gray-50 focus:stwlite-tw-outline-none focus-visible:stwlite-tw-ring-2 focus-visible:stwlite-tw-ring-blue-500 focus-visible:stwlite-tw-ring-offset-2"
                >
                  {{ getI18n('cancel', __( 'Cancel', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </button>
                <button
                  type="button"
                  @click="handleSaveRestrictions"
                  class="stwlite-tw-inline-flex stwlite-tw-justify-center stwlite-tw-rounded-md stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-bg-blue-600 stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-white hover:stwlite-tw-bg-blue-700 focus:stwlite-tw-outline-none focus-visible:stwlite-tw-ring-2 focus-visible:stwlite-tw-ring-blue-500 focus-visible:stwlite-tw-ring-offset-2"
                >
                  <Lock class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-2" />
                  {{ getI18n('ok', __( 'OK', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </button>
              </div>
            </DialogPanel>
          </TransitionChild>
        </div>
      </div>
    </Dialog>
  </TransitionRoot>
</template>

<style scoped lang="scss">
select {
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  border-color: rgb(209 213 219 / 1);
  border-radius: 0.375rem;
  max-width: 100%;
}

input[type="text"] {
  width: 100%;
  max-width: 100%;
  line-height: 1.25rem;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: rgb(255 255 255 / 1);
  border-color: rgb(209 213 219 / 1);
  border-width: 1px;
  border-radius: 0.375rem;
}

/* Copy Text */
.copy-text-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.copy-text-container:hover {
  background-color: #e5e7eb;
}

.copy-text-content {
  flex: 1;
  color: #374151;
  word-break: break-all;
}

.copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;
}

.copy-button:hover {
  color: #374151;
  background-color: #d1d5db;
}

.copy-button:active {
  transform: scale(0.95);
}

.copy-button:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.copy-button svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.copy-button svg:last-child {
  color: #10b981;
}
</style>