// -----------------------------------------------------------------------------
// Auto-Ka — Agrégateur de voitures usagées à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/Closing.tsx : « En bref », CTA sticky mobile, aside desktop et
//   « Demander à Ka » (widget KA Agent partagé) de la fiche véhicule.
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { VehicleDetail, fmtPrice } from "../api";
import { Ico, IcoHeart } from "../components/Icons";
import BottomSheet from "./BottomSheet";
import { ScoreRing, kaLabel } from "./ScoreCard";
import { ComparaisonPrix, Constat } from "./synthese";
import { PriceCapsule } from "./VehicleHero";
import { SectionCard, SkeletonLines, relTime } from "./ui";

export function BriefList({ items, compact = false }: { items: Constat[]; compact?: boolean }) {
  const glyph = (t: Constat["tone"]) => (t === "good" ? "✓" : t === "bad" ? "✕" : t === "warn" ? "!" : "○");
  return (
    <ul className="ak-brief">
      {items.map((c) => (
        <li key={c.cle}>
          <span className={`ak-brief-ico ${c.tone === "info" ? "neutral" : c.tone}`} aria-hidden="true">{glyph(c.tone)}</span>
          <div><div className="ak-brief-t">{c.titre}</div>{!compact && c.detail && <div className="ak-brief-d">{c.detail}</div>}</div>
        </li>
      ))}
    </ul>
  );
}

export function Summary({ items, loading }: { items: Constat[]; loading: boolean }) {
  return (
    <SectionCard id="resume" title="En bref">
      {items.length > 0 ? <BriefList items={items} /> : loading ? <SkeletonLines n={3} /> : <p className="ak-fine">Pas encore de synthèse pour ce véhicule.</p>}
    </SectionCard>
  );
}

export function usePastElement(watch: React.RefObject<HTMLElement>): boolean {
  const [past, setPast] = useState(false);
  useEffect(() => {
    const check = () => { const el = watch.current; if (el) setPast(el.getBoundingClientRect().bottom < 0); };
    check();
    window.addEventListener("scroll", check, { passive: true });
    window.addEventListener("resize", check);
    return () => { window.removeEventListener("scroll", check); window.removeEventListener("resize", check); };
  }, [watch]);
  return past;
}

export function StickyCTA({ v, cmp, show }: { v: VehicleDetail; cmp: ComparaisonPrix | null; show: boolean }) {
  return (
    <div className={`ak-cta-bar ${show ? "show" : ""}`} aria-hidden={!show}>
      <div className="ak-cta-txt">
        <div className="ak-cta-price">{fmtPrice(v.price)}</div>
        {cmp && <div className={`ak-cta-sub ${cmp.tone === "good" ? "good" : ""}`}>{cmp.court}</div>}
      </div>
      <a className="ak-btn ak-btn-primary" href={v.url} target="_blank" rel="noreferrer" tabIndex={show ? 0 : -1}>Voir l'annonce <Ico name="external" size={15} /></a>
    </div>
  );
}

export function DesktopAside({ v, cmp, brief, fav, onFav, onShare }: {
  v: VehicleDetail; cmp: ComparaisonPrix | null; brief: Constat[]; fav: boolean; onFav: () => void; onShare: () => void;
}) {
  const maj = relTime(v.updated_at);
  const s = v.ka_score;
  return (
    <aside className="ak-aside" aria-label="Résumé et actions">
      <div className="ak-card ak-aside-card">
        <div>
          <div className="ak-price">{fmtPrice(v.price)}</div>
          <div className="ak-price-row" style={{ marginTop: 8 }}><PriceCapsule cmp={cmp} /></div>
        </div>
        <div className="ak-aside-addr">{v.title}<br />{[v.dealer_name || v.source, v.city].filter(Boolean).join(" · ")}</div>
        <a className="ak-btn ak-btn-primary" href={v.url} target="_blank" rel="noreferrer">Voir chez {v.dealer_name || "le concessionnaire"} <Ico name="external" size={16} /></a>
        <div className="ak-actions">
          <button type="button" className={`ak-btn ak-btn-ghost ${fav ? "on" : ""}`} style={{ flex: 1 }} aria-pressed={fav} onClick={onFav}><IcoHeart size={17} filled={fav} /> {fav ? "Favori" : "Favoris"}</button>
          <button type="button" className="ak-btn ak-btn-ghost" style={{ flex: 1 }} onClick={onShare}><Ico name="share" size={16} /> Partager</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={17} /></a>}
        </div>
        <button type="button" className="ak-btn ak-btn-ghost ak-ka-inline" onClick={() => window.dispatchEvent(new Event("ak:askka"))}><Ico name="sparkles" size={16} /> Demander à Ka</button>
        {(s || brief.length > 0) && <hr className="ak-aside-sep" />}
        {s && (
          <div className="ak-aside-score">
            <ScoreRing value={s.overall} size={56} />
            <div className="ak-aside-score-txt"><b>KA Score · {kaLabel(s.overall)}</b>{s.parts.map((p) => `${p.label.split(" ")[0]} ${p.score}`).join(" · ")}</div>
          </div>
        )}
        {brief.length > 0 && <BriefList items={brief.slice(0, 4)} compact />}
        {maj && <div className="ak-aside-meta">Vérifié {maj} · {v.dealer_name || v.source}</div>}
      </div>
    </aside>
  );
}

const SUGGESTIONS = ["Est-ce un bon prix ?", "Compare-le aux véhicules similaires", "Quels sont les points de vigilance ?", "Quel budget mensuel prévoir ?", "Y a-t-il des rappels connus ?"];
function envoyerAKa(question: string): boolean {
  const btn = document.querySelector<HTMLButtonElement>(".kaa-btn");
  const ta = document.querySelector<HTMLTextAreaElement>(".kaa-panel textarea");
  const send = document.querySelector<HTMLButtonElement>(".kaa-in button");
  if (!btn || !ta || !send) return false;
  btn.click(); ta.value = question; setTimeout(() => send.click(), 60);
  return true;
}
export function KaAssistant({ v, hidden }: { v: VehicleDetail; hidden?: boolean }) {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState("");
  const [err, setErr] = useState(false);
  useEffect(() => { const on = () => setOpen(true); window.addEventListener("ak:askka", on); return () => window.removeEventListener("ak:askka", on); }, []);
  const contexte = () => `(Véhicule consulté sur Auto-Ka : ${v.title}${v.mileage_km != null ? ` — ${Math.round(v.mileage_km).toLocaleString("fr-CA")} km` : ""}${v.price != null ? ` — ${fmtPrice(v.price)}` : ""} — ${v.dealer_name || v.source}${v.city ? `, ${v.city}` : ""} — https://www.auto-ka.com/vehicule/${encodeURIComponent(v.uid)})`;
  const poser = (question: string) => { const ok = envoyerAKa(`${question}\n\n${contexte()}`); if (ok) { setOpen(false); setQ(""); setErr(false); } else setErr(true); };
  return (
    <>
      <button type="button" className={`ak-ka-btn ${hidden ? "hide" : ""}`} onClick={() => setOpen(true)} aria-label="Demander à Ka, l'assistant Groupe KA"><Ico name="sparkles" size={16} /> Demander à Ka</button>
      <BottomSheet open={open} onClose={() => setOpen(false)} title="Demander à Ka" sub="Assistant Groupe KA · connaît cette fiche"
                   footer={<form className="ak-ka-in" onSubmit={(e) => { e.preventDefault(); if (q.trim()) poser(q.trim()); }}>
                     <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Posez votre question sur ce véhicule…" aria-label="Votre question" />
                     <button type="submit" aria-label="Envoyer" disabled={!q.trim()}><Ico name="chevright" size={20} /></button></form>}>
        <div className="ak-ka-intro"><span className="ak-ka-avatar" aria-hidden="true"><Ico name="sparkles" size={18} /></span>
          <p>Je peux situer ce prix dans le marché, expliquer le KA Score, résumer les rappels et chercher des alternatives chez d'autres concessionnaires.</p></div>
        <div className="ak-ka-ctx">{v.images?.[0] && <img src={v.images[0]} alt="" />}<span style={{ minWidth: 0 }}><b>{v.title}</b>{[v.dealer_name || v.source, v.price != null ? fmtPrice(v.price) : null, v.mileage_km != null ? `${Math.round(v.mileage_km).toLocaleString("fr-CA")} km` : null].filter(Boolean).join(" · ")}</span></div>
        <div className="ak-ka-sugs">{SUGGESTIONS.map((s) => <button type="button" className="ak-ka-sug" key={s} onClick={() => poser(s)}>{s} <Ico name="chevright" size={16} /></button>)}</div>
        {err && <p className="ak-note warn">L'assistant n'est pas encore chargé — réessayez dans un instant.</p>}
      </BottomSheet>
    </>
  );
}