// -----------------------------------------------------------------------------
// Forma-Ka — Agrégateur de formations (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// components/FormationCard.tsx : carte de formation (grille de résultats)
//   Pas d'image imposée (rare dans le domaine) : monogramme de la source +
//   type de formation en badge, détails clés (mode, durée, ville, date).
// -----------------------------------------------------------------------------
import { Link } from "react-router-dom";
import { Formation, MODE_ICONS, fmtDate, fmtHours, fmtPrice, sourceName } from "../api";

/** Couleur stable dérivée du domaine (pour le bandeau du monogramme). */
const HUES = [14, 36, 88, 152, 196, 226, 262, 318];
function hue(s: string): number {
  let h = 0;
  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0;
  return HUES[Math.abs(h) % HUES.length];
}

export default function FormationCard({ f }: { f: Formation }) {
  const img = f.images && f.images.length > 0 ? f.images[0] : null;
  const start = fmtDate(f.start_date);
  const dur = f.duration || fmtHours(f.duration_hours);
  const h = hue(f.category || f.source);
  return (
    <Link to={`/formation/${encodeURIComponent(f.uid)}`} className="card">
      <div className="card-img" style={{ aspectRatio: "5 / 2" }}>
        {img ? (
          <img src={img} alt={f.title} loading="lazy" />
        ) : (
          <div
            className="noimg"
            style={{
              background: `linear-gradient(135deg, hsl(${h} 42% 90%), hsl(${h} 38% 78%))`,
              color: `hsl(${h} 45% 26%)`,
              fontFamily: "var(--font-display)",
              fontSize: "1rem", fontWeight: 700, padding: "0 16px",
              textAlign: "center", lineHeight: 1.25,
            }}
          >
            {f.category || sourceName(f.source)}
          </div>
        )}
        {f.training_type && <span className="badge type">{f.training_type}</span>}
        {f.is_free && <span className="badge right">Gratuit</span>}
      </div>
      <div className="card-body">
        <div className="card-price">
          {f.price != null && f.price > 0 ? (
            <>{fmtPrice(f.price, f.price_label)}</>
          ) : f.is_free ? (
            <>Gratuit</>
          ) : (
            <span style={{ color: "var(--ink-3)", fontSize: ".85em" }}>
              {f.credits || f.price_label || "Prix non affiché"}
            </span>
          )}
          {f.code && <small style={{ marginLeft: 8 }}>{f.code}</small>}
        </div>
        <div className="card-title">{f.title}</div>
        <div className="card-meta">
          {f.mode && <span>{MODE_ICONS[f.mode] ?? ""} {f.mode}</span>}
          {f.mode && dur && <span className="sep" />}
          {dur && <span>{dur}</span>}
          {(f.mode || dur) && f.city && <span className="sep" />}
          {f.city && <span>{f.city}</span>}
        </div>
        <div className="card-foot">
          <span className="source-tag">{sourceName(f.source)}</span>
          {start && <span className="avail">Débute le {start}</span>}
        </div>
      </div>
    </Link>
  );
}