/**
 * =============================================================================
 * Job·Ka — Groupe KA
 * Auteur  : Simon-Pierre Boucher
 * Contact : contact@spboucher.ai
 * Fichier : frontend/src/pages/Ville.tsx
 * Rôle    : Pages programmatiques SEO — /villes (répertoire) et /ville/:ville.
 *           Le serveur rend le même contenu en HTML (jobka/seo.py) ; ici, la
 *           version interactive avec les cartes d'offres de l'app.
 * Créé    : 2026-08-23   Modifié : 2026-08-23
 * =============================================================================
 */
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { fetchJobs, Job } from "../api";
import JobCard from "../components/JobCard";

interface VilleRow {
  city: string;
  slug: string;
  n: number;
  employers: number;
  with_salary: number;
}

interface VilleData {
  city: string;
  slug: string;
  n: number;
  employers: number;
  with_salary: number;
  neighbors: VilleRow[];
}

async function get<T>(path: string): Promise<T> {
  const res = await fetch(path);
  if (!res.ok) throw new Error(`${res.status}`);
  return res.json();
}

export function VillesPage() {
  const [villes, setVilles] = useState<VilleRow[] | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    get<{ villes: VilleRow[] }>("/api/seo/villes")
      .then((r) => setVilles(r.villes))
      .catch((e) => setError(String(e)));
    window.scrollTo(0, 0);
  }, []);

  return (
    <div className="container">
      <h1>Offres d'emploi par ville</h1>
      <p className="sub">
        Toutes les villes du Québec où Job-Ka recense des offres d'emploi,
        avec le nombre de postes ouverts et d'employeurs qui recrutent.
      </p>
      {error && <div className="empty">⚠️ {error}</div>}
      {!villes && !error && <div className="empty">Chargement…</div>}
      {villes && (
        <ul style={{ marginTop: 24, lineHeight: 2, paddingLeft: 20 }}>
          {villes.map((v) => (
            <li key={v.slug}>
              <Link to={`/ville/${v.slug}`}>{v.city}</Link>
              {" — "}
              {v.n} offre{v.n > 1 ? "s" : ""} · {v.employers} employeur
              {v.employers > 1 ? "s" : ""}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default function VillePage() {
  const { ville = "" } = useParams();
  const [data, setData] = useState<VilleData | null>(null);
  const [jobs, setJobs] = useState<Job[] | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setData(null);
    setJobs(null);
    setError(null);
    get<VilleData>(`/api/seo/ville/${encodeURIComponent(ville)}`)
      .then((d) => {
        setData(d);
        return fetchJobs({ city: d.city }, 60).then((r) => setJobs(r.jobs));
      })
      .catch((e) =>
        setError(e.message === "404" ? "Ville inconnue." : String(e)));
    window.scrollTo(0, 0);
  }, [ville]);

  if (error)
    return (
      <div className="container">
        <h1>Page introuvable</h1>
        <div className="empty">
          ⚠️ {error} <Link to="/villes">Voir toutes les villes</Link>
        </div>
      </div>
    );
  if (!data)
    return (
      <div className="container">
        <div className="empty">Chargement…</div>
      </div>
    );

  return (
    <div className="container">
      <p style={{ margin: "0 0 4px" }}>
        <Link to="/villes">Villes</Link> — {data.city}
      </p>
      <h1>Offres d'emploi à {data.city}</h1>
      <p className="sub">
        {data.n} poste{data.n > 1 ? "s" : ""} chez {data.employers} employeur
        {data.employers > 1 ? "s" : ""}
        {data.with_salary > 0 && (
          <> · {data.with_salary} avec salaire affiché</>
        )}
      </p>

      <div className="job-list" style={{ marginTop: 24 }}>
        {!jobs && <div className="empty">Chargement des offres…</div>}
        {jobs && jobs.map((j) => <JobCard key={j.uid} job={j} />)}
      </div>

      {data.neighbors.length > 0 && (
        <>
          <h2 style={{ marginTop: 40 }}>Autres villes</h2>
          <p style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {data.neighbors.map((v) => (
              <Link key={v.slug} to={`/ville/${v.slug}`}>
                {v.city} ({v.n})
              </Link>
            ))}
          </p>
        </>
      )}
      <p style={{ marginTop: 24 }}>
        <Link to="/">← Toutes les offres d'emploi au Québec</Link>
      </p>
    </div>
  );
}