// -----------------------------------------------------------------------------
// Auto-Ka — Agrégateur de voitures usagées à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/ContextCards.tsx : cartes de contexte —
//   · RecallsCard : rappels Transports Canada (3 visibles + « Voir les N ») ;
//   · OffersCard : le même véhicule (même NIV) chez d'autres sources ;
//   · LocationCard : carte OpenStreetMap (position approximative du vendeur) ;
//   · SimilarCard : véhicules similaires (cartes de la grille) ;
//   · Dossier : suivi Auto-Ka, concessionnaire, identifiants ;
//   · Sources : sources et méthodologie + rangée d'actions.
// -----------------------------------------------------------------------------
import { useMemo, useState } from "react";
import { Recall, VehicleDetail, fmtDate, fmtPrice, sourceName } from "../api";
import { Ico } from "../components/Icons";
import VehicleCard from "../components/VehicleCard";
import { Accordion, ErrorState, MoreButton, SectionCard, SkeletonLines, SourceLine, StatTile, StatusBadge, relTime } from "./ui";
import { Res } from "./useFicheData";

export function RecallsCard({ v, r, onRetry }: { v: VehicleDetail; r: Res<Recall[]>; onRetry: () => void }) {
  const [all, setAll] = useState(false);
  if (r.status === "na" || r.status === "idle") return null;
  const items = r.status === "ok" ? r.data : null;
  return (
    <SectionCard id="rappels" title="Rappels Transports Canada" icon={<Ico name="shield" size={18} />}
                 aside={items && <StatusBadge tone={items.length ? "warn" : "good"} lg>{items.length ? `${items.length} rappel${items.length > 1 ? "s" : ""}` : "Aucun rappel"}</StatusBadge>}>
      {r.status === "loading" && <SkeletonLines n={2} />}
      {r.status === "error" && <ErrorState onRetry={onRetry}>Base des rappels temporairement indisponible.</ErrorState>}
      {items && items.length === 0 && <p className="ak-status-d" style={{ margin: 0 }}>Aucun rappel de sécurité répertorié pour {v.make} {v.model}{v.year ? ` ${v.year}` : ""}.</p>}
      {items && items.length > 0 && (
        <>
          <p className="ak-status-d" style={{ marginTop: 0 }}>Rappels visant {v.make} {v.model}{v.year ? ` ${v.year}` : ""} — un rappel concerne le modèle, pas forcément cet exemplaire ; vérifiez auprès du concessionnaire qu'ils ont été effectués.</p>
          {(all ? items : items.slice(0, 3)).map((x) => (
            <Accordion key={x.recall_number} small title={<><span style={{ fontFamily: "var(--font-mono)", color: "var(--ak-muted)", marginRight: 8 }}>{x.date}</span>{x.component}</>}>
              <p style={{ whiteSpace: "pre-line" }}>{x.description}</p>
              <p className="ak-fine">Rappel nº {x.recall_number}{x.units_affected ? ` · ${x.units_affected.toLocaleString("fr-CA")} unités visées` : ""}</p>
            </Accordion>
          ))}
          {items.length > 3 && <MoreButton onClick={() => setAll(!all)} expanded={all}>{all ? "Réduire" : `Voir les ${items.length} rappels`}</MoreButton>}
        </>
      )}
      <SourceLine name="Transports Canada" href="https://tc.canada.ca/fr/transport-routier/rappels-securite-defauts" date="base des rappels de sécurité" />
    </SectionCard>
  );
}

export function OffersCard({ v }: { v: VehicleDetail }) {
  const offers = v.dup_sources ?? [];
  if (offers.length === 0) return null;
  return (
    <SectionCard id="offres" title="Le même véhicule ailleurs" icon={<Ico name="layers" size={18} />}
                 sub={`Même NIV repéré sur ${offers.length} autre${offers.length > 1 ? "s" : ""} site${offers.length > 1 ? "s" : ""} (dédoublonnage Auto-Ka)`}>
      <ul className="ak-list">
        {offers.map((o) => {
          const delta = o.price != null && v.price != null ? o.price - v.price : null;
          return (
            <li className="ak-item" key={o.uid}>
              <span className="ak-item-ico" aria-hidden="true"><Ico name="store" size={17} /></span>
              <div className="ak-item-main">
                <div className="ak-item-t">{o.dealer_name || sourceName(o.source)}</div>
                <div className="ak-item-s">{[o.city, sourceName(o.source)].filter(Boolean).join(" · ")}</div>
              </div>
              <div className="ak-item-r">
                <div className="ak-item-v">{fmtPrice(o.price)}</div>
                <div className={`ak-item-m ${delta != null && delta < 0 ? "good" : ""}`} style={delta != null && delta < 0 ? { color: "var(--ak-success)", fontWeight: 600 } : undefined}>
                  {delta == null || delta === 0 ? <a className="ak-link" href={o.url} target="_blank" rel="noreferrer">Voir ↗</a> : `${delta < 0 ? "−" : "+"}${Math.abs(delta).toLocaleString("fr-CA")} $`}
                </div>
              </div>
            </li>
          );
        })}
      </ul>
    </SectionCard>
  );
}

export function LocationCard({ v }: { v: VehicleDetail }) {
  const src = useMemo(() => {
    if (v.lat == null || v.lng == null) return null;
    const d = 0.02;
    const bbox = [v.lng - d, v.lat - d, v.lng + d, v.lat + d].join(",");
    return `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${v.lat},${v.lng}`;
  }, [v.lat, v.lng]);
  if (!src) return null;
  return (
    <SectionCard id="carte" title="Où le voir" icon={<Ico name="pin" size={18} />} sub={`${[v.dealer_name, v.city, v.region].filter(Boolean).join(" · ")} — position approximative (ville du vendeur)`}>
      <div className="ak-map"><iframe className="ak-map-embed" src={src} title={`Carte — ${v.dealer_name || v.city}`} loading="lazy" /></div>
      <SourceLine name="OpenStreetMap" href="https://www.openstreetmap.org" />
    </SectionCard>
  );
}

export function SimilarCard({ v }: { v: VehicleDetail }) {
  if (!v.similar || v.similar.length === 0) return null;
  return (
    <SectionCard id="similaires" title={`${v.make} ${v.model.split(" ")[0]} similaires`} icon={<Ico name="car" size={18} />} sub="En vente au Québec, du moins cher au plus cher">
      <div className="ak-similar vgrid">{v.similar.slice(0, 6).map((s) => <VehicleCard key={s.uid} v={s} />)}</div>
    </SectionCard>
  );
}

export function Dossier({ v }: { v: VehicleDetail }) {
  const jours = v.first_seen ? Math.max(0, Math.round((Date.now() / 1000 - v.first_seen) / 86400)) : null;
  const hist = (v.price_history ?? []).filter((h) => h.price != null);
  const site = typeof v.details?.dealer_site === "string" ? (v.details.dealer_site as string) : null;
  return (
    <SectionCard id="dossier" title="Dossier de l'annonce" icon={<Ico name="folder" size={18} />} sub="Ce qu'Auto-Ka observe réellement : suivi, concessionnaire, identifiants">
      <Accordion title={<><Ico name="history" size={15} className="ak-acc-ico" />Suivi Auto-Ka</>} meta={jours != null ? (jours === 0 ? "arrivé aujourd'hui" : `${jours} j en vente`) : undefined}>
        <div className="ak-kpis cols-3" style={{ marginBottom: 10 }}>
          <StatTile value={fmtDate(v.first_seen)} label="Repéré le" anim={false} />
          <StatTile value={fmtDate(v.updated_at)} label="Vérifié le" anim={false} />
          <StatTile value={Math.max(0, hist.length - 1)} label="Changement(s) de prix" anim={false} />
        </div>
        <p className="ak-fine">Statut : {v.active ? "en vente chez le concessionnaire" : "retiré / vendu"}. Première observation et variations sont mesurées par les synchronisations Auto-Ka (plusieurs fois par jour).</p>
      </Accordion>
      <Accordion title={<><Ico name="store" size={15} className="ak-acc-ico" />Concessionnaire</>} meta={v.dealer_name || sourceName(v.source)}>
        <p style={{ margin: "0 0 6px" }}><b style={{ fontSize: 15 }}>{v.dealer_name || sourceName(v.source)}</b>{v.city ? ` — ${v.city}${v.region ? `, ${v.region}` : ""}` : ""}</p>
        <p style={{ margin: 0 }}>Source : {sourceName(v.source)}{site && <> · <a href={site} target="_blank" rel="noreferrer">site du concessionnaire ↗</a></>}. Auto-Ka est un agrégateur indépendant : prix, disponibilité et transaction relèvent du vendeur.</p>
      </Accordion>
      <Accordion title={<><Ico name="tag" size={15} className="ak-acc-ico" />Identifiants</>} meta={v.vin || v.external_id}>
        <div className="ak-facts-rows" style={{ marginTop: 0 }}>
          {v.vin && <div className="ak-kv"><span className="k">NIV (VIN)</span><span className="v" style={{ fontFamily: "var(--font-mono)", fontSize: 12.5 }}>{v.vin}</span></div>}
          {v.stock_number && <div className="ak-kv"><span className="k">Nº de stock</span><span className="v">{v.stock_number}</span></div>}
          <div className="ak-kv"><span className="k">Identifiant source</span><span className="v">{v.external_id}</span></div>
          <div className="ak-kv"><span className="k">Identifiant Auto-Ka</span><span className="v">{v.uid}</span></div>
          <div className="ak-kv"><span className="k">Annonce originale</span><span className="v"><a href={v.url} target="_blank" rel="noreferrer">{sourceName(v.source)} ↗</a></span></div>
        </div>
      </Accordion>
    </SectionCard>
  );
}

