import { useEffect, useState } from "preact/hooks";

type Student = {
  numEtud: number;
  nom: string;
  prenom: string;
  idPromo: string;
};
type Promo = { id: string; annee: string };
type Module = { id: string; nom: string };
type Mobilite = { id: number; duree: number; status: string };
type Stage = { id: number; duree: number };

type Props = { numEtud: number };

function anneeLabel(idPromo: string): string {
  const m = idPromo.match(/^(\d+)A/);
  if (!m) return "";
  const n = m[1];
  if (n === "3") return "3ème année";
  if (n === "4") return "4ème année";
  if (n === "5") return "5ème année";
  return `${n}ème année`;
}

export default function EditStudents({ numEtud }: Props) {
  const [student, setStudent] = useState<Student | null>(null);
  const [promos, setPromos] = useState<Promo[]>([]);
  const [_modules, setModules] = useState<Module[]>([]);
  const [mobWeeks, setMobWeeks] = useState(0);
  const [stageWeeks, setStageWeeks] = useState(0);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [saveMsg, setSaveMsg] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);

  // Edit form state
  const [nom, setNom] = useState("");
  const [prenom, setPrenom] = useState("");
  const [idPromo, setIdPromo] = useState("");

  useEffect(() => {
    async function load() {
      try {
        const [sRes, pRes, mRes, mobRes, stRes] = await Promise.all([
          fetch(`/students/api/students/${numEtud}`),
          fetch("/students/api/promotions"),
          fetch("/notes/api/modules"),
          fetch(`/mobility/api/mobilites?numEtud=${numEtud}`),
          fetch(`/stages/api/stages?numEtud=${numEtud}`),
        ]);
        if (!sRes.ok) throw new Error("Élève introuvable");
        const s: Student = await sRes.json();
        setStudent(s);
        setNom(s.nom);
        setPrenom(s.prenom);
        setIdPromo(s.idPromo);
        if (pRes.ok) setPromos(await pRes.json());
        if (mRes.ok) setModules(await mRes.json());
        if (mobRes.ok) {
          const mobs: Mobilite[] = await mobRes.json();
          setMobWeeks(
            mobs.filter((m) => m.status === "validated").reduce(
              (s, m) => s + m.duree,
              0,
            ),
          );
        }
        if (stRes.ok) {
          const stages: Stage[] = await stRes.json();
          setStageWeeks(stages.reduce((s, st) => s + st.duree, 0));
        }
      } catch (e) {
        setError(e instanceof Error ? e.message : "Erreur");
      } finally {
        setLoading(false);
      }
    }
    load();
  }, [numEtud]);

  async function saveInfos() {
    if (!student) return;
    setSaving(true);
    setSaveMsg(null);
    try {
      const res = await fetch(`/students/api/students/${numEtud}`, {
        method: "PUT",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          nom: nom.trim(),
          prenom: prenom.trim(),
          idPromo,
        }),
      });
      if (!res.ok) throw new Error("Modification échouée");
      const updated: Student = await res.json();
      setStudent(updated);
      setSaveMsg("Informations enregistrées.");
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    } finally {
      setSaving(false);
    }
  }

  async function deleteStudent() {
    if (!confirm(`Supprimer définitivement l'élève #${numEtud} ?`)) return;
    try {
      const res = await fetch(`/students/api/students/${numEtud}`, {
        method: "DELETE",
      });
      if (!res.ok) throw new Error("Suppression échouée");
      globalThis.location.href = "/students/consult";
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    }
  }

  if (loading) {
    return (
      <div class="page-content">
        <p class="state-loading">Chargement…</p>
      </div>
    );
  }

  if (error && !student) {
    return (
      <div class="page-content">
        <p class="state-error">{error}</p>
      </div>
    );
  }

  if (!student) return null;

  return (
    <div class="page-content">
      <a
        class="back-link"
        href="/students/consult"
        f-partial="/students/partials/consult"
      >
        ← Retour à la liste
      </a>

      <h2 class="page-title" style="border-bottom: none; margin-bottom: 0.5rem">
        Édition – {student.prenom} {student.nom}
      </h2>

      {/* Info bar */}
      <div class="info-bar">
        <span class="numEtud-chip">{student.numEtud}</span>
        <span>{student.idPromo}</span>
        <span class="col-dim">{anneeLabel(student.idPromo)}</span>
      </div>

      {error && <p class="state-error">{error}</p>}
      {saveMsg && (
        <p style="font-size: 0.82rem; color: light-dark(var(--light-accent-color), var(--dark-accent-color)); margin-bottom: 0.5rem">
          {saveMsg}
        </p>
      )}

      {/* Section 1: Informations générales */}
      <div class="edit-section">
        <p class="edit-section-title">Informations générales</p>
        <div class="form-grid">
          <div class="form-field">
            <label>Nom</label>
            <input
              class="form-input"
              value={nom}
              onInput={(e) => setNom((e.target as HTMLInputElement).value)}
            />
          </div>
          <div class="form-field">
            <label>Prénom</label>
            <input
              class="form-input"
              value={prenom}
              onInput={(e) => setPrenom((e.target as HTMLInputElement).value)}
            />
          </div>
          <div class="form-field">
            <label>N° Étudiant</label>
            <input
              class="form-input"
              value={student.numEtud}
              disabled
              style="opacity: 0.6"
            />
          </div>
          <div class="form-field">
            <label>Promo</label>
            <select
              class="filter-select"
              value={idPromo}
              onChange={(e) =>
                setIdPromo((e.target as HTMLSelectElement).value)}
              style="min-width: 0"
            >
              {promos.map((p) => <option key={p.id} value={p.id}>{p.id}
              </option>)}
            </select>
          </div>
        </div>

        <div style="display: flex; gap: 0.5rem; justify-content: space-between; flex-wrap: wrap">
          <button
            type="button"
            class="btn btn-primary"
            onClick={saveInfos}
            disabled={saving}
          >
            {saving ? "…" : "Enregistrer infos"}
          </button>
          <button
            type="button"
            class="btn btn-danger"
            onClick={deleteStudent}
          >
            Supprimer l'élève
          </button>
        </div>
      </div>

      {/* Section 2: Notes */}
      <div class="edit-section">
        <p class="edit-section-title">Notes</p>
        <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap">
          <span class="col-dim" style="font-size: 0.82rem">
            Récap complet des notes et moyennes
          </span>
          <a
            class="btn btn-secondary"
            href={`/notes/recap/${numEtud}`}
            f-client-nav={false}
          >
            Voir les notes
          </a>
        </div>
      </div>

      {/* Section 3: Mobilités */}
      <div class="edit-section">
        <p class="edit-section-title">Mobilités</p>
        <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap">
          <span style="display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap">
            <span
              style={{
                fontFamily: "monospace",
                fontWeight: "var(--font-weight-bold)",
                color: mobWeeks >= 12 ? "#22c55e" : "#dc2626",
              }}
            >
              {mobWeeks}/12 semaines validées
            </span>
          </span>
          <a
            class="btn btn-secondary"
            href={`/mobility/overview/${numEtud}`}
            f-client-nav={false}
          >
            Consulter
          </a>
        </div>
      </div>

      {/* Section 4: Stages */}
      <div class="edit-section">
        <p class="edit-section-title">Stages</p>
        <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap">
          <span style="display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap">
            <span
              style={{
                fontFamily: "monospace",
                fontWeight: "var(--font-weight-bold)",
                color: stageWeeks >= 40 ? "#22c55e" : "#dc2626",
              }}
            >
              {stageWeeks}/40 semaines
            </span>
          </span>
          <a
            class="btn btn-secondary"
            href={`/stages/overview/${numEtud}`}
            f-client-nav={false}
          >
            Consulter
          </a>
        </div>
      </div>
    </div>
  );
}