/**
 * =============================================================================
 * Job·Ka — Groupe KA
 * Auteur  : Simon-Pierre Boucher
 * Contact : contact@spboucher.ai
 * Fichier : frontend/src/components/JobCard.tsx
 * Rôle    : Rangée d'offre éditoriale — titre fort, salaire en exergue à
 *           droite, métadonnées calmes (mode, type, séniorité, exigences),
 *           fraîcheur, cœur ♥ favoris. Zéro carte bordée : filets fins +
 *           barre d'accent au survol.
 * Créé    : 2026-08-17   Modifié : 2026-08-25
 * =============================================================================
 */
import { Link } from "react-router-dom";
import {
  agoLabel, daysSince, displayTitle, formatSalary, Job,
  MODE_FR, SENIORITY_FR, TYPE_FR, yearlyEquiv,
} from "../api";
import { FavButton } from "../favorites";

const NEW_DAYS = 3;   // « Nouveau » : publiée il y a 3 jours ou moins

export default function JobCard({ job }: { job: Job }) {
  const salary = formatSalary(job);
  const yearly = yearlyEquiv(job);
  const days = daysSince(job.date_posted);
  const isNew = days !== null && days <= NEW_DAYS;
  const exp = job.requirements?.experience_years;
  const langs = job.requirements?.languages;

  // métadonnées calmes, séparées par des points médians (pas de soupe de pilules)
  const tags: string[] = [];
  if (job.work_mode) tags.push(MODE_FR[job.work_mode] ?? job.work_mode);
  if (job.employment_type) tags.push(TYPE_FR[job.employment_type] ?? job.employment_type);
  if (job.seniority) tags.push(SENIORITY_FR[job.seniority] ?? job.seniority);
  if (typeof exp === "number") tags.push(`${exp} an${exp > 1 ? "s" : ""} d'exp.`);
  if (langs && langs.length === 2) tags.push("Bilingue");
  if (job.category) tags.push(job.category);

  return (
    <Link to={`/emploi/${job.uid}`} className="job-row">
      <FavButton job={job} />
      <div className="jr-main">
        <h3 className="jr-title">
          {isNew && <span className="jr-new">Nouveau</span>}
          {job.ka_reco && (
            <span
              className="jr-reco"
              title="Correspond à vos préférences KA ID — gérez-les sur groupe-ka.com/mon-ka"
            >
              Recommandé pour vous
            </span>
          )}
          {displayTitle(job)}
        </h3>
        <p className="jr-org">
          <span className="employer">{job.employer}</span>
          {job.city && <span className="jr-city">{job.city}</span>}
          {job.is_direct !== false && (
            <span
              className="jr-direct"
              title="Offre publiée à la source : page carrière de l'employeur, pas un portail"
            >
              source directe
            </span>
          )}
        </p>
        {tags.length > 0 && (
          <p className="jr-tags">
            {tags.map((t, i) => (
              <span key={i}>{t}</span>
            ))}
          </p>
        )}
      </div>
      <div className="jr-side">
        {salary ? (
          <>
            <span className="jr-salary">{salary}</span>
            {yearly && <span className="jr-yearly">{yearly}</span>}
          </>
        ) : (
          <span className="jr-nosalary">Salaire non affiché</span>
        )}
        <span className="jr-when">
          {days !== null ? `Publiée ${agoLabel(days)}` : job.ats}
        </span>
      </div>
    </Link>
  );
}