cat > app/jobs/[id]/page.jsx <<'JSX'
"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import Link from "next/link";

function parseJsonMaybe(v) {
  if (Array.isArray(v)) return v;
  if (v == null) return [];
  if (typeof v === "string") {
    try {
      const parsed = JSON.parse(v);
      return Array.isArray(parsed) ? parsed : [];
    } catch {
      return [];
    }
  }
  return [];
}

export default function JobDetailPage() {
  const { id } = useParams();
  const [job, setJob] = useState(null);
  const [err, setErr] = useState("");
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    (async () => {
      try {
        setLoading(true);
        const res = await fetch(`/api/jobs/${id}`, { cache: "no-store" });

        const ct = res.headers.get("content-type") || "";
        if (!ct.includes("application/json")) {
          const txt = await res.text();
          throw new Error(`API non-JSON (${res.status}) : ${txt.slice(0, 120)}...`);
        }

        const json = await res.json();
        if (!json.ok) throw new Error(json.error || "API job KO");
        setJob(json.job);
      } catch (e) {
        setErr(String(e?.message || e));
      } finally {
        setLoading(false);
      }
    })();
  }, [id]);

  if (loading) return <div className="p-6">Chargement…</div>;
  if (err) return <div className="p-6 text-red-600">Erreur: {err}</div>;
  if (!job) return <div className="p-6">Annonce introuvable.</div>;

  const skills = parseJsonMaybe(job.skills_required);

  return (
    <div className="p-6">
      <div className="mb-4">
        <Link href="/jobs" className="text-sm underline">← Retour aux offres</Link>
      </div>

      <h1 className="text-2xl font-semibold">{job.title}</h1>
      <div className="text-sm text-gray-600 mt-1">{job.location}</div>

      {job.senior_friendly ? (
        <div className="inline-flex mt-3 text-xs px-3 py-1 rounded-full border">
          Senior-friendly ✅
        </div>
      ) : null}

      <div className="mt-6 whitespace-pre-line text-gray-800">
        {job.description}
      </div>

      {skills.length > 0 && (
        <div className="mt-8">
          <div className="font-semibold mb-2">Compétences</div>
          <div className="flex flex-wrap gap-2">
            {skills.map((s) => (
              <span key={s} className="text-xs px-3 py-1 rounded-full border">
                {s}
              </span>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
JSX