"use client";

import { useEffect, useRef, useState } from "react";

type JobListItem = {
  id: number;
  title: string;
  company_name: string | null;
  location: string | null;
  contract_type: string | null;
  seniority_level: string | null;
  salary_min: number | null;
  salary_max: number | null;
  is_urgent: number | null;
  aide_regionale?: string | null;
  created_at: string;
};

type JobDetail = JobListItem & {
  description?: string | null;
  missions?: string | null;
  profile?: string | null;
  skills?: string[] | string | null; // tolérant si API renvoie string ou array
};

function safeText(v: unknown): string {
  if (v === null || v === undefined) return "";
  if (typeof v === "string") return v;
  return String(v);
}

function safeCompany(v: unknown): string {
  const s = safeText(v).trim();
  return s || "Société confidentielle";
}

function safeArraySkills(skills: JobDetail["skills"]): string[] {
  if (!skills) return [];
  if (Array.isArray(skills)) return skills.filter(Boolean).map((s) => String(s).trim()).filter(Boolean);
  if (typeof skills === "string") {
    // au cas où certaines lignes DB renvoient un texte "A, B, C"
    return skills
      .split(",")
      .map((s) => s.trim())
      .filter(Boolean);
  }
  return [];
}

function missionsToBullets(missions?: string | null): string[] {
  const txt = safeText(missions).trim();
  if (!txt) return [];
  return txt
    .split("\n")
    .map((l) => l.trim())
    .filter(Boolean)
    .map((l) => l.replace(/^-\s*/, ""));
}

export default function JobsPage() {
  const [jobs, setJobs] = useState<JobListItem[]>([]);
  const [activeJob, setActiveJob] = useState<JobDetail | null>(null);
  const cardRefs = useRef<Record<number, HTMLDivElement | null>>({});

  useEffect(() => {
    fetch("/api/jobs")
      .then((r) => r.json())
      .then((data) => {
        const items: JobListItem[] = data.items || [];
        setJobs(items);
        if (items.length) loadJobDetail(items[0].id);
      })
      .catch(() => {
        setJobs([]);
        setActiveJob(null);
      });
  }, []);

  function loadJobDetail(id: number) {
    fetch(`/api/jobs/${id}`)
      .then((r) => r.json())
      .then((data) => {
        const item: JobDetail | null = data?.item || null;
        setActiveJob(item);
        requestAnimationFrame(() => {
          cardRefs.current[id]?.scrollIntoView({ behavior: "smooth", block: "nearest" });
        });
      })
      .catch(() => setActiveJob(null));
  }

  const skillsArray = safeArraySkills(activeJob?.skills);
  const missionBullets = missionsToBullets(activeJob?.missions);

  return (
    <div
      className="jb-plateforme"
      style={{
        display: "grid",
        gridTemplateColumns: "420px 1fr",
        gap: "1.5rem",
        maxWidth: "1400px",
        margin: "0 auto",
        padding: "1.5rem",
      }}
    >
      {/* =========================
          LISTE DES ANNONCES
      ========================= */}
      <div
        style={{
          maxHeight: "calc(100vh - 140px)",
          overflowY: "auto",
          paddingRight: "0.5rem",
        }}
      >
        {jobs.map((job) => {
          const isActive = activeJob?.id === job.id;

          return (
            <div
              key={job.id}
              ref={(el) => (cardRefs.current[job.id] = el)}
              onClick={() => loadJobDetail(job.id)}
              className="card"
              style={{
                marginBottom: "0.75rem",
                cursor: "pointer",
                border: isActive ? "2px solid #003f75" : "1px solid #e2e8f0",
                background: isActive ? "#f8fafc" : "#ffffff",
              }}
            >
              <div className="job-title">{safeText(job.title) || "Intitulé du poste"}</div>

              <div className="text-sm text-muted mt-1">
                <span className="font-semibold text-blue-700">{safeCompany(job.company_name)}</span>
              </div>

              <div className="text-xs text-muted">
                {safeText(job.location) || "—"} · {safeText(job.contract_type) || "—"}
              </div>

              <div className="mt-2 flex flex-wrap gap-2">
                {job.seniority_level && (
                  <span className="pill-label pill-ok">{safeText(job.seniority_level)}</span>
                )}

                {job.is_urgent === 1 && <span className="pill-label pill-warning">Urgent</span>}

                {/* badge "Aide régionale" si renseigné */}
                {job.aide_regionale && (
                  <span className="pill-label">{safeText(job.aide_regionale)}</span>
                )}

                <span className="pill-label">
                  Publiée le {new Date(job.created_at).toLocaleDateString("fr-FR")}
                </span>
              </div>
            </div>
          );
        })}
      </div>

      {/* =========================
          DÉTAIL ANNONCE
      ========================= */}
      <div
        className="card"
        style={{
          position: "sticky",
          top: "96px",
          height: "calc(100vh - 140px)",
          display: "flex",
          flexDirection: "column",
          overflow: "hidden",
        }}
      >
        {!activeJob ? (
          <div className="text-muted">Sélectionnez une annonce</div>
        ) : (
          <>
            {/* CONTENU SCROLLABLE */}
            <div style={{ overflowY: "auto", paddingRight: "0.5rem" }}>
              <div className="flex justify-between items-start">
                <div>
                  <div className="text-xs font-semibold text-blue-700 uppercase">
                    {safeCompany(activeJob.company_name)}
                  </div>

                  <h2 className="text-xl font-semibold mt-1">{safeText(activeJob.title) || "Poste"}</h2>

                  <div className="mt-1 text-muted">
                    {safeText(activeJob.location) || "—"} · {safeText(activeJob.contract_type) || "—"}
                  </div>
                </div>

                <button className="btn btn-sm btn-outline" onClick={() => setActiveJob(null)}>
                  Replier
                </button>
              </div>

              {(activeJob.salary_min || activeJob.salary_max) && (
                <div className="mt-2">
                  <span className="badge-soft">
                    Salaire : {activeJob.salary_min ?? "—"}€ – {activeJob.salary_max ?? "—"}€
                  </span>
                </div>
              )}

              {/* DESCRIPTION */}
              {safeText(activeJob.description).trim() && (
                <>
                  <h3 className="mt-6 font-semibold">Description</h3>
                  <p className="mt-2 text-sm">{safeText(activeJob.description)}</p>
                </>
              )}

              {/* MISSIONS */}
              {missionBullets.length > 0 && (
                <>
                  <h3 className="mt-6 font-semibold">Missions</h3>
                  <ul className="mt-2 text-sm list-disc pl-5 space-y-1">
                    {missionBullets.map((m, i) => (
                      <li key={i}>{m}</li>
                    ))}
                  </ul>
                </>
              )}

              {/* PROFIL */}
              {safeText(activeJob.profile).trim() && (
                <>
                  <h3 className="mt-6 font-semibold">Profil recherché</h3>
                  <p className="mt-2 text-sm">{safeText(activeJob.profile)}</p>
                </>
              )}

              {/* SKILLS */}
              {skillsArray.length > 0 && (
                <>
                  <h3 className="mt-6 font-semibold">Compétences attendues</h3>
                  <div className="mt-2 mb-6 flex flex-wrap gap-2">
                    {skillsArray.map((skill) => (
                      <span key={skill} className="pill-label">
                        {skill}
                      </span>
                    ))}
                  </div>
                </>
              )}
            </div>
			<div><p></p></div>
          {/* BANDEAU CTA */}
           <div
			  style={{
				marginTop: "0.5rem", // ← AJOUT
				background: "#f1f5f9",
				borderTop: "1px solid rgba(15,23,42,.08)",
				padding: "0.75rem",
				display: "flex",
				justifyContent: "space-between",
				alignItems: "center",
				gap: "0.5rem",
			  }}
			>

              <button
                className="jb-btn-primary"
                type="button"
                onClick={() =>
                  alert("Postuler (hook à brancher)")
                }
              >
                Postuler
              </button>

              <button
                className="jb-btn-outline"
                type="button"
                onClick={() =>
                  alert("Sauvegardé")
                }
              >
                Sauvegarder pour plus tard
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}