import { useId } from 'react'
import { Pencil, Percent, Sparkles, Trash2 } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import {
  formatVariantCount,
  type StoreProductListing,
} from '../utils/storeProductGroups'
import { StoreItemPrice } from './StoreItemPrice'
import { Tooltip } from './Tooltip'
import styles from './StoreItemCard.module.css'

interface StoreItemCardProps {
  listing: StoreProductListing
  onOpen: (listing: StoreProductListing) => void
  onEdit: (listing: StoreProductListing) => void
  onDiscount: (listing: StoreProductListing) => void
  onFestival: (listing: StoreProductListing) => void
  onRemove: (listing: StoreProductListing) => void
  onAddToCart: (listing: StoreProductListing) => void
  removeTooltip?: string
}

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 StoreItemCard({
  listing,
  onOpen,
  onEdit,
  onDiscount,
  onFestival,
  onRemove,
  onAddToCart,
  removeTooltip,
}: StoreItemCardProps) {
  const t = useT()
  const { locale } = useLocale()
  const isFa = locale === 'fa'
  const plusGradientId = `add-cart-gradient-${useId().replace(/:/g, '')}`
  const removeLabel = removeTooltip ?? t('storeItems.card.remove')
  const primaryName = isFa
    ? listing.productNameFa || listing.productTitle
    : listing.productTitle
  const secondaryName = isFa
    ? listing.productNameFa
      ? listing.productTitle
      : ''
    : listing.productNameFa

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

        <div
          className={`${styles.body}${isFa ? '' : ` ${styles.bodyLtr}`}`}
          dir={isFa ? 'rtl' : 'ltr'}
        >
          {isFa ? (
            <>
              <h3 className={styles.nameFa}>{primaryName}</h3>
              {secondaryName ? <p className={styles.nameEn}>{secondaryName}</p> : null}
            </>
          ) : (
            <>
              <h3 className={styles.nameEnPrimary}>{primaryName}</h3>
              {secondaryName ? (
                <p className={styles.nameFaSecondary}>{secondaryName}</p>
              ) : null}
            </>
          )}
          <p className={styles.variantLabel}>
            {formatVariantCount(listing.variantCount, locale)}
          </p>
          <StoreItemPrice
            price={listing.displayPrice}
            discountedPrice={listing.displayDiscountedPrice}
          />
        </div>
      </button>

      <div className={styles.controls} onClick={(e) => e.stopPropagation()}>
        <div className={styles.controlsLeft}>
          <Tooltip label={t('storeItems.card.edit')}>
            <button
              type="button"
              onClick={() => onEdit(listing)}
              aria-label={t('storeItems.card.edit')}
            >
              <Pencil size={16} />
            </button>
          </Tooltip>
          <Tooltip label={t('storeItems.card.discount')}>
            <button
              type="button"
              onClick={() => onDiscount(listing)}
              aria-label={t('storeItems.card.discount')}
            >
              <Percent size={16} />
            </button>
          </Tooltip>
          <Tooltip label={t('storeItems.card.festivalPoints')}>
            <button
              type="button"
              className={listing.showFestival ? styles.festivalActive : undefined}
              onClick={() => onFestival(listing)}
              aria-label={t('storeItems.card.festivalPoints')}
            >
              <Sparkles size={16} />
            </button>
          </Tooltip>
          <Tooltip label={removeLabel}>
            <button
              type="button"
              className={styles.danger}
              onClick={() => onRemove(listing)}
              aria-label={removeLabel}
            >
              <Trash2 size={16} />
            </button>
          </Tooltip>
        </div>

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