"use client";

import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { UserPlus, Trash2, ShieldCheck, Edit2, Users, FileText, Folder } from "lucide-react";
import Button from "../ui/Button";
import Modal from "../ui/Modal";
import UserAvatar from "../ui/UserAvatar";
import { EmptyState } from "../ui/PageHeader";
import toast from "react-hot-toast";

interface UserData {
  id: string;
  username: string | null;
  email: string | null;
  name: string | null;
  role: string;
  twoFactorEnabled: boolean;
  createdAt: string;
  _count?: { files: number; folders: number };
}

const roleLabels: Record<string, string> = { admin: "Admin", user: "Utilisateur", viewer: "Lecteur" };
const roleColors: Record<string, string> = {
  admin: "bg-rose-500/10 text-rose-600 dark:text-rose-400 ring-rose-500/20",
  user: "bg-blue-500/10 text-blue-700 dark:text-blue-300 ring-blue-500/20",
  viewer: "bg-gray-100 text-gray-600 dark:bg-white/[0.06] dark:text-gray-300 ring-gray-500/15",
};

const emptyForm = { username: "", name: "", password: "", role: "user" };

function UserForm({ create, form, setForm }: { create: boolean; form: typeof emptyForm; setForm: (f: typeof emptyForm) => void }) {
return (
  <div className="space-y-3.5">
    <div>
      <label className="block text-[12px] font-medium text-gray-500 dark:text-gray-400 mb-1.5">Nom d&apos;utilisateur{create ? " *" : ""}</label>
      <input type="text" placeholder="ex. simon, marie42…" value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value.toLowerCase().replace(/\s/g, "") })} className="field h-11" autoFocus={create} autoComplete="off" />
    </div>
    <div>
      <label className="block text-[12px] font-medium text-gray-500 dark:text-gray-400 mb-1.5">Nom affiché</label>
      <input type="text" placeholder="ex. Simon Boucher" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} className="field h-11" />
    </div>
    <div>
      <label className="block text-[12px] font-medium text-gray-500 dark:text-gray-400 mb-1.5">{create ? "Mot de passe *" : "Nouveau mot de passe"}</label>
      <input type="password" placeholder={create ? "Mot de passe" : "Laisser vide pour ne pas changer"} value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} className="field h-11" autoComplete="new-password" />
    </div>
    <div>
      <label className="block text-[12px] font-medium text-gray-500 dark:text-gray-400 mb-1.5">Rôle</label>
      <select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })} className="field h-11">
        <option value="user">Utilisateur</option>
        <option value="viewer">Lecteur</option>
        <option value="admin">Admin</option>
      </select>
    </div>
  </div>
);
}

