// ---------------------------------------------------------------------------
// Fabri-Ka — Agrégateur de produits fabriqués au Québec
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/ProductHero.tsx : héro de la fiche — boutique (logo) · lieu, prix +
//   prix barré + fourchette, capsules (origine, solde, dispo), titre (H1) +
//   résumé, galerie (balayage natif, compteur, plein écran, vignettes ≥ 768),
//   actions (favoris · partager · Voir chez la boutique). Ordre DOM = visuel.
// ---------------------------------------------------------------------------
import { useEffect, useRef, useState } from 'react'
import { ProductDetail, formatPrice } from '../api'
import { Ico, IcoHeart } from '../components/KaIcons'
import OriginBadge from '../components/OriginBadge'
import StoreLogo from '../components/StoreLogo'
import { ligneResume, rabais } from './synthese'

function Lightbox({ images, start, titre, onClose }: { images: string[]; start: number; titre: string; onClose: () => void }) {
  const [idx, setIdx] = useState(start)
  const track = useRef<HTMLDivElement>(null)
  useEffect(() => {
    track.current?.scrollTo({ left: start * track.current.clientWidth })
    document.documentElement.classList.add('ka-scroll-lock')
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
      if (e.key === 'ArrowRight') go(1)
      if (e.key === 'ArrowLeft') go(-1)
    }
    window.addEventListener('keydown', onKey)
    return () => { document.documentElement.classList.remove('ka-scroll-lock'); window.removeEventListener('keydown', onKey) }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  const go = (d: number) => {
    const el = track.current; if (!el) return
    const i = Math.max(0, Math.min(images.length - 1, Math.round(el.scrollLeft / el.clientWidth) + d))
    el.scrollTo({ left: i * el.clientWidth, behavior: 'smooth' })
  }
  return (
    <div className="fb-lightbox" role="dialog" aria-modal="true" aria-label={`Images — ${titre}`}>
      <button type="button" className="fb-lightbox-close" aria-label="Fermer" onClick={onClose}><Ico name="close" size={20} /></button>
      <span className="fb-lightbox-count" aria-live="polite">{idx + 1} / {images.length}</span>
      <div className="fb-lightbox-track" ref={track} onScroll={() => { const el = track.current; if (el) setIdx(Math.round(el.scrollLeft / el.clientWidth)) }}>
        {images.map((u, i) => (
          <div className="fb-lightbox-cell" key={u}><img src={u} alt={`${titre} — image ${i + 1} de ${images.length}`} draggable={false} /></div>
        ))}
      </div>
      {idx > 0 && <button type="button" className="fb-gallery-nav prev" aria-label="Image précédente" onClick={() => go(-1)}><Ico name="chevleft" size={20} /></button>}
      {idx < images.length - 1 && <button type="button" className="fb-gallery-nav next" aria-label="Image suivante" onClick={() => go(1)}><Ico name="chevright" size={20} /></button>}
    </div>
  )
}

export function ProductGallery({ images, titre }: { images: string[]; titre: string }) {
  const [idx, setIdx] = useState(0)
  const [zoom, setZoom] = useState(false)
  const [dead, setDead] = useState<Set<string>>(new Set())
  const track = useRef<HTMLDivElement>(null)
  const alive = images.filter((u) => !dead.has(u))
  const cur = Math.min(idx, Math.max(0, alive.length - 1))
  const goto = (i: number) => track.current?.scrollTo({ left: i * track.current.clientWidth, behavior: 'smooth' })
  if (alive.length === 0)
    return <div className="fb-gallery fb-gallery-empty" aria-label="Images"><Ico name="store" size={44} /><span>Aucune image fournie par la boutique</span></div>
  return (
    <>
      <div className="fb-gallery packshot" aria-roledescription="carrousel" aria-label="Images du produit">
        <div className="fb-gallery-track" ref={track} onScroll={() => { const el = track.current; if (el) setIdx(Math.round(el.scrollLeft / el.clientWidth)) }}>
          {alive.map((u, i) => (
            <img key={u} src={u} loading={i === 0 ? 'eager' : 'lazy'} decoding="async" alt={`${titre} — image ${i + 1} de ${alive.length}`}
                 onError={() => setDead((d) => new Set(d).add(u))} onClick={() => setZoom(true)} />
          ))}
        </div>
        {alive.length > 1 && <span className="fb-gallery-count" aria-live="polite">{cur + 1} / {alive.length}</span>}
        <button type="button" className="fb-gallery-full" aria-label="Voir en plein écran" onClick={() => setZoom(true)}><Ico name="expand" size={17} /></button>
        {cur > 0 && <button type="button" className="fb-gallery-nav prev" aria-label="Image précédente" onClick={() => goto(cur - 1)}><Ico name="chevleft" size={20} /></button>}
        {cur < alive.length - 1 && <button type="button" className="fb-gallery-nav next" aria-label="Image suivante" onClick={() => goto(cur + 1)}><Ico name="chevright" size={20} /></button>}
      </div>
      {alive.length > 1 && (
        <div className="fb-thumbs" role="list">
          {alive.slice(0, 12).map((u, i) => (
            <button type="button" key={u} className={i === cur ? 'on' : ''} onClick={() => goto(i)} aria-label={`Image ${i + 1}`} aria-current={i === cur} role="listitem">
              <img src={u} alt="" loading="lazy" decoding="async" />
            </button>
          ))}
        </div>
      )}
      {zoom && <Lightbox images={alive} start={cur} titre={titre} onClose={() => setZoom(false)} />}
    </>
  )
}

export default function ProductHero({ p, fav, onFav, onShare, actionsRef }: {
  p: ProductDetail; fav: boolean; onFav: () => void; onShare: () => void; actionsRef: React.RefObject<HTMLDivElement>
}) {
  const r = rabais(p)
  const resume = ligneResume(p)
  return (
    <header className="fb-hero" aria-label="Résumé du produit">
      <div className="fb-kicker" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <StoreLogo storeId={p.store_id} name={p.store_name} size="sm" /> {p.store_name}{p.store_city || p.store_region ? ` — ${[p.store_city, p.store_region].filter(Boolean).join(', ')}` : ''}
      </div>
      <div className="fb-price">
        {p.price != null ? (
          <>
            {formatPrice(p.price, p.currency)}
            {p.price_max != null && p.price_max > p.price && <small>à {formatPrice(p.price_max, p.currency)}</small>}
            {r && <small style={{ textDecoration: 'line-through', opacity: 0.7 }}>{formatPrice(r.avant, p.currency)}</small>}
          </>
        ) : (
          <span style={{ fontSize: '0.62em', fontWeight: 600, color: 'var(--fb-text-2)' }}>{p.price_on_request ? 'Sur devis' : 'Prix affiché en boutique'}</span>
        )}
      </div>
      <div className="fb-price-row" style={{ marginTop: 8 }}>
        <span className="fb-capsule fb-capsule-origin"><OriginBadge origin={p.origin_class} withLabel /></span>
        {r && <span className="fb-capsule sale"><b>Solde</b>−{r.pct} %</span>}
        {!p.available && <span className="fb-capsule high">Non disponible</span>}
        {p.currency && p.currency !== 'CAD' && <span className="fb-capsule neutral">Devise {p.currency}</span>}
        {p.ka_reco && <span className="fb-capsule brand">Recommandé pour vous</span>}
      </div>
      <h1 className="fb-h1">
        {p.title}
        {resume.length > 0 && <span className="fb-city">{resume.join(' · ')}</span>}
      </h1>
      <ProductGallery images={p.images ?? []} titre={p.title} />
      <div className="fb-actions" ref={actionsRef}>
        <button type="button" className={`fb-btn fb-btn-ghost fb-btn-icon ${fav ? 'on' : ''}`} aria-pressed={fav}
                aria-label={fav ? 'Retirer des favoris' : 'Ajouter aux favoris'} onClick={onFav}><IcoHeart size={19} filled={fav} /></button>
        <button type="button" className="fb-btn fb-btn-ghost fb-btn-icon" aria-label="Partager" onClick={onShare}><Ico name="share" size={18} /></button>
        <a className="fb-btn fb-btn-primary" href={p.url} target="_blank" rel="noopener noreferrer">
          Voir chez {p.store_name} <Ico name="external" size={16} />
        </a>
      </div>
    </header>
  )
}