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

type UE = { id: number; nom: string };

export default function AdminUEs() {
  const [ues, setUes] = useState<UE[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [newNom, setNewNom] = useState("");
  const [creating, setCreating] = useState(false);

  async function load() {
    try {
      const res = await fetch("/notes/api/ues");
      if (!res.ok) throw new Error("Impossible de charger les UEs");
      setUes(await res.json());
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    } finally {
      setLoading(false);
    }
  }

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

  async function createUE() {
    if (!newNom.trim()) return;
    setCreating(true);
    try {
      const res = await fetch("/notes/api/ues", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ nom: newNom.trim() }),
      });
      if (!res.ok) throw new Error("Création échouée");
      setNewNom("");
      await load();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    } finally {
      setCreating(false);
    }
  }

  async function deleteUE(id: number) {
    if (!confirm("Supprimer cette UE ?")) return;
    try {
      const res = await fetch(`/notes/api/ues/${id}`, { method: "DELETE" });
      if (!res.ok) throw new Error("Suppression échouée");
      await load();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    }
  }

  return (
    <div class="page-content">
      <h2 class="page-title">Gestion des UEs</h2>

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

      <div class="form-row">
        <input
          class="form-input"
          placeholder="Nom de la nouvelle UE"
          value={newNom}
          onInput={(e) => setNewNom((e.target as HTMLInputElement).value)}
          onKeyDown={(e) => e.key === "Enter" && createUE()}
        />
        <button
          type="button"
          class="btn btn-primary"
          onClick={createUE}
          disabled={creating}
        >
          + Ajouter
        </button>
      </div>

      {loading
        ? <p class="state-loading">Chargement…</p>
        : (
          <div class="data-table-wrap">
            <table class="data-table">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Nom</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                {ues.length === 0
                  ? (
                    <tr>
                      <td colspan={3} class="state-empty">
                        Aucune UE enregistrée
                      </td>
                    </tr>
                  )
                  : ues.map((ue) => (
                    <tr key={ue.id}>
                      <td class="col-dim">{ue.id}</td>
                      <td>{ue.nom}</td>
                      <td>
                        <button
                          type="button"
                          class="btn btn-sm btn-danger"
                          onClick={() => deleteUE(ue.id)}
                        >
                          🗑
                        </button>
                      </td>
                    </tr>
                  ))}
              </tbody>
            </table>
          </div>
        )}
    </div>
  );
}