PolyMPR/routes/(apps)/admin/(_islands)/AdminUsers.tsx

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

type User = { id: string; nom: string; prenom: string; idRole: number | null };
type Role = { id: number; nom: string };

export default function AdminUsers() {
  const [users, setUsers] = useState<User[]>([]);
  const [roles, setRoles] = useState<Role[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [newId, setNewId] = useState("");
  const [newNom, setNewNom] = useState("");
  const [newPrenom, setNewPrenom] = useState("");
  const [newIdRole, setNewIdRole] = useState("");
  const [creating, setCreating] = useState(false);

  const [filterNom, setFilterNom] = useState("");

  async function load() {
    try {
      const [uRes, rRes] = await Promise.all([
        fetch("/admin/api/users"),
        fetch("/admin/api/roles"),
      ]);
      if (!uRes.ok) throw new Error("Impossible de charger les utilisateurs");
      setUsers(await uRes.json());
      if (rRes.ok) setRoles(await rRes.json());
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    } finally {
      setLoading(false);
    }
  }

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

  async function createUser() {
    if (!newId.trim() || !newNom.trim() || !newPrenom.trim()) return;
    setCreating(true);
    try {
      const res = await fetch("/admin/api/users", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          id: newId.trim(),
          nom: newNom.trim(),
          prenom: newPrenom.trim(),
          idRole: newIdRole ? Number(newIdRole) : null,
        }),
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body.error ?? "Création échouée");
      }
      setNewId("");
      setNewNom("");
      setNewPrenom("");
      setNewIdRole("");
      await load();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    } finally {
      setCreating(false);
    }
  }

  async function deleteUser(id: string) {
    if (!confirm(`Supprimer l'utilisateur ${id} ?`)) return;
    try {
      const res = await fetch(`/admin/api/users/${encodeURIComponent(id)}`, {
        method: "DELETE",
      });
      if (!res.ok) throw new Error("Suppression échouée");
      await load();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    }
  }

  const roleMap = Object.fromEntries(roles.map((r) => [r.id, r.nom]));

  const filtered = users.filter((u) =>
    !filterNom ||
    `${u.nom} ${u.prenom} ${u.id}`.toLowerCase().includes(
      filterNom.toLowerCase(),
    )
  );

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

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

      <div class="form-row">
        <input
          class="form-input"
          placeholder="Login (uid)"
          value={newId}
          onInput={(e) => setNewId((e.target as HTMLInputElement).value)}
          style="min-width: 9rem"
        />
        <input
          class="form-input"
          placeholder="Nom"
          value={newNom}
          onInput={(e) => setNewNom((e.target as HTMLInputElement).value)}
        />
        <input
          class="form-input"
          placeholder="Prénom"
          value={newPrenom}
          onInput={(e) => setNewPrenom((e.target as HTMLInputElement).value)}
        />
        <select
          class="filter-select"
          value={newIdRole}
          onChange={(e) => setNewIdRole((e.target as HTMLSelectElement).value)}
        >
          <option value="">Aucun rôle</option>
          {roles.map((r) => <option key={r.id} value={r.id}>{r.nom}</option>)}
        </select>
        <button
          type="button"
          class="btn btn-primary"
          onClick={createUser}
          disabled={creating}
        >
          + Ajouter
        </button>
      </div>

      <div class="filters">
        <input
          class="filter-input"
          placeholder="Rechercher…"
          value={filterNom}
          onInput={(e) => setFilterNom((e.target as HTMLInputElement).value)}
        />
      </div>

      {loading
        ? <p class="state-loading">Chargement…</p>
        : (
          <div class="data-table-wrap">
            <table class="data-table">
              <thead>
                <tr>
                  <th>Login</th>
                  <th>Nom</th>
                  <th>Prénom</th>
                  <th>Rôle</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {filtered.length === 0
                  ? (
                    <tr>
                      <td colspan={5} class="state-empty">
                        Aucun utilisateur trouvé
                      </td>
                    </tr>
                  )
                  : filtered.map((u) => (
                    <tr key={u.id}>
                      <td class="col-dim">{u.id}</td>
                      <td>{u.nom}</td>
                      <td>{u.prenom}</td>
                      <td>
                        {u.idRole ? (roleMap[u.idRole] ?? `#${u.idRole}`) : "—"}
                      </td>
                      <td>
                        <div class="col-actions">
                          <a
                            class="btn btn-sm btn-secondary"
                            href={`/admin/users/${encodeURIComponent(u.id)}`}
                            f-client-nav={false}
                          >
                            ✏
                          </a>
                          <button
                            type="button"
                            class="btn btn-sm btn-danger"
                            onClick={() => deleteUser(u.id)}
                          >
                            🗑
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
              </tbody>
            </table>
          </div>
        )}
    </div>
  );
}