'use client'

import { useEffect, useState } from 'react'
import { Link } from '@/i18n/navigation'
import { useLocale, useTranslations } from 'next-intl'
import { Heart, ShoppingCart, Trash2, ImageOff } from 'lucide-react'
import Image from 'next/image'
import { useCurrencyStore } from '@/store/currencyStore'
import { useWishlistStore } from '@/store/wishlistStore'
import { useCartStore } from '@/store/cartStore'

export default function WishlistGrid() {
  const formatAmount = useCurrencyStore((s) => s.formatAmount)
  const locale = useLocale()
  const t = useTranslations('Account.wishlist')
  const { items, loading, fetchWishlist, removeFromWishlist } = useWishlistStore()
  const { addToCart } = useCartStore()
  const [addingId, setAddingId] = useState<string | null>(null)

  useEffect(() => {
    fetchWishlist(locale)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [locale])

  const handleAddToCart = async (item: (typeof items)[number]) => {
    setAddingId(item.id)
    await addToCart(item.product_id, item.variant_id, 1, undefined, locale)
    setAddingId(null)
  }

  if (loading && items.length === 0) {
    return (
      <div className="text-center py-12">
        <div className="animate-spin w-8 h-8 border-4 border-primary border-t-transparent rounded-full mx-auto" />
      </div>
    )
  }

  if (items.length === 0) {
    return (
      <div className="text-center py-12">
        <Heart size={48} className="mx-auto text-gray-custom mb-3" />
        <h3 className="text-lg font-semibold text-dark mb-1">{t('empty')}</h3>
        <p className="text-gray-custom text-sm">{t('emptyDescription')}</p>
        <Link href="/" className="inline-block mt-4 text-primary hover:underline">
          {t('startShopping')} →
        </Link>
      </div>
    )
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {items.map((item) => (
        <div key={item.id} className="bg-white rounded-xl border border-gray-100 overflow-hidden hover:shadow-md transition-all">
          {item.slug ? (
            <Link href={`/product/${item.slug}`}>
              <div className="relative h-40 bg-gray-50">
                {item.image_url ? (
                  <Image src={item.image_url} alt={item.product_name} fill className="object-contain" sizes="300px" />
                ) : (
                  <div className="w-full h-full flex items-center justify-center">
                    <ImageOff size={32} className="text-gray-300" />
                  </div>
                )}
              </div>
            </Link>
          ) : (
            <div className="relative h-40 bg-gray-50 flex items-center justify-center">
              <ImageOff size={32} className="text-gray-300" />
            </div>
          )}
          <div className="p-4">
            {item.slug ? (
              <Link href={`/product/${item.slug}`}>
                <h3 className="font-semibold text-dark hover:text-primary transition">{item.product_name}</h3>
              </Link>
            ) : (
              <h3 className="font-semibold text-dark">{item.product_name}</h3>
            )}
            <div className="flex items-center gap-2 mt-2">
              <span className="text-lg font-bold text-primary">{formatAmount(item.unit_price)}</span>
            </div>
            {!item.in_stock && (
              <p className="text-xs text-red-500 mt-1">{t('outOfStock')}</p>
            )}
            <div className="flex gap-2 mt-4">
              <button
                disabled={!item.in_stock || addingId === item.id}
                onClick={() => handleAddToCart(item)}
                className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-lg text-sm font-medium transition ${
                  item.in_stock
                    ? 'bg-gradient-primary text-white hover:shadow-md disabled:opacity-70'
                    : 'bg-gray-100 text-gray-custom cursor-not-allowed'
                }`}
              >
                <ShoppingCart size={14} />
                {addingId === item.id ? t('adding') : t('addToCart')}
              </button>
              <button
                onClick={() => removeFromWishlist(item.id)}
                className="p-2 border border-gray-200 rounded-lg text-red-500 hover:bg-red-50 transition"
              >
                <Trash2 size={16} />
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}