// -----------------------------------------------------------------------------
// Auto-Ka — Agrégateur de voitures usagées à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/VehicleHero.tsx : héro de la fiche — concessionnaire · ville, prix +
//   ancien prix barré + capsule marché, titre (H1) + résumé (année · km ·
//   transmission · carburant · carrosserie), galerie photo (balayage natif,
//   compteur, plein écran via Lightbox existante, vignettes ≥ 768 px), actions
//   (favoris · partager · Carfax · Voir chez le concessionnaire).
// -----------------------------------------------------------------------------
import { useRef, useState } from "react";
import { VehicleDetail, fmtPrice } from "../api";
import { Ico, IcoHeart } from "../components/Icons";
import Lightbox from "../components/Lightbox";
import { ComparaisonPrix, ligneResume } from "./synthese";

export function PriceCapsule({ cmp, short = false }: { cmp: ComparaisonPrix | null; short?: boolean }) {
  if (!cmp) return null;
  return (
    <span className={`ak-capsule ${cmp.tone}`}>
      {short ? <b>{cmp.court}</b> : <><b>{cmp.label}</b><span aria-hidden="true">·</span>{cmp.court}</>}
    </span>
  );
}

export function VehicleGallery({ 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="ak-gallery ak-gallery-empty" aria-label="Photos"><Ico name="car" size={44} /><span>Aucune photo fournie par le concessionnaire</span></div>;
  return (
    <>
      <div className="ak-gallery" aria-roledescription="carrousel" aria-label="Photos du véhicule">
        <div className="ak-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 <= 1 ? "eager" : "lazy"} decoding="async" alt={`${titre} — photo ${i + 1} de ${alive.length}`}
                 onError={() => setDead((d) => new Set(d).add(u))} onClick={() => setZoom(true)} />
          ))}
        </div>
        <span className="ak-gallery-count" aria-live="polite">{cur + 1} / {alive.length}</span>
        <button type="button" className="ak-gallery-full" aria-label="Voir en plein écran" onClick={() => setZoom(true)}><Ico name="expand" size={17} /></button>
        {cur > 0 && <button type="button" className="ak-gallery-nav prev" aria-label="Photo précédente" onClick={() => goto(cur - 1)}><Ico name="chevleft" size={20} /></button>}
        {cur < alive.length - 1 && <button type="button" className="ak-gallery-nav next" aria-label="Photo suivante" onClick={() => goto(cur + 1)}><Ico name="chevright" size={20} /></button>}
      </div>
      {alive.length > 1 && (
        <div className="ak-thumbs" role="list">
          {alive.slice(0, 12).map((u, i) => (
            <button type="button" key={u} className={i === cur ? "on" : ""} onClick={() => goto(i)} aria-label={`Photo ${i + 1}`} aria-current={i === cur} role="listitem">
              <img src={u} alt="" loading="lazy" decoding="async" />
            </button>
          ))}
        </div>
      )}
      {zoom && <Lightbox images={alive} index={cur} onIndex={(i) => { setIdx(i); goto(i); }} onClose={() => setZoom(false)} alt={titre} />}
    </>
  );
}

export default function VehicleHero({ v, cmp, fav, onFav, onShare, actionsRef }: {
  v: VehicleDetail; cmp: ComparaisonPrix | null; fav: boolean;
  onFav: () => void; onShare: () => void; actionsRef: React.RefObject<HTMLDivElement>;
}) {
  const resume = ligneResume(v);
  const hist = (v.price_history ?? []).filter((h) => h.price != null);
  const avant = hist.length >= 2 && hist[0].price! < hist[1].price! ? hist[1].price! : null;
  return (
    <header className="ak-hero" aria-label="Résumé du véhicule">
      <div className="ak-kicker">{v.dealer_name || v.source}{v.city ? ` — ${v.city}` : ""}{v.region ? ` · ${v.region}` : ""}</div>
      <div className="ak-price">
        {fmtPrice(v.price)}
        {avant != null && <small style={{ textDecoration: "line-through", opacity: 0.7 }}>{fmtPrice(avant)}</small>}
        {v.details?.price_from ? <small>à partir de</small> : null}
      </div>
      <div className="ak-price-row" style={{ marginTop: 8 }}>
        <PriceCapsule cmp={cmp} />
        {v.year != null && <span className="ak-capsule neutral">{v.year}</span>}
        {v.ka_reco && <span className="ak-capsule brand">Recommandé pour vous</span>}
      </div>
      <h1 className="ak-h1">
        {v.title}
        {resume.length > 0 && <span className="ak-city">{resume.join(" · ")}</span>}
      </h1>
      <VehicleGallery images={v.images ?? []} titre={v.title} />
      <div className="ak-actions" ref={actionsRef}>
        <button type="button" className={`ak-btn ak-btn-ghost ak-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="ak-btn ak-btn-ghost ak-btn-icon" aria-label="Partager" onClick={onShare}><Ico name="share" size={18} /></button>
        {v.carfax_url && <a className="ak-btn ak-btn-ghost ak-btn-icon" aria-label="Rapport Carfax" title="Rapport Carfax" href={v.carfax_url} target="_blank" rel="noreferrer"><Ico name="doc" size={18} /></a>}
        <a className="ak-btn ak-btn-primary" href={v.url} target="_blank" rel="noreferrer">
          Voir l'annonce <Ico name="external" size={16} />
          <span className="visually-hidden"> chez {v.dealer_name || "le concessionnaire"}</span>
        </a>
      </div>
    </header>
  );
}