"use client";

import { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useCurrentUser, ROLE_LABELS, RoleValue } from "../../user-context";

interface User {
  id: string;
  username: string;
  email: string | null;
  role: RoleValue;
  displayName: string | null;
  isActive: boolean;
  createdAt: string;
}

export default function AdminUsersPage() {
  const router = useRouter();
  const me = useCurrentUser();
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [newUsername, setNewUsername] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [newRole, setNewRole] = useState<RoleValue>("user");
  const [newDisplayName, setNewDisplayName] = useState("");

  const loadUsers = useCallback(async () => {
    const res = await fetch("/backend/users", { credentials: "include" });
    if (!res.ok) throw new Error("forbidden");
    const data = await res.json();
    setUsers(data.users);
  }, []);

  useEffect(() => {
    if (me.role !== "super_admin") {
      router.replace("/dashboard");
      return;
    }
    loadUsers()
      .catch(() => setError("Impossible de charger les comptes."))
      .finally(() => setLoading(false));
  }, [me.role, router, loadUsers]);

  async function handleCreate(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    const res = await fetch("/backend/users", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({
        username: newUsername,
        password: newPassword,
        role: newRole,
        displayName: newDisplayName || undefined,
      }),
    });
    if (!res.ok) {
      const d = await res.json().catch(() => ({}));
      setError(d.error ?? "Échec de la création");
      return;
    }
    setNewUsername("");
    setNewPassword("");
    setNewRole("user");
    setNewDisplayName("");
    await loadUsers();
  }

  async function patchUser(u: User, body: Record<string, unknown>) {
    setError(null);
    const res = await fetch(`/backend/users/${u.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify(body),
    });
    if (!res.ok) {
      const d = await res.json().catch(() => ({}));
      setError(d.error ?? "Échec de la modification");
    }
    await loadUsers();
  }

  async function resetPassword(u: User) {
    const pwd = window.prompt(`Nouveau mot de passe pour ${u.username} (≥ 8 caractères) :`);
    if (!pwd) return;
    setError(null);
    const res = await fetch(`/backend/users/${u.id}/password`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ password: pwd }),
    });
    const d = await res.json().catch(() => ({}));
    if (!res.ok) setError(d.error ?? "Échec");
    else window.alert("Mot de passe réinitialisé.");
  }

  async function impersonate(u: User) {
    if (!window.confirm(`Ouvrir une session « en tant que » ${u.username} ?\nVous pourrez revenir à votre compte via le bandeau en haut.`)) return;
    const res = await fetch(`/backend/users/${u.id}/impersonate`, { method: "POST", credentials: "include" });
    if (!res.ok) {
      const d = await res.json().catch(() => ({}));
      setError(d.error ?? "Impossible de se connecter en tant que cet utilisateur.");
      return;
    }
    // Rechargement complet pour réinitialiser l'identité (sidebar, droits…).
    window.location.href = "/dashboard";
  }

  async function removeUser(u: User) {
    if (!window.confirm(`Supprimer définitivement le compte ${u.username} ?`)) return;
    setError(null);
    const res = await fetch(`/backend/users/${u.id}`, { method: "DELETE", credentials: "include" });
    if (!res.ok) {
      const d = await res.json().catch(() => ({}));
      setError(d.error ?? "Échec de la suppression");
    }
    await loadUsers();
  }

  if (loading) {
    return <div className="text-zinc-500">Chargement…</div>;
  }

  return (
    <div className="mx-auto w-full max-w-4xl">
      <h1 className="mb-6 text-xl font-semibold text-black sm:text-2xl dark:text-zinc-50">
        Gestion des comptes
      </h1>

      {error && (
        <p className="mb-4 rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700 dark:bg-red-950 dark:text-red-300" role="alert">
          {error}
        </p>
      )}

      {/* Création — empilé sur mobile, en ligne sur écran large */}
      <form
        onSubmit={handleCreate}
        className="mb-8 grid grid-cols-1 gap-3 rounded-2xl border border-zinc-200 bg-white p-5 sm:grid-cols-2 lg:grid-cols-5 dark:border-zinc-800 dark:bg-zinc-950"
      >
        <input
          placeholder="Nom d'utilisateur"
          value={newUsername}
          onChange={(e) => setNewUsername(e.target.value)}
          required
          className="rounded-lg border border-zinc-300 px-3 py-2 text-sm dark:border-zinc-700 dark:bg-black"
        />
        <input
          placeholder="Nom affiché (option.)"
          value={newDisplayName}
          onChange={(e) => setNewDisplayName(e.target.value)}
          className="rounded-lg border border-zinc-300 px-3 py-2 text-sm dark:border-zinc-700 dark:bg-black"
        />
        <input
          type="password"
          placeholder="Mot de passe (≥ 8)"
          value={newPassword}
          onChange={(e) => setNewPassword(e.target.value)}
          required
          className="rounded-lg border border-zinc-300 px-3 py-2 text-sm dark:border-zinc-700 dark:bg-black"
        />
        <select
          value={newRole}
          onChange={(e) => setNewRole(e.target.value as RoleValue)}
          className="rounded-lg border border-zinc-300 px-3 py-2 text-sm dark:border-zinc-700 dark:bg-black"
        >
          <option value="user">Utilisateur</option>
          <option value="admin">Admin</option>
          <option value="super_admin">Super Admin</option>
        </select>
        <button
          type="submit"
          className="rounded-lg bg-black px-4 py-2 text-sm font-medium text-white hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200"
        >
          Créer
        </button>
      </form>

      {/* Liste — cartes empilées sur mobile, tableau dès sm */}
      <div className="flex flex-col gap-3 sm:hidden">
        {users.map((u) => (
          <div key={u.id} className="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
            <div className="font-medium text-black dark:text-zinc-50">{u.username}</div>
            {u.displayName && <div className="text-xs text-zinc-500">{u.displayName}</div>}
            <div className="mt-3 flex items-center gap-2">
              <select
                value={u.role}
                onChange={(e) => patchUser(u, { role: e.target.value })}
                className="rounded-md border border-zinc-300 px-2 py-1 text-xs dark:border-zinc-700 dark:bg-black"
              >
                <option value="user">{ROLE_LABELS.user}</option>
                <option value="admin">{ROLE_LABELS.admin}</option>
                <option value="super_admin">{ROLE_LABELS.super_admin}</option>
              </select>
              <span className={u.isActive ? "text-xs text-green-600" : "text-xs text-zinc-400"}>
                {u.isActive ? "Actif" : "Désactivé"}
              </span>
            </div>
            <div className="mt-3 flex flex-wrap gap-2 text-xs">
              {u.id !== me.id && u.isActive && (
                <button onClick={() => impersonate(u)} className="rounded-md border border-blue-300 px-2 py-1 text-blue-600 dark:border-blue-900 dark:text-blue-400">Se connecter en tant que</button>
              )}
              <button onClick={() => patchUser(u, { isActive: !u.isActive })} className="rounded-md border border-zinc-300 px-2 py-1 dark:border-zinc-700">
                {u.isActive ? "Désactiver" : "Activer"}
              </button>
              <button onClick={() => resetPassword(u)} className="rounded-md border border-zinc-300 px-2 py-1 dark:border-zinc-700">Mot de passe</button>
              <button onClick={() => removeUser(u)} className="rounded-md border border-red-300 px-2 py-1 text-red-600 dark:border-red-900">Supprimer</button>
            </div>
          </div>
        ))}
      </div>

      <div className="hidden overflow-x-auto rounded-2xl border border-zinc-200 bg-white sm:block dark:border-zinc-800 dark:bg-zinc-950">
        <table className="w-full text-left text-sm">
          <thead className="border-b border-zinc-200 text-zinc-500 dark:border-zinc-800">
            <tr>
              <th className="px-4 py-3 font-medium">Utilisateur</th>
              <th className="px-4 py-3 font-medium">Rôle</th>
              <th className="px-4 py-3 font-medium">État</th>
              <th className="px-4 py-3 font-medium">Actions</th>
            </tr>
          </thead>
          <tbody>
            {users.map((u) => (
              <tr key={u.id} className="border-b border-zinc-100 last:border-0 dark:border-zinc-900">
                <td className="px-4 py-3">
                  <div className="font-medium text-black dark:text-zinc-50">{u.username}</div>
                  {u.displayName && <div className="text-xs text-zinc-500">{u.displayName}</div>}
                </td>
                <td className="px-4 py-3">
                  <select
                    value={u.role}
                    onChange={(e) => patchUser(u, { role: e.target.value })}
                    className="rounded-md border border-zinc-300 px-2 py-1 text-xs dark:border-zinc-700 dark:bg-black"
                  >
                    <option value="user">{ROLE_LABELS.user}</option>
                    <option value="admin">{ROLE_LABELS.admin}</option>
                    <option value="super_admin">{ROLE_LABELS.super_admin}</option>
                  </select>
                </td>
                <td className="px-4 py-3">
                  <span className={u.isActive ? "text-green-600" : "text-zinc-400"}>
                    {u.isActive ? "Actif" : "Désactivé"}
                  </span>
                </td>
                <td className="px-4 py-3">
                  <div className="flex flex-wrap gap-2 text-xs">
                    {u.id !== me.id && u.isActive && (
                      <button onClick={() => impersonate(u)} className="rounded-md border border-blue-300 px-2 py-1 text-blue-600 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-400 dark:hover:bg-blue-950">
                        Se connecter en tant que
                      </button>
                    )}
                    <button onClick={() => patchUser(u, { isActive: !u.isActive })} className="rounded-md border border-zinc-300 px-2 py-1 hover:bg-zinc-100 dark:border-zinc-700 dark:hover:bg-zinc-900">
                      {u.isActive ? "Désactiver" : "Activer"}
                    </button>
                    <button onClick={() => resetPassword(u)} className="rounded-md border border-zinc-300 px-2 py-1 hover:bg-zinc-100 dark:border-zinc-700 dark:hover:bg-zinc-900">
                      Mot de passe
                    </button>
                    <button onClick={() => removeUser(u)} className="rounded-md border border-red-300 px-2 py-1 text-red-600 hover:bg-red-50 dark:border-red-900 dark:hover:bg-red-950">
                      Supprimer
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}