import { Link } from 'react-router-dom'
import { Pencil, Info, Trash2, Layers, MessageSquare, ClipboardList } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import type { Product } from '../types/product'
import { useT } from '../i18n/useT'
import { Tooltip } from './Tooltip'
import styles from './ProductCard.module.css'

interface ProductCardProps {
  product: Product
  commentCount: number
  variantCount: number
  onEdit: (id: string) => void
  onQuickInfo: (id: string) => void
  onComments: (id: string) => void
  onTechnicalInfo: (id: string) => void
  onRemove: (id: string) => void
  onVariations: (id: string) => void
}

export function ProductCard({
  product,
  commentCount,
  variantCount,
  onEdit,
  onQuickInfo,
  onComments,
  onTechnicalInfo,
  onRemove,
  onVariations,
}: ProductCardProps) {
  const t = useT()
  const { locale } = useLocale()
  const isFa = locale === 'fa'
  const primaryName = isFa ? product.nameFa || product.nameEn : product.nameEn
  const secondaryName = isFa
    ? product.nameFa
      ? product.nameEn
      : ''
    : product.nameFa
  const categoryLabel = isFa ? product.categoryFa || product.category : product.category

  return (
    <article className={styles.card}>
      <Link to={`/products/detail/${product.id}`} className={styles.clickable}>
        <div className={styles.imageWrap}>
          <img
            src={product.image}
            alt={primaryName}
            className={styles.image}
            loading="lazy"
          />
          {product.status === 'draft' && (
            <span className={styles.badge}>{t('products.card.draft')}</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}
            </>
          )}
          {categoryLabel ? (
            <span className={styles.categoryChip}>{categoryLabel}</span>
          ) : null}
        </div>
      </Link>

      <div className={styles.controls}>
        <Tooltip label={t('products.card.edit')}>
          <button type="button" onClick={() => onEdit(product.id)} aria-label={t('products.card.edit')}>
            <Pencil size={16} />
          </button>
        </Tooltip>
        <Tooltip label={t('products.card.quickInfo')}>
          <button
            type="button"
            onClick={() => onQuickInfo(product.id)}
            aria-label={t('products.card.quickInfo')}
          >
            <Info size={16} />
          </button>
        </Tooltip>
        <Tooltip label={t('products.card.variations')}>
          <button
            type="button"
            className={styles.iconBtn}
            onClick={() => onVariations(product.id)}
            aria-label={`${t('products.card.variations')} (${variantCount})`}
          >
            <Layers size={16} />
            {variantCount > 0 && <span className={styles.variantBadge}>{variantCount}</span>}
          </button>
        </Tooltip>
        <Tooltip label={t('products.card.comments')}>
          <button
            type="button"
            className={styles.iconBtn}
            onClick={() => onComments(product.id)}
            aria-label={`${t('products.card.comments')} (${commentCount})`}
          >
            <MessageSquare size={16} />
            {commentCount > 0 && (
              <span className={styles.commentBadge}>{commentCount}</span>
            )}
          </button>
        </Tooltip>
        <Tooltip label={t('products.card.technical')}>
          <button
            type="button"
            onClick={() => onTechnicalInfo(product.id)}
            aria-label={t('products.card.technical')}
          >
            <ClipboardList size={16} />
          </button>
        </Tooltip>
        <Tooltip label={t('products.card.remove')}>
          <button
            type="button"
            className={styles.danger}
            onClick={() => onRemove(product.id)}
            aria-label={t('products.card.remove')}
          >
            <Trash2 size={16} />
          </button>
        </Tooltip>
      </div>
    </article>
  )
}