export default function UserManagement() {
  const [users, setUsers] = useState<UserData[]>([]);
  const [loading, setLoading] = useState(true);
  const [showCreate, setShowCreate] = useState(false);
  const [editUser, setEditUser] = useState<UserData | null>(null);
  const [deleteUser, setDeleteUser] = useState<UserData | null>(null);
  const [saving, setSaving] = useState(false);
  const [form, setForm] = useState(emptyForm);

  const fetchUsers = async () => {
    const res = await fetch("/api/users");
    if (res.ok) setUsers(await res.json());
    setLoading(false);
  };

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

  const handleCreate = async () => {
    setSaving(true);
    const res = await fetch("/api/users", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(form) });
    setSaving(false);
    if (res.ok) {
      toast.success("Utilisateur créé");
      setShowCreate(false);
      setForm(emptyForm);
      fetchUsers();
    } else {
      const data = await res.json();
      toast.error(data.error || "Erreur");
    }
  };

  const handleUpdate = async () => {
    if (!editUser) return;
    const data: Record<string, string> = {};
    if (form.name) data.name = form.name;
    if (form.username) data.username = form.username;
    if (form.role) data.role = form.role;
    if (form.password) data.password = form.password;
    setSaving(true);
    const res = await fetch(`/api/users/${editUser.id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) });
    setSaving(false);
    if (res.ok) {
      toast.success("Utilisateur modifié");
      setEditUser(null);
      fetchUsers();
    } else toast.error("Erreur lors de la modification");
  };

  const handleDelete = async () => {
    if (!deleteUser) return;
    setSaving(true);
    const res = await fetch(`/api/users/${deleteUser.id}`, { method: "DELETE" });
    setSaving(false);
    setDeleteUser(null);
    if (res.ok) {
      toast.success("Utilisateur supprimé");
      fetchUsers();
    } else {
      const data = await res.json();
      toast.error(data.error || "Erreur");
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between gap-3">
        <p className="text-[13px] text-gray-500 dark:text-gray-400">{loading ? "Chargement…" : `${users.length} compte${users.length !== 1 ? "s" : ""}`}</p>
        <Button variant="accent" size="sm" onClick={() => { setForm(emptyForm); setShowCreate(true); }}>
          <UserPlus className="w-4 h-4" /> Ajouter
        </Button>
      </div>

      {loading ? (
        <div className="space-y-2">
          {[0, 1, 2].map((i) => (
            <div key={i} className="card p-4 flex items-center gap-3 animate-pulse">
              <div className="w-10 h-10 rounded-full bg-gray-200 dark:bg-white/10" />
              <div className="flex-1 space-y-2"><div className="h-3 w-1/3 rounded bg-gray-200 dark:bg-white/10" /><div className="h-2 w-1/4 rounded bg-gray-200 dark:bg-white/10" /></div>
            </div>
          ))}
        </div>
      ) : users.length === 0 ? (
        <EmptyState icon={Users} title="Aucun utilisateur" description="Créez un premier compte pour partager votre cloud." />
      ) : (
        <div className="card p-0 overflow-hidden">
          {/* En-tête desktop */}
          <div className="hidden md:grid grid-cols-[1fr_120px_140px_110px_96px] items-center gap-3 px-4 h-10 border-b border-line dark:border-white/[0.07] text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-400 sticky top-0 bg-surface dark:bg-canvas z-10">
            <span>Utilisateur</span><span>Rôle</span><span>Contenu</span><span>2FA</span><span />
          </div>
          <div className="divide-y divide-line dark:divide-white/[0.06]">
            {users.map((user, i) => (
              <motion.div
                key={user.id}
                initial={{ opacity: 0, y: 5 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: Math.min(i, 10) * 0.03 }}
                className="grid grid-cols-1 md:grid-cols-[1fr_120px_140px_110px_96px] items-center gap-3 px-4 py-3 hover:bg-gray-50 dark:hover:bg-white/[0.03] transition-colors"
              >
                <div className="flex items-center gap-3 min-w-0">
                  <UserAvatar userId={user.id} name={user.name || user.username} size="md" />
                  <div className="min-w-0">
                    <p className="text-[14px] font-medium text-gray-900 dark:text-white truncate">{user.name || user.username || user.id}</p>
                    <p className="text-[12px] text-gray-500 truncate">@{user.username}{user.email ? ` · ${user.email}` : ""}</p>
                  </div>
                </div>
                <div className="flex items-center gap-2 md:block">
                  <span className={`inline-flex px-2 py-0.5 rounded-full text-[11px] font-medium ring-1 ring-inset ${roleColors[user.role] || roleColors.user}`}>{roleLabels[user.role] || user.role}</span>
                  <span className="md:hidden text-[12px] text-gray-500">{user._count?.files || 0} fichiers · {user._count?.folders || 0} dossiers</span>
                  {user.twoFactorEnabled && <ShieldCheck className="md:hidden w-4 h-4 text-emerald-500" aria-label="2FA activée" />}
                </div>
                <div className="hidden md:flex items-center gap-3 text-[12.5px] text-gray-500 tabular-nums">
                  <span className="inline-flex items-center gap-1"><FileText className="w-3.5 h-3.5" />{user._count?.files || 0}</span>
                  <span className="inline-flex items-center gap-1"><Folder className="w-3.5 h-3.5" />{user._count?.folders || 0}</span>
                </div>
                <div className="hidden md:block">
                  {user.twoFactorEnabled ? (
                    <span className="inline-flex items-center gap-1 text-[12px] text-emerald-600 dark:text-emerald-400"><ShieldCheck className="w-3.5 h-3.5" /> Activée</span>
                  ) : (
                    <span className="text-[12px] text-gray-400">—</span>
                  )}
                </div>
                <div className="flex gap-1 md:justify-end -ml-2 md:ml-0">
                  <button
                    onClick={() => { setEditUser(user); setForm({ username: user.username || "", name: user.name || "", password: "", role: user.role }); }}
                    className="w-10 h-10 flex items-center justify-center text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-xl hover:bg-gray-100 dark:hover:bg-white/[0.08] transition-colors"
                    title="Modifier"
                  >
                    <Edit2 className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => setDeleteUser(user)}
                    className="w-10 h-10 flex items-center justify-center text-gray-400 hover:text-rose-500 rounded-xl hover:bg-rose-500/10 transition-colors"
                    title="Supprimer"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      )}

      <Modal
        isOpen={showCreate}
        onClose={() => setShowCreate(false)}
        title="Nouvel utilisateur"
        footer={<><Button variant="ghost" onClick={() => setShowCreate(false)}>Annuler</Button><Button variant="accent" onClick={handleCreate} loading={saving} disabled={!form.username || !form.password}>Créer</Button></>}
      >
        <UserForm create form={form} setForm={setForm} />
      </Modal>

      <Modal
        isOpen={!!editUser}
        onClose={() => setEditUser(null)}
        title="Modifier l'utilisateur"
        description={editUser ? `@${editUser.username}` : undefined}
        footer={<><Button variant="ghost" onClick={() => setEditUser(null)}>Annuler</Button><Button variant="accent" onClick={handleUpdate} loading={saving}>Enregistrer</Button></>}
      >
        <UserForm create={false} form={form} setForm={setForm} />
      </Modal>

      <Modal
        isOpen={!!deleteUser}
        onClose={() => setDeleteUser(null)}
        title="Supprimer cet utilisateur ?"
        description={deleteUser ? `${deleteUser.name || deleteUser.username}` : undefined}
        footer={<><Button variant="ghost" onClick={() => setDeleteUser(null)}>Annuler</Button><Button variant="danger" onClick={handleDelete} loading={saving}><Trash2 className="w-4 h-4" /> Supprimer</Button></>}
      >
        <p className="text-sm text-gray-600 dark:text-gray-300">Le compte sera supprimé et ne pourra plus se connecter.</p>
      </Modal>
    </div>
  );
}