/**
 * =============================================================================
 * Job·Ka — Groupe KA
 * Auteur  : Simon-Pierre Boucher
 * Contact : contact@spboucher.ai
 * Fichier : frontend/src/fiche/JobFacts.tsx
 * Rôle    : « Le poste » — grille icône/valeur (mode, type, séniorité, langue,
 *           expérience, scolarité, catégorie, région), rangées (publiée, date
 *           limite, plateforme, lieu), avantages, description (tronquée),
 *           champs bruts des exigences en accordéon.
 * Créé    : 2026-09-07
 * =============================================================================
 */
import { ReactNode, useState } from "react";
import { Job, LANG_FR, MODE_FR, SENIORITY_FR, TYPE_FR, agoLabel, daysSince, formatDate } from "../api";
import { Ico } from "../components/Icons";
import { Accordion, MoreButton, SectionCard } from "./ui";

export default function JobFacts({ job }: { job: Job }) {
  const [open, setOpen] = useState(false);
  const r = job.requirements ?? {};
  const facts: { ico: ReactNode; v: string; l: string }[] = [];
  if (job.work_mode) facts.push({ ico: <Ico name="home" size={17} />, v: MODE_FR[job.work_mode] ?? job.work_mode, l: "Mode de travail" });
  if (job.employment_type) facts.push({ ico: <Ico name="calendar" size={17} />, v: TYPE_FR[job.employment_type] ?? job.employment_type, l: "Type d'emploi" });
  if (job.seniority) facts.push({ ico: <Ico name="layers" size={17} />, v: SENIORITY_FR[job.seniority] ?? job.seniority, l: "Niveau" });
  if (job.language) facts.push({ ico: <Ico name="book" size={17} />, v: LANG_FR[job.language] ?? job.language, l: "Langue de l'offre" });
  if (typeof r.experience_years === "number") facts.push({ ico: <Ico name="history" size={17} />, v: `${r.experience_years} an${r.experience_years > 1 ? "s" : ""} min.`, l: "Expérience exigée" });
  if (typeof r.education === "string" && r.education) facts.push({ ico: <Ico name="school" size={17} />, v: r.education, l: "Scolarité exigée" });
  if (Array.isArray(r.languages) && r.languages.length) facts.push({ ico: <Ico name="people" size={17} />, v: r.languages.length === 2 ? "Bilingue" : r.languages.join(", "), l: "Langues exigées" });
  if (job.category) facts.push({ ico: <Ico name="tag" size={17} />, v: job.category, l: "Catégorie" });
  if (job.region) facts.push({ ico: <Ico name="pin" size={17} />, v: job.region, l: "Région" });

  const days = daysSince(job.date_posted);
  const rows: [string, string][] = [];
  if (job.location_label || job.address) rows.push(["Lieu", job.location_label || [job.address, job.city].filter(Boolean).join(", ")]);
  if (job.date_posted) rows.push(["Publiée", `${formatDate(job.date_posted)}${days != null ? ` (${agoLabel(days)})` : ""}`]);
  if (job.date_deadline) rows.push(["Date limite", formatDate(job.date_deadline)]);
  if (job.ats) rows.push(["Plateforme de recrutement", job.ats]);
  const det = job.details ?? {};
  if (typeof det.industry === "string" && det.industry) rows.push(["Secteur", det.industry as string]);
  if (typeof det.employment_label === "string" && det.employment_label) rows.push(["Statut annoncé", det.employment_label as string]);

  const texte = (job.description || "").trim();
  const long = texte.length > 700;
  const bruts = Object.entries(r).filter(([k, v]) => !["experience_years", "education", "languages"].includes(k) && v != null && String(v).trim() && typeof v !== "object");

  return (
    <SectionCard id="poste" title="Le poste">
      {facts.length > 0 && (
        <div className="jk-facts" role="list">
          {facts.map((x) => (
            <div className="jk-fact" role="listitem" key={x.l}>
              <span className="jk-fact-ico" aria-hidden="true">{x.ico}</span>
              <span className="jk-fact-txt"><div className="jk-fact-v" title={x.v}>{x.v}</div><div className="jk-fact-l">{x.l}</div></span>
            </div>
          ))}
        </div>
      )}
      {rows.length > 0 && (
        <div className="jk-facts-rows">
          {rows.map(([k, v]) => <div className="jk-kv" key={k}><span className="k">{k}</span><span className="v">{v}</span></div>)}
        </div>
      )}
      {(job.benefits?.length ?? 0) > 0 && (
        <>
          <h3 className="jk-card-sub jk-subtitle" id="avantages">Avantages annoncés <small>· {job.benefits.length}</small></h3>
          <div className="jk-amen" role="list">
            {job.benefits.map((b) => (
              <div className="jk-amen-it" role="listitem" key={b}><span className="jk-amen-ico" aria-hidden="true"><Ico name="check" size={14} /></span><span className="jk-amen-txt">{b}</span></div>
            ))}
          </div>
        </>
      )}
      <h3 className="jk-card-sub jk-subtitle" id="description">Description du poste</h3>
      {texte ? (
        <>
          <div className={`jk-desc ${long && !open ? "clamped" : ""}`}><div className="jk-desc-body"><p>{texte}</p></div></div>
          {long && <MoreButton onClick={() => setOpen(!open)} expanded={open}>{open ? "Réduire" : "Lire la suite"}</MoreButton>}
        </>
      ) : <p className="jk-fine" style={{ marginTop: 0 }}>L'employeur ne fournit pas de description exploitable — consultez l'offre originale.</p>}
      {bruts.length > 0 && (
        <Accordion title="Autres champs publiés par l'employeur" meta={`${bruts.length}`}>
          <div className="jk-facts-rows" style={{ marginTop: 0 }}>
            {bruts.map(([k, v]) => <div className="jk-kv" key={k}><span className="k">{k}</span><span className="v">{String(v)}</span></div>)}
          </div>
        </Accordion>
      )}
    </SectionCard>
  );
}