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

type Student = {
  numEtud: number;
  nom: string;
  prenom: string;
  idPromo: string;
};
type Promotion = { id: string; annee: string };

export default function ConsultStudents() {
  const [students, setStudents] = useState<Student[]>([]);
  const [promos, setPromos] = useState<Promotion[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [filterPromo, setFilterPromo] = useState("");
  const [filterNom, setFilterNom] = useState("");
  const [selected, setSelected] = useState<Set<number>>(new Set());
  const [bulkPromo, setBulkPromo] = useState("");
  const [bulkBusy, setBulkBusy] = useState(false);

  async function load() {
    try {
      const [sRes, pRes] = await Promise.all([
        fetch("/students/api/students"),
        fetch("/students/api/promotions"),
      ]);
      if (!sRes.ok) throw new Error("Impossible de charger les élèves");
      setStudents(await sRes.json());
      if (pRes.ok) setPromos(await pRes.json());
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    load();
  }, []);

  async function deleteStudent(numEtud: number) {
    if (!confirm(`Supprimer 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");
      await load();
      setSelected((prev) => {
        const next = new Set(prev);
        next.delete(numEtud);
        return next;
      });
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    }
  }

  const filtered = students.filter((s) => {
    const matchPromo = !filterPromo || s.idPromo === filterPromo;
    const matchNom = !filterNom ||
      `${s.nom} ${s.prenom}`.toLowerCase().includes(filterNom.toLowerCase());
    return matchPromo && matchNom;
  });

  const filteredIds = new Set(filtered.map((s) => s.numEtud));
  const selectedInView = [...selected].filter((id) => filteredIds.has(id));
  const allFilteredSelected = filtered.length > 0 &&
    filtered.every((s) => selected.has(s.numEtud));

  function toggleOne(numEtud: number) {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(numEtud)) next.delete(numEtud);
      else next.add(numEtud);
      return next;
    });
  }

  function toggleAll() {
    if (allFilteredSelected) {
      setSelected((prev) => {
        const next = new Set(prev);
        for (const s of filtered) next.delete(s.numEtud);
        return next;
      });
    } else {
      setSelected((prev) => {
        const next = new Set(prev);
        for (const s of filtered) next.add(s.numEtud);
        return next;
      });
    }
  }

  async function bulkDelete() {
    const count = selectedInView.length;
    if (count === 0) return;
    if (
      !confirm(`Supprimer définitivement ${count} élève(s) sélectionné(s) ?`)
    ) return;
    setBulkBusy(true);
    try {
      const results = await Promise.all(
        selectedInView.map((id) =>
          fetch(`/students/api/students/${id}`, { method: "DELETE" })
        ),
      );
      const failed = results.filter((r) => !r.ok).length;
      if (failed > 0) setError(`${failed} suppression(s) échouée(s)`);
      setSelected(new Set());
      await load();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    } finally {
      setBulkBusy(false);
    }
  }

  async function bulkChangePromo() {
    if (!bulkPromo || selectedInView.length === 0) return;
    setBulkBusy(true);
    try {
      const results = await Promise.all(
        selectedInView.map((id) =>
          fetch(`/students/api/students/${id}`, {
            method: "PUT",
            headers: { "content-type": "application/json" },
            body: JSON.stringify({ idPromo: bulkPromo }),
          })
        ),
      );
      const failed = results.filter((r) => !r.ok).length;
      if (failed > 0) setError(`${failed} modification(s) échouée(s)`);
      setSelected(new Set());
      setBulkPromo("");
      await load();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    } finally {
      setBulkBusy(false);
    }
  }

  return (
    <div class="page-content">
      <h2 class="page-title">Gestion des Élèves</h2>

      {error && <p class="state-error">{error}</p>}

      <div class="toolbar">
        <a
          class="btn btn-primary"
          href="/students/upload"
          f-partial="/students/partials/upload"
          style="margin-left: auto"
        >
          Importer xlsx
        </a>
      </div>

      <div class="filters">
        <select
          class="filter-select"
          value={filterPromo}
          onChange={(e) =>
            setFilterPromo((e.target as HTMLSelectElement).value)}
        >
          <option value="">Toutes les promos</option>
          {promos.map((p) => (
            <option key={p.id} value={p.id}>{p.id} — {p.annee}</option>
          ))}
        </select>
        <input
          class="filter-input"
          placeholder="Rechercher par nom…"
          value={filterNom}
          onInput={(e) => setFilterNom((e.target as HTMLInputElement).value)}
        />
      </div>

      {/* Bulk actions bar */}
      {selectedInView.length > 0 && (
        <div class="bulk-bar">
          <span class="bulk-count">
            {selectedInView.length} sélectionné(s)
          </span>
          <div class="bulk-actions">
            <select
              class="filter-select"
              value={bulkPromo}
              onChange={(e) =>
                setBulkPromo((e.target as HTMLSelectElement).value)}
            >
              <option value="">Changer de promo…</option>
              {promos.map((p) => (
                <option key={p.id} value={p.id}>{p.id}</option>
              ))}
            </select>
            <button
              type="button"
              class="btn btn-sm btn-primary"
              disabled={!bulkPromo || bulkBusy}
              onClick={bulkChangePromo}
            >
              Appliquer
            </button>
            <button
              type="button"
              class="btn btn-sm btn-danger"
              disabled={bulkBusy}
              onClick={bulkDelete}
            >
              Supprimer
            </button>
          </div>
        </div>
      )}

      {loading
        ? <p class="state-loading">Chargement…</p>
        : (
          <div class="data-table-wrap">
            <table class="data-table">
              <thead>
                <tr>
                  <th style="width: 2.5rem">
                    <input
                      type="checkbox"
                      checked={allFilteredSelected && filtered.length > 0}
                      onChange={toggleAll}
                    />
                  </th>
                  <th>N° étud.</th>
                  <th>Nom</th>
                  <th>Prénom</th>
                  <th>Promo</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {filtered.length === 0
                  ? (
                    <tr>
                      <td colspan={6} class="state-empty">
                        Aucun élève trouvé
                      </td>
                    </tr>
                  )
                  : filtered.map((s) => (
                    <tr
                      key={s.numEtud}
                      class={selected.has(s.numEtud) ? "row-selected" : ""}
                    >
                      <td>
                        <input
                          type="checkbox"
                          checked={selected.has(s.numEtud)}
                          onChange={() => toggleOne(s.numEtud)}
                        />
                      </td>
                      <td class="col-dim">{s.numEtud}</td>
                      <td>{s.nom}</td>
                      <td>{s.prenom}</td>
                      <td>{s.idPromo}</td>
                      <td>
                        <div class="col-actions">
                          <a
                            class="btn btn-sm btn-secondary"
                            href={`/students/edit/${s.numEtud}`}
                            f-client-nav={false}
                          >
                            <svg
                              width="14"
                              height="14"
                              viewBox="0 0 24 24"
                              fill="none"
                              stroke="currentColor"
                              stroke-width="2"
                            >
                              <path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
                            </svg>
                          </a>
                          <button
                            type="button"
                            class="btn btn-sm btn-danger"
                            onClick={() => deleteStudent(s.numEtud)}
                          >
                            <svg
                              width="14"
                              height="14"
                              viewBox="0 0 24 24"
                              fill="none"
                              stroke="currentColor"
                              stroke-width="2"
                            >
                              <path d="M3 6h18" />
                              <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                              <rect x="5" y="6" width="14" height="16" rx="1" />
                            </svg>
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
              </tbody>
            </table>
          </div>
        )}
    </div>
  );
}