"use client";

import Link from "./site-link";
import type { CatalogProduct } from "../lib/catalog";
import { categories } from "../lib/catalog";
import { useQuote } from "./quote-provider";
import { whatsappUrl } from "../lib/whatsapp";
import { PortalIcon, type PortalIconName } from "./portal-icon";

const icons: Record<string, PortalIconName> = { "fios-e-cabos": "cable", "protecao-e-disjuntores": "breaker", "infraestrutura-eletrica": "pipe", iluminacao: "light", "ferramentas-e-medicao": "tool", "quadros-e-caixas": "panel" };

export function ProductCard({ product }: { product: CatalogProduct }) {
  const { addItem, items } = useQuote();
  const category = categories.find((item) => item.slug === product.category);
  const quantity = items.find((item) => item.id === product.id)?.quantity ?? 0;

  return (
    <article className="product-card">
      <div className="product-card__visual" data-category={product.category}>
        <PortalIcon name={icons[product.category] ?? "list"} />
        <small>Exemplo de especificação</small>
      </div>
      <div className="product-card__body">
        <p className="eyebrow">{category?.shortName}</p>
        <h3>{product.name}</h3>
        <p>{product.description}</p>
        <ul className="spec-list" aria-label="Especificações principais">
          {product.specs.map((spec) => <li key={spec}>{spec}</li>)}
        </ul>
      </div>
      <div className="product-card__footer">
        <a className="button button--primary" data-cta={`produto_${product.id.replaceAll("-", "_")}`} href={whatsappUrl(`Olá, Portal! Quero consultar um material com esta especificação: ${product.name}. ${product.specs.join(" · ")}. Vi este exemplo no catálogo e gostaria de confirmar modelos, disponibilidade e condições.`)} target="_blank" rel="noopener noreferrer">Consultar no WhatsApp ↗</a>
        <button className="button button--dark" type="button" onClick={() => addItem(product)}>
          {quantity ? `Adicionar mais · ${quantity}` : "Adicionar à lista"}
        </button>
        {quantity > 0 && <Link className="product-card__review" href="/orcamento">Revisar minha lista →</Link>}
      </div>
    </article>
  );
}