import { Link } from 'react-router-dom'
import { Pencil, Info, Trash2, Layers, MessageSquare, ClipboardList } from 'lucide-react'
import type { Product } from '../types/product'
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) {
  return (
    <article className={styles.card}>
      <Link to={`/products/detail/${product.id}`} className={styles.clickable}>
        <div className={styles.imageWrap}>
          <img src={product.image} alt={product.nameEn} className={styles.image} loading="lazy" />
          {product.status === 'draft' && <span className={styles.badge}>Draft</span>}
        </div>

        <div className={styles.body}>
          <h3 className={styles.nameEn}>{product.nameEn}</h3>
          <p className={styles.nameFa}>{product.nameFa}</p>
          <span className={styles.categoryChip}>{product.category}</span>
        </div>
      </Link>

      <div className={styles.controls}>
        <Tooltip label="Edit product">
          <button type="button" onClick={() => onEdit(product.id)} aria-label="Edit">
            <Pencil size={16} />
          </button>
        </Tooltip>
        <Tooltip label="Quick info">
          <button type="button" onClick={() => onQuickInfo(product.id)} aria-label="Quick info">
            <Info size={16} />
          </button>
        </Tooltip>
        <Tooltip label="Manage variations">
          <button
            type="button"
            className={styles.iconBtn}
            onClick={() => onVariations(product.id)}
            aria-label={`Variations (${variantCount})`}
          >
            <Layers size={16} />
            {variantCount > 0 && <span className={styles.variantBadge}>{variantCount}</span>}
          </button>
        </Tooltip>
        <Tooltip label="View comments">
          <button
            type="button"
            className={styles.iconBtn}
            onClick={() => onComments(product.id)}
            aria-label={`Comments (${commentCount})`}
          >
            <MessageSquare size={16} />
            {commentCount > 0 && (
              <span className={styles.commentBadge}>{commentCount}</span>
            )}
          </button>
        </Tooltip>
        <Tooltip label="Technical data">
          <button
            type="button"
            onClick={() => onTechnicalInfo(product.id)}
            aria-label="Technical data"
          >
            <ClipboardList size={16} />
          </button>
        </Tooltip>
        <Tooltip label="Remove product">
          <button
            type="button"
            className={styles.danger}
            onClick={() => onRemove(product.id)}
            aria-label="Remove"
          >
            <Trash2 size={16} />
          </button>
        </Tooltip>
      </div>
    </article>
  )
}
