// ---------------------------------------------------------------------------
// Fabri-Ka — Agrégateur de produits fabriqués au Québec
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/ProductFacts.tsx : « Le produit » — grille icône/valeur (marque,
//   catégorie, type, origine, poids, dimensions, SKU), fiche technique
//   (attributs) en rangées, description tronquée, informations additionnelles
//   (matériaux, entretien…) en accordéons, étiquettes.
// ---------------------------------------------------------------------------
import { ReactNode, useState } from 'react'
import { CATEGORY_LABELS, ProductDetail, STORE_KIND_LABELS } from '../api'
import { Ico } from '../components/KaIcons'
import { Accordion, MoreButton, SectionCard } from './ui'
import { origineLabel } from './synthese'

export default function ProductFacts({ p }: { p: ProductDetail }) {
  const [open, setOpen] = useState(false)
  const det = p.details ?? {}
  const facts: { ico: ReactNode; v: string; l: string }[] = []
  if (p.vendor) facts.push({ ico: <Ico name="tag" size={17} />, v: p.vendor, l: 'Marque' })
  if (p.category) facts.push({ ico: <Ico name="layers" size={17} />, v: CATEGORY_LABELS[p.category] ?? p.category, l: 'Catégorie' })
  if (p.product_type) facts.push({ ico: <Ico name="store" size={17} />, v: p.product_type, l: 'Type' })
  if (origineLabel(p)) facts.push({ ico: <Ico name="pin" size={17} />, v: origineLabel(p), l: `Origine (classe ${p.origin_class})` })
  const poids = det.formatted_weight || (det.weight ? String(det.weight) : det.weight_grams ? `${det.weight_grams} g` : null)
  if (poids) facts.push({ ico: <Ico name="scale" size={17} />, v: poids, l: 'Poids' })
  const dims = det.formatted_dimensions || (det.dimensions ? [det.dimensions.length, det.dimensions.width, det.dimensions.height].filter(Boolean).join(' × ') : '')
  if (dims) facts.push({ ico: <Ico name="ruler" size={17} />, v: dims, l: 'Dimensions' })
  if (det.sku) facts.push({ ico: <Ico name="tag" size={17} />, v: det.sku, l: 'SKU' })
  if (det.model) facts.push({ ico: <Ico name="hammer" size={17} />, v: det.model, l: 'Modèle' })

  const rows: [string, string][] = []
  for (const a of det.attributes ?? []) if (a.name && a.terms?.length) rows.push([a.name, a.terms.join(', ')])
  if (det.gtin) rows.push(['Code (GTIN/MPN)', det.gtin])
  if (p.store_kind && STORE_KIND_LABELS[p.store_kind]) rows.push(['Type de boutique', STORE_KIND_LABELS[p.store_kind]])
  if (det.categories?.length) rows.push(['Rayons chez la boutique', det.categories.slice(0, 6).join(' · ')])
  if (det.published_at) rows.push(['Publié par la boutique', new Date(det.published_at).toLocaleDateString('fr-CA', { day: 'numeric', month: 'long', year: 'numeric' })])

  const texte = (p.description || '').trim()
  const long = texte.length > 420
  const infos = det.additional_info ?? []

  return (
    <SectionCard id="produit" title="Le produit">
      {facts.length > 0 && (
        <div className="fb-facts" role="list">
          {facts.map((x) => (
            <div className="fb-fact" role="listitem" key={x.l}>
              <span className="fb-fact-ico" aria-hidden="true">{x.ico}</span>
              <span className="fb-fact-txt"><div className="fb-fact-v" title={x.v}>{x.v}</div><div className="fb-fact-l">{x.l}</div></span>
            </div>
          ))}
        </div>
      )}
      {rows.length > 0 && (
        <div className="fb-facts-rows">
          {rows.map(([k, v]) => <div className="fb-kv" key={k}><span className="k">{k}</span><span className="v">{v}</span></div>)}
        </div>
      )}
      <h3 className="fb-card-sub fb-subtitle" id="description">Description</h3>
      {texte ? (
        <>
          <div className={`fb-desc ${long && !open ? 'clamped' : ''}`}><div className="fb-desc-body"><p>{texte}</p></div></div>
          {long && <MoreButton onClick={() => setOpen(!open)} expanded={open}>{open ? 'Réduire' : 'Lire la suite'}</MoreButton>}
        </>
      ) : <p className="fb-fine" style={{ marginTop: 0 }}>La boutique ne fournit pas de description pour ce produit.</p>}
      {infos.length > 0 && (
        <div style={{ marginTop: 10 }}>
          {infos.map((a) => <Accordion key={a.title} title={a.title} small><p style={{ whiteSpace: 'pre-line' }}>{a.description}</p></Accordion>)}
        </div>
      )}
      {p.tags.length > 0 && (
        <div className="fb-tags" style={{ marginTop: 12 }}>
          {p.tags.slice(0, 16).map((t) => <span className="fb-tag n" key={t}>{t}</span>)}
        </div>
      )}
    </SectionCard>
  )
}