/**
 * =============================================================================
 * Job·Ka — Groupe KA
 * Auteur  : Simon-Pierre Boucher
 * Contact : contact@spboucher.ai
 * Fichier : frontend/src/fiche/JobHero.tsx
 * Rôle    : Héro de la fiche — logo + employeur · lieu, salaire en exergue
 *           (+ équivalent annuel), capsules (marché, nouveau, offre directe),
 *           titre du poste (H1) + résumé, actions (favoris · partager ·
 *           Postuler). Ordre DOM = ordre visuel.
 * Créé    : 2026-09-07
 * =============================================================================
 */
import { useState } from "react";
import { Job, daysSince, displayTitle, formatSalary, yearlyEquiv } from "../api";
import { Ico, IcoHeart } from "../components/Icons";
import { ComparaisonSalaire, ligneResume } from "./synthese";
import { NBSP } from "./ui";

export function SalaryCapsule({ cmp, short = false }: { cmp: ComparaisonSalaire | null; short?: boolean }) {
  if (!cmp) return null;
  return (
    <span className={`jk-capsule ${cmp.tone}`}>
      {short ? <b>{cmp.court}</b> : <><b>{cmp.label}</b><span aria-hidden="true">·</span>{cmp.court}</>}
    </span>
  );
}

export function EmployerLogo({ job, size = 56 }: { job: Job; size?: number }) {
  const [ok, setOk] = useState(true);
  if (!job.company_logo || !ok)
    return <span className="jk-logo jk-logo-fallback" style={{ width: size, height: size }} aria-hidden="true">{(job.employer || "?").charAt(0).toUpperCase()}</span>;
  return <img className="jk-logo" src={job.company_logo} alt={`Logo ${job.employer}`} style={{ width: size, height: size }} onError={() => setOk(false)} />;
}

export default function JobHero({ job, cmp, fav, onFav, onShare, actionsRef }: {
  job: Job; cmp: ComparaisonSalaire | null; fav: boolean;
  onFav: () => void; onShare: () => void; actionsRef: React.RefObject<HTMLDivElement>;
}) {
  const salaire = formatSalary(job);
  const yearly = yearlyEquiv(job);
  const days = daysSince(job.date_posted);
  const resume = ligneResume(job);
  return (
    <header className="jk-hero" aria-label="Résumé de l'offre">
      <div className="jk-hero-emp">
        <EmployerLogo job={job} />
        <div style={{ minWidth: 0 }}>
          <div className="jk-kicker">{job.employer}{job.location_label ? ` — ${job.location_label}` : job.city ? ` — ${job.city}` : ""}</div>
          <div className="jk-price">
            {salaire ?? <span style={{ fontSize: "0.62em", fontWeight: 600, color: "var(--jk-text-2)" }}>Salaire non affiché</span>}
            {yearly && <small>{yearly}</small>}
          </div>
        </div>
      </div>
      <div className="jk-price-row" style={{ marginTop: 8 }}>
        <SalaryCapsule cmp={cmp} />
        {days != null && days <= 3 && <span className="jk-capsule brand">{days === 0 ? "Aujourd'hui" : "Nouveau"}</span>}
        {job.is_direct !== false && <span className="jk-capsule ok">Offre directe</span>}
        {job.active === 0 && <span className="jk-capsule high">Offre retirée</span>}
        {job.ka_reco && <span className="jk-capsule brand">Recommandé pour vous</span>}
      </div>
      <h1 className="jk-h1 jk-h1-big">
        {displayTitle(job)}
        {resume.length > 0 && <span className="jk-city">{resume.join(" · ")}</span>}
      </h1>
      <div className="jk-actions" ref={actionsRef}>
        <button type="button" className={`jk-btn jk-btn-ghost jk-btn-icon ${fav ? "on" : ""}`} aria-pressed={fav}
                aria-label={fav ? "Retirer des favoris" : "Ajouter aux favoris"} onClick={onFav}><IcoHeart size={19} filled={fav} /></button>
        <button type="button" className="jk-btn jk-btn-ghost jk-btn-icon" aria-label="Partager" onClick={onShare}><Ico name="share" size={18} /></button>
        <a className="jk-btn jk-btn-primary" href={job.apply_url || job.url} target="_blank" rel="noopener noreferrer">
          Postuler <Ico name="external" size={16} /><span className="visually-hidden"> chez {job.employer}</span>
        </a>
      </div>
      <p className="jk-fine" style={{ margin: "2px 0 0" }}>La candidature se fait chez l'employeur{job.ats ? ` (${job.ats})` : ""} — Job·Ka n'est pas un intermédiaire.{NBSP}</p>
    </header>
  );
}