/**
 * =============================================================================
 * Job·Ka — Groupe KA
 * Auteur  : Simon-Pierre Boucher
 * Contact : contact@spboucher.ai
 * Fichier : frontend/src/pages/Job.tsx
 * Rôle    : Fiche d'une offre — refonte premium 2026-09-07 (même socle que
 *           les fiches Lou-Ka v3 / Immo-Ka v3). Ordre DOM = ordre visuel,
 *           identique mobile ET desktop (aucun `order`) : héro (employeur ·
 *           salaire · capsules · titre · actions) → En bref → navigation
 *           sticky → Salaire et marché → Le poste (+ avantages, description) →
 *           Où travailler → Dossier → Sources. Desktop ≥ 1024 px : colonne
 *           principale + aside sticky. Aucun scrollIntoView à l'ouverture.
 * Créé    : 2026-08-17   Modifié : 2026-09-07
 * =============================================================================
 */
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { Job, displayTitle, fetchJob, formatSalary } from "../api";
import { Ico } from "../components/Icons";
import { jobFavItem, useFav } from "../favorites";
import "../fiche/fiche.css";
import { setCurrentListing } from "../fiche/current";
import { comparaisonSalaire, enBref } from "../fiche/synthese";
import JobHero from "../fiche/JobHero";
import SectionNav, { NavItem } from "../fiche/SectionNav";
import SalaryCard from "../fiche/SalaryCard";
import JobFacts from "../fiche/JobFacts";
import { DesktopAside, Dossier, KaAssistant, LocationCard, Sources, StickyCTA, Summary, usePastElement } from "../fiche/Closing";
import { Skeleton, useToast } from "../fiche/ui";

function FicheSkeleton() {
  return (
    <div className="jk-fiche"><div className="jk-wrap" aria-busy="true" aria-label="Chargement de la fiche">
      <Skeleton h={14} w={180} /><div style={{ height: 10 }} />
      <Skeleton h={38} w={260} /><div style={{ height: 10 }} />
      <Skeleton h={22} w="80%" /><div style={{ height: 14 }} /><Skeleton h={46} /><div style={{ height: 14 }} />
      <div className="jk-card"><Skeleton h={14} /><div style={{ height: 8 }} /><Skeleton h={14} w="80%" /><div style={{ height: 8 }} /><Skeleton h={14} w="60%" /></div>
    </div></div>
  );
}

export default function JobPage() {
  const { uid = "" } = useParams();
  const [job, setJob] = useState<Job | null>(null);
  const [error, setError] = useState("");
  const { ids, toggle, connected } = useFav();
  const [toast, showToast] = useToast();
  const actionsRef = useRef<HTMLDivElement>(null);
  const pastHero = usePastElement(actionsRef);

  useEffect(() => {
    setJob(null); setError(""); setCurrentListing(null);
    fetchJob(uid).then((j) => { setJob(j); setCurrentListing(j); }).catch((e) => setError(String(e)));
    window.scrollTo(0, 0);
    return () => setCurrentListing(null);
  }, [uid]);
  useEffect(() => { document.body.classList.add("jk-fiche-page"); return () => document.body.classList.remove("jk-fiche-page"); }, []);
  useEffect(() => { if (job) document.title = `${displayTitle(job)} — ${job.employer}${formatSalary(job) ? ` · ${formatSalary(job)}` : ""} | Job·Ka`; }, [job]);

  const fav = !!(job && ids.has(job.uid));
  const onFav = useCallback(() => {
    if (!job) return;
    toggle(jobFavItem(job));
    if (connected) showToast(fav ? "Retiré des favoris" : "Ajouté à vos favoris");
  }, [job, toggle, connected, fav, showToast]);
  const onShare = useCallback(async () => {
    if (!job) return;
    const url = `https://www.job-ka.com/emploi/${encodeURIComponent(job.uid)}`;
    try {
      if (navigator.share) { await navigator.share({ title: `${displayTitle(job)} — ${job.employer} | Job·Ka`, url }); return; }
      await navigator.clipboard.writeText(url); showToast("Lien copié");
    } catch { /* annulé */ }
  }, [job, showToast]);

  const cmp = useMemo(() => (job ? comparaisonSalaire(job) : null), [job]);
  const brief = useMemo(() => (job ? enBref(job) : []), [job]);

  if (error)
    return (
      <div className="jk-fiche"><div className="jk-page-error">
        <Ico name="alert" size={40} />
        <h2>Offre introuvable</h2>
        <p>Cette offre n'existe pas ou a été retirée par l'employeur.</p>
        <Link className="jk-btn jk-btn-primary" to="/">Retour aux offres</Link>
      </div></div>
    );
  if (!job) return <FicheSkeleton />;

  const geo = job.lat != null && job.lng != null;
  const nav: NavItem[] = [
    { id: "resume", label: "Résumé" },
    ...(formatSalary(job) || job.salary_context ? [{ id: "salaire", label: "Salaire" }] : []),
    { id: "poste", label: "Poste" },
    ...(job.benefits?.length ? [{ id: "avantages", label: "Avantages" }] : []),
    { id: "description", label: "Description" },
    ...(geo ? [{ id: "carte", label: "Carte" }] : []),
    { id: "dossier", label: "Dossier" }, { id: "sources", label: "Sources" },
  ];

  return (
    <div className="jk-fiche">
      <div className="jk-wrap">
        <nav className="jk-crumbs" aria-label="Fil d'Ariane">
          <Link to="/">Offres</Link><span aria-hidden="true">›</span>
          {job.city && <><Link to={`/ville/${encodeURIComponent(job.city)}`}>{job.city}</Link><span aria-hidden="true">›</span></>}
          <span>{displayTitle(job)}</span>
        </nav>
        <div className="jk-grid">
          <div className="jk-main">
            <JobHero job={job} cmp={cmp} fav={fav} onFav={onFav} onShare={onShare} actionsRef={actionsRef} />
            <Summary items={brief} loading={false} />
            <SectionNav items={nav} />
            <SalaryCard job={job} cmp={cmp} />
            <JobFacts job={job} />
            <LocationCard job={job} />
            <Dossier job={job} />
            <Sources job={job} onShare={onShare} />
          </div>
          <DesktopAside job={job} cmp={cmp} brief={brief} fav={fav} onFav={onFav} onShare={onShare} />
        </div>
      </div>
      <StickyCTA job={job} cmp={cmp} show={pastHero} />
      <KaAssistant job={job} hidden={!pastHero} />
      {toast}
    </div>
  );
}