// -----------------------------------------------------------------------------
// Auto-Ka — Agrégateur de voitures usagées à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/VehicleFacts.tsx : « Le véhicule » — grille icône/valeur (année, km,
//   transmission, carburant, motricité, carrosserie, moteur, portes, places,
//   consommation), rangées (couleurs, NIV, stock, concessionnaire), description
//   du concessionnaire (tronquée), équipements (12 + « Voir les N »), fiche
//   constructeur décodée du NIV en accordéon.
// -----------------------------------------------------------------------------
import { ReactNode, useState } from "react";
import { VehicleDetail, fmtKm } from "../api";
import { Ico } from "../components/Icons";
import { Accordion, MoreButton, SectionCard, NBSP } from "./ui";

export default function VehicleFacts({ v }: { v: VehicleDetail }) {
  const [descOpen, setDescOpen] = useState(false);
  const [allFeat, setAllFeat] = useState(false);
  const d = (v.details ?? {}) as Record<string, unknown>;
  const facts: { ico: ReactNode; v: string; l: string }[] = [];
  if (v.year) facts.push({ ico: <Ico name="calendar" size={17} />, v: String(v.year), l: "Année" });
  if (v.mileage_km != null) facts.push({ ico: <Ico name="trendup" size={17} />, v: fmtKm(v.mileage_km), l: "Kilométrage" });
  if (v.transmission) facts.push({ ico: <Ico name="layers" size={17} />, v: v.transmission, l: "Transmission" });
  if (v.fuel) facts.push({ ico: <Ico name="fuel" size={17} />, v: v.fuel, l: "Carburant" });
  if (v.drivetrain) facts.push({ ico: <Ico name="car" size={17} />, v: v.drivetrain, l: "Motricité" });
  if (v.body_type) facts.push({ ico: <Ico name="car" size={17} />, v: v.body_type, l: "Carrosserie" });
  if (v.engine) facts.push({ ico: <Ico name="hammer" size={17} />, v: v.engine, l: "Moteur" });
  if (v.doors) facts.push({ ico: <Ico name="home" size={17} />, v: String(v.doors), l: "Portes" });
  if (v.seats) facts.push({ ico: <Ico name="people" size={17} />, v: String(v.seats), l: "Places" });
  const city = d.fuel_city_l_100km, hwy = d.fuel_hwy_l_100km;
  if (city || hwy) facts.push({ ico: <Ico name="drop" size={17} />, v: `${city ?? "—"} / ${hwy ?? "—"}`, l: "L/100 km ville / route" });

  const rows: [string, ReactNode][] = [];
  if (v.trim) rows.push(["Version", v.trim]);
  if (v.exterior_color) rows.push(["Couleur extérieure", v.exterior_color]);
  if (v.interior_color) rows.push(["Couleur intérieure", v.interior_color]);
  if (v.vin) rows.push(["NIV (VIN)", <span style={{ fontFamily: "var(--font-mono)", fontSize: 12.5 }}>{v.vin}</span>]);
  if (v.stock_number) rows.push(["Nº de stock", v.stock_number]);
  rows.push(["Concessionnaire", `${v.dealer_name || v.source}${v.city ? ` · ${v.city}` : ""}`]);

  const texte = (v.description || "").trim();
  const long = texte.length > 420;
  const feats = v.features ?? [];
  const LIMIT = 12;
  const vin = v.vin_info && Object.keys(v.vin_info).length > 0 ? Object.entries(v.vin_info) : [];

  return (
    <SectionCard id="vehicule" title="Le véhicule">
      <div className="ak-facts" role="list">
        {facts.map((x) => (
          <div className="ak-fact" role="listitem" key={x.l}>
            <span className="ak-fact-ico" aria-hidden="true">{x.ico}</span>
            <span className="ak-fact-txt"><div className="ak-fact-v" title={x.v}>{x.v}</div><div className="ak-fact-l">{x.l}</div></span>
          </div>
        ))}
      </div>
      <div className="ak-facts-rows">
        {rows.map(([k, val]) => <div className="ak-kv" key={k}><span className="k">{k}</span><span className="v">{val}</span></div>)}
      </div>
      <h3 className="ak-card-sub ak-subtitle" id="description">Description du concessionnaire</h3>
      {texte ? (
        <>
          <div className={`ak-desc ${long && !descOpen ? "clamped" : ""}`}><div className="ak-desc-body"><p>{texte}</p></div></div>
          {long && <MoreButton onClick={() => setDescOpen(!descOpen)} expanded={descOpen}>{descOpen ? "Réduire" : "Lire la suite"}</MoreButton>}
        </>
      ) : <p className="ak-fine" style={{ marginTop: 0 }}>Le concessionnaire ne fournit pas de description pour cette annonce.</p>}
      {feats.length > 0 && (
        <>
          <h3 className="ak-card-sub ak-subtitle" id="equipements">Équipements <small>· {feats.length}</small></h3>
          <div className="ak-amen" role="list">
            {(allFeat ? feats : feats.slice(0, LIMIT)).map((f) => (
              <div className="ak-amen-it" role="listitem" key={f}><span className="ak-amen-ico" aria-hidden="true"><Ico name="check" size={14} /></span><span className="ak-amen-txt">{f}</span></div>
            ))}
          </div>
          {feats.length > LIMIT && <MoreButton onClick={() => setAllFeat(!allFeat)} expanded={allFeat}>{allFeat ? "Réduire" : `Voir les ${feats.length} équipements`}</MoreButton>}
        </>
      )}
      {vin.length > 0 && (
        <Accordion title="Fiche constructeur (décodée du NIV)" meta={`${vin.length} champs`}>
          <div className="ak-facts-rows" style={{ marginTop: 0 }}>
            {vin.map(([k, val]) => <div className="ak-kv" key={k}><span className="k">{k}</span><span className="v">{val}</span></div>)}
          </div>
          <p className="ak-fine">Décodé du NIV — base vPIC (NHTSA). Les données constructeur peuvent différer de la version canadienne.{NBSP}</p>
        </Accordion>
      )}
    </SectionCard>
  );
}