import { useId } from 'react'
import { Trash2 } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import type { FavoriteListing } from '../services/favoritesService'
import { useT } from '../i18n/useT'
import { formatVariantCount } from '../utils/storeProductGroups'
import { StoreItemPrice } from './StoreItemPrice'
import { Tooltip } from './Tooltip'
import styles from './FavoriteStoreItemCard.module.css'

interface FavoriteStoreItemCardProps {
  listing: FavoriteListing
  onRemove: (listing: FavoriteListing) => void
  onAddToCart: (listing: FavoriteListing) => void
  removing?: boolean
}

function GradientPlusIcon({ gradientId }: { gradientId: string }) {
  return (
    <svg
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      className={styles.addToCartIcon}
    >
      <defs>
        <linearGradient
          id={gradientId}
          x1="4"
          y1="4"
          x2="20"
          y2="20"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#22c55e" />
          <stop offset="0.5" stopColor="var(--primary)" />
          <stop offset="1" stopColor="#a855f7" />
        </linearGradient>
      </defs>
      <path
        d="M12 5v14M5 12h14"
        stroke={`url(#${gradientId})`}
        strokeWidth="2.25"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

export function FavoriteStoreItemCard({
  listing,
  onRemove,
  onAddToCart,
  removing = false,
}: FavoriteStoreItemCardProps) {
  const t = useT()
  const { locale } = useLocale()
  const plusGradientId = `add-cart-gradient-${useId().replace(/:/g, '')}`

  return (
    <article className={styles.card}>
      <div className={styles.content}>
        <div className={styles.imageWrap}>
          {listing.productImage ? (
            <img
              src={listing.productImage}
              alt={listing.productTitle}
              className={styles.image}
              loading="lazy"
            />
          ) : (
            <div className={styles.imagePlaceholder} />
          )}
          {listing.showFestival && (
            <span className={styles.festivalBadge}>{t('favorites.festival')}</span>
          )}
          {listing.productTotalStock > 0 && (
            <span className={styles.stockBadge}>
              {t('favorites.inStock', { count: listing.productTotalStock })}
            </span>
          )}
        </div>

        <div className={styles.body}>
          <h3 className={styles.nameEn}>{listing.productTitle}</h3>
          {listing.productNameFa && <p className={styles.nameFa}>{listing.productNameFa}</p>}
          <p className={styles.variantLabel}>{formatVariantCount(listing.variantCount, locale)}</p>
          <StoreItemPrice
            price={listing.displayPrice}
            discountedPrice={listing.displayDiscountedPrice}
          />
        </div>
      </div>

      <div className={styles.controls}>
        <div className={styles.controlsLeft}>
          <Tooltip label={t('favorites.remove')}>
            <button
              type="button"
              className={styles.danger}
              onClick={() => onRemove(listing)}
              disabled={removing}
              aria-label={t('favorites.remove')}
            >
              <Trash2 size={16} />
            </button>
          </Tooltip>
        </div>

        <Tooltip label={t('favorites.addToCart')}>
          <button
            type="button"
            className={styles.addToCartBtn}
            onClick={() => onAddToCart(listing)}
            aria-label={t('favorites.addToCart')}
          >
            <GradientPlusIcon gradientId={plusGradientId} />
          </button>
        </Tooltip>
      </div>
    </article>
  )
}