export function Sources({ v, onShare }: { v: VehicleDetail; onShare: () => void }) {
  const maj = relTime(v.updated_at);
  const srcs = [
    { n: v.dealer_name || sourceName(v.source), r: "Annonce, prix, photos, équipements et description (source originale)", d: maj ?? undefined, href: v.url },
    { n: "Transports Canada", r: "Rappels de sécurité visant le modèle", href: "https://tc.canada.ca/fr/transport-routier/rappels-securite-defauts" },
    { n: "NHTSA (vPIC)", r: "Fiche constructeur décodée du NIV" },
    ...(v.carfax_url ? [{ n: "Carfax", r: "Rapport d'historique du véhicule (lien du concessionnaire)", href: v.carfax_url }] : []),
    { n: "OpenStreetMap", r: "Carte de localisation du vendeur" },
    { n: "Auto-Ka", r: "Analyse de marché, KA Score, dédoublonnage NIV, suivi des prix — calculs maison, indicatifs" },
  ];
  return (
    <SectionCard id="sources" title="Sources et méthodologie" icon={<Ico name="folder" size={18} />} sub="Chaque donnée de cette fiche renvoie à sa source ; les calculs Auto-Ka sont indicatifs et documentés">
      <ul className="ak-sources">
        {srcs.map((s) => (
          <li key={s.n}>
            <span className="n">{s.href ? <a href={s.href} target="_blank" rel="noreferrer">{s.n}</a> : s.n}</span>
            {s.d && <span className="d">{s.d}</span>}
            <span className="r">{s.r}</span>
          </li>
        ))}
      </ul>
      <div className="ak-end" style={{ marginTop: 14 }}>
        <a href="/sources"><Ico name="folder" size={18} />Concessionnaires et sources<small>Toutes les sources Auto-Ka</small></a>
        <a href={`/contact?sujet=${encodeURIComponent(`Erreur sur la fiche ${v.uid}`)}`}><Ico name="alert" size={18} />Signaler une erreur<small>Prix, photos, kilométrage…</small></a>
        <button type="button" onClick={onShare}><Ico name="share" size={18} />Partager ce véhicule<small>Lien de la fiche</small></button>
        <a href="/stats"><Ico name="chart" size={18} />Statistiques du marché<small>Prix, régions, marques</small></a>
      </div>
      <p className="ak-fine" style={{ marginTop: 12 }}>Les prix et disponibilités sont ceux affichés par le concessionnaire — chaque fiche renvoie à l'annonce originale. Auto-Ka est un agrégateur indépendant.</p>
    </SectionCard>
  );
}