"use client";

import { useState, useEffect } from "react";

interface User {
  id: string;
  username: string;
  email: string;
  role: string;
  score: number;
  level: number;
  hp: number;
  maxHp: number;
  xp: number;
  maxXp: number;
  avatar: string | null;
  createdAt: string;
}

interface EditingUser {
  userId: string;
  hpDelta: number;
  xpDelta: number;
  score: number | null;
  level: number | null;
  role: string | null;
}

export default function UserManagement() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [editingUser, setEditingUser] = useState<EditingUser | null>(null);
  const [saving, setSaving] = useState(false);
  const [deletingUserId, setDeletingUserId] = useState<string | null>(null);

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

  const fetchUsers = async () => {
    try {
      const response = await fetch("/api/admin/users");
      if (response.ok) {
        const data = await response.json();
        setUsers(data);
      }
    } catch (error) {
      console.error("Error fetching users:", error);
    } finally {
      setLoading(false);
    }
  };

  const handleEdit = (user: User) => {
    setEditingUser({
      userId: user.id,
      hpDelta: 0,
      xpDelta: 0,
      score: user.score,
      level: user.level,
      role: user.role,
    });
  };

  const handleSave = async () => {
    if (!editingUser) return;

    setSaving(true);
    try {
      const body: {
        hpDelta?: number;
        xpDelta?: number;
        score?: number;
        level?: number;
        role?: string;
      } = {};

      if (editingUser.hpDelta !== 0) {
        body.hpDelta = editingUser.hpDelta;
      }
      if (editingUser.xpDelta !== 0) {
        body.xpDelta = editingUser.xpDelta;
      }
      if (editingUser.score !== null) {
        body.score = editingUser.score;
      }
      if (editingUser.level !== null) {
        body.level = editingUser.level;
      }
      if (editingUser.role !== null) {
        body.role = editingUser.role;
      }

      const response = await fetch(`/api/admin/users/${editingUser.userId}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(body),
      });

      if (response.ok) {
        await fetchUsers();
        setEditingUser(null);
      } else {
        const error = await response.json();
        alert(error.error || "Erreur lors de la mise à jour");
      }
    } catch (error) {
      console.error("Error updating user:", error);
      alert("Erreur lors de la mise à jour");
    } finally {
      setSaving(false);
    }
  };

  const handleCancel = () => {
    setEditingUser(null);
  };

  const handleDelete = async (userId: string) => {
    if (
      !confirm(
        "Êtes-vous sûr de vouloir supprimer cet utilisateur ? Cette action est irréversible."
      )
    ) {
      return;
    }

    setDeletingUserId(userId);
    try {
      const response = await fetch(`/api/admin/users/${userId}`, {
        method: "DELETE",
      });

      if (response.ok) {
        await fetchUsers();
      } else {
        const error = await response.json();
        alert(error.error || "Erreur lors de la suppression");
      }
    } catch (error) {
      console.error("Error deleting user:", error);
      alert("Erreur lors de la suppression");
    } finally {
      setDeletingUserId(null);
    }
  };

  const formatNumber = (num: number) => {
    return num.toLocaleString("en-US");
  };

  if (loading) {
    return <div className="text-center text-gray-400 py-8">Chargement...</div>;
  }

  return (
    <div className="space-y-4">
      {users.length === 0 ? (
        <div className="text-center text-gray-400 py-8">
          Aucun utilisateur trouvé
        </div>
      ) : (
        users.map((user) => {
          const isEditing = editingUser?.userId === user.id;
          const previewHp = isEditing
            ? Math.max(0, Math.min(user.maxHp, user.hp + editingUser.hpDelta))
            : user.hp;
          const previewXp = isEditing
            ? Math.max(0, user.xp + editingUser.xpDelta)
            : user.xp;

          return (
            <div
              key={user.id}
              className="bg-black/60 border border-pixel-gold/20 rounded p-3"
            >
              <div className="flex justify-between items-center mb-2">
                <div className="flex gap-3 items-center flex-1 min-w-0">
                  {/* Avatar */}
                  <div className="w-10 h-10 rounded-full border-2 border-pixel-gold/50 overflow-hidden bg-black/60 flex-shrink-0">
                    {user.avatar ? (
                      <img
                        src={user.avatar}
                        alt={user.username}
                        className="w-full h-full object-cover"
                        onError={(e) => {
                          e.currentTarget.style.display = "none";
                          e.currentTarget.nextElementSibling?.classList.remove(
                            "hidden"
                          );
                        }}
                      />
                    ) : null}
                    <div
                      className={`w-full h-full flex items-center justify-center text-pixel-gold text-sm font-bold ${
                        user.avatar ? "hidden" : ""
                      }`}
                    >
                      {user.username.charAt(0).toUpperCase()}
                    </div>
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 flex-wrap">
                      <h3 className="text-pixel-gold font-bold text-base">
                        {user.username}
                      </h3>
                      <span className="text-xs text-gray-500">
                        Niveau {user.level}
                      </span>
                      <span className="text-xs text-gray-500">
                        Score: {formatNumber(user.score)}
                      </span>
                      <span
                        className={`text-xs ${
                          user.role === "ADMIN"
                            ? "text-pixel-gold"
                            : "text-gray-500"
                        }`}
                      >
                        {user.role}
                      </span>
                    </div>
                    <p className="text-gray-400 text-xs truncate">
                      {user.email}
                    </p>
                  </div>
                </div>
                {!isEditing && (
                  <div className="flex gap-2 flex-shrink-0 ml-2">
                    <button
                      onClick={() => handleEdit(user)}
                      className="px-3 py-1.5 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition"
                    >
                      Modifier
                    </button>
                    <button
                      onClick={() => handleDelete(user.id)}
                      disabled={deletingUserId === user.id}
                      className="px-3 py-1.5 border border-red-500/50 bg-red-900/20 text-red-400 uppercase text-xs tracking-widest rounded hover:bg-red-900/30 transition disabled:opacity-50"
                    >
                      {deletingUserId === user.id
                        ? "Suppression..."
                        : "Supprimer"}
                    </button>
                  </div>
                )}
              </div>

              {isEditing ? (
                <div className="space-y-4">
                  {/* HP Section */}
                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <label className="text-sm text-gray-300">
                        Points de Vie (HP)
                      </label>
                      <span className="text-xs text-gray-400">
                        {previewHp} / {user.maxHp}
                      </span>
                    </div>
                    <div className="flex gap-2">
                      <button
                        onClick={() =>
                          setEditingUser({
                            ...editingUser,
                            hpDelta: editingUser.hpDelta - 100,
                          })
                        }
                        className="px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-xs rounded hover:bg-red-900/30 transition"
                      >
                        -100
                      </button>
                      <button
                        onClick={() =>
                          setEditingUser({
                            ...editingUser,
                            hpDelta: editingUser.hpDelta - 10,
                          })
                        }
                        className="px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-xs rounded hover:bg-red-900/30 transition"
                      >
                        -10
                      </button>
                      <input
                        type="number"
                        value={editingUser.hpDelta || 0}
                        onChange={(e) =>
                          setEditingUser({
                            ...editingUser,
                            hpDelta: parseInt(e.target.value) || 0,
                          })
                        }
                        className="flex-1 px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm text-center"
                      />
                      <button
                        onClick={() =>
                          setEditingUser({
                            ...editingUser,
                            hpDelta: editingUser.hpDelta + 10,
                          })
                        }
                        className="px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-xs rounded hover:bg-green-900/30 transition"
                      >
                        +10
                      </button>
                      <button
                        onClick={() =>
                          setEditingUser({
                            ...editingUser,
                            hpDelta: editingUser.hpDelta + 100,
                          })
                        }
                        className="px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-xs rounded hover:bg-green-900/30 transition"
                      >
                        +100
                      </button>
                    </div>
                    <div className="mt-2 h-2 bg-black/60 rounded-full overflow-hidden">
                      <div
                        className="h-full bg-gradient-to-r from-red-600 to-green-500 transition-all duration-300"
                        style={{
                          width: `${Math.min(
                            100,
                            (previewHp / user.maxHp) * 100
                          )}%`,
                        }}
                      />
                    </div>
                  </div>

                  {/* XP Section */}
                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <label className="text-sm text-gray-300">
                        Expérience (XP)
                      </label>
                      <span className="text-xs text-gray-400">
                        {formatNumber(previewXp)} / {formatNumber(user.maxXp)}
                      </span>
                    </div>
                    <div className="flex gap-2">
                      <button
                        onClick={() =>
                          setEditingUser({
                            ...editingUser,
                            xpDelta: editingUser.xpDelta - 1000,
                          })
                        }
                        className="px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-xs rounded hover:bg-red-900/30 transition"
                      >
                        -1000
                      </button>
                      <button
                        onClick={() =>
                          setEditingUser({
                            ...editingUser,
                            xpDelta: editingUser.xpDelta - 100,
                          })
                        }
                        className="px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-xs rounded hover:bg-red-900/30 transition"
                      >
                        -100
                      </button>
                      <input
                        type="number"
                        value={editingUser.xpDelta || 0}
                        onChange={(e) =>
                          setEditingUser({
                            ...editingUser,
                            xpDelta: parseInt(e.target.value) || 0,
                          })
                        }
                        className="flex-1 px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm text-center"
                      />
                      <button
                        onClick={() =>
                          setEditingUser({
                            ...editingUser,
                            xpDelta: editingUser.xpDelta + 100,
                          })
                        }
                        className="px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-xs rounded hover:bg-green-900/30 transition"
                      >
                        +100
                      </button>
                      <button
                        onClick={() =>
                          setEditingUser({
                            ...editingUser,
                            xpDelta: editingUser.xpDelta + 1000,
                          })
                        }
                        className="px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-xs rounded hover:bg-green-900/30 transition"
                      >
                        +1000
                      </button>
                    </div>
                    <div className="mt-2 h-2 bg-black/60 rounded-full overflow-hidden">
                      <div
                        className="h-full bg-gradient-to-r from-blue-600 to-purple-500 transition-all duration-300"
                        style={{
                          width: `${Math.min(
                            100,
                            (previewXp / user.maxXp) * 100
                          )}%`,
                        }}
                      />
                    </div>
                  </div>

                  {/* Score Section */}
                  <div>
                    <label className="block text-sm text-gray-300 mb-2">
                      Score
                    </label>
                    <div className="flex gap-2">
                      <button
                        onClick={() =>
                          setEditingUser({
                            ...editingUser,
                            score: (editingUser.score || 0) - 1000,
                          })
                        }
                        className="px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-xs rounded hover:bg-red-900/30 transition"
                      >
                        -1000
                      </button>
                      <button
                        onClick={() =>
                          setEditingUser({
                            ...editingUser,
                            score: (editingUser.score || 0) - 100,
                          })
                        }
                        className="px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-xs rounded hover:bg-red-900/30 transition"
                      >
                        -100
                      </button>
                      <input
                        type="number"
                        value={editingUser.score ?? 0}
                        onChange={(e) =>
                          setEditingUser({
                            ...editingUser,
                            score: parseInt(e.target.value) || 0,
                          })
                        }
                        className="flex-1 px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm text-center"
                      />
                      <button
                        onClick={() =>
                          setEditingUser({
                            ...editingUser,
                            score: (editingUser.score || 0) + 100,
                          })
                        }
                        className="px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-xs rounded hover:bg-green-900/30 transition"
                      >
                        +100
                      </button>
                      <button
                        onClick={() =>
                          setEditingUser({
                            ...editingUser,
                            score: (editingUser.score || 0) + 1000,
                          })
                        }
                        className="px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-xs rounded hover:bg-green-900/30 transition"
                      >
                        +1000
                      </button>
                    </div>
                  </div>

                  {/* Level Section */}
                  <div>
                    <label className="block text-sm text-gray-300 mb-2">
                      Niveau
                    </label>
                    <div className="flex gap-2">
                      <button
                        onClick={() =>
                          setEditingUser({
                            ...editingUser,
                            level: Math.max(1, (editingUser.level || 1) - 1),
                          })
                        }
                        className="px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-xs rounded hover:bg-red-900/30 transition"
                      >
                        -1
                      </button>
                      <input
                        type="number"
                        min="1"
                        value={editingUser.level ?? 1}
                        onChange={(e) =>
                          setEditingUser({
                            ...editingUser,
                            level: Math.max(1, parseInt(e.target.value) || 1),
                          })
                        }
                        className="flex-1 px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-sm text-center"
                      />
                      <button
                        onClick={() =>
                          setEditingUser({
                            ...editingUser,
                            level: (editingUser.level || 1) + 1,
                          })
                        }
                        className="px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-xs rounded hover:bg-green-900/30 transition"
                      >
                        +1
                      </button>
                    </div>
                  </div>

                  {/* Role Section */}
                  <div>
                    <label className="block text-sm text-gray-300 mb-2">
                      Rôle
                    </label>
                    <div className="flex gap-2">
                      <button
                        onClick={() =>
                          setEditingUser({
                            ...editingUser,
                            role: "USER",
                          })
                        }
                        className={`flex-1 px-4 py-2 border rounded text-xs uppercase tracking-widest transition ${
                          editingUser.role === "USER"
                            ? "border-pixel-gold bg-pixel-gold/20 text-pixel-gold"
                            : "border-gray-600/50 bg-gray-900/20 text-gray-400 hover:bg-gray-900/30"
                        }`}
                      >
                        USER
                      </button>
                      <button
                        onClick={() =>
                          setEditingUser({
                            ...editingUser,
                            role: "ADMIN",
                          })
                        }
                        className={`flex-1 px-4 py-2 border rounded text-xs uppercase tracking-widest transition ${
                          editingUser.role === "ADMIN"
                            ? "border-pixel-gold bg-pixel-gold/20 text-pixel-gold"
                            : "border-gray-600/50 bg-gray-900/20 text-gray-400 hover:bg-gray-900/30"
                        }`}
                      >
                        ADMIN
                      </button>
                    </div>
                  </div>

                  <div className="flex gap-2 pt-2">
                    <button
                      onClick={handleSave}
                      disabled={saving}
                      className="px-4 py-2 border border-green-500/50 bg-green-900/20 text-green-400 uppercase text-xs tracking-widest rounded hover:bg-green-900/30 transition disabled:opacity-50"
                    >
                      {saving ? "Enregistrement..." : "Enregistrer"}
                    </button>
                    <button
                      onClick={handleCancel}
                      className="px-4 py-2 border border-gray-600/50 bg-gray-900/20 text-gray-400 uppercase text-xs tracking-widest rounded hover:bg-gray-900/30 transition"
                    >
                      Annuler
                    </button>
                  </div>
                </div>
              ) : (
                <div className="flex gap-4 text-xs">
                  <div className="flex-1">
                    <div className="flex justify-between items-center mb-0.5">
                      <span className="text-gray-400">HP</span>
                      <span className="text-gray-400">
                        {user.hp}/{user.maxHp}
                      </span>
                    </div>
                    <div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
                      <div
                        className="h-full bg-gradient-to-r from-red-600 to-green-500"
                        style={{
                          width: `${Math.min(
                            100,
                            (user.hp / user.maxHp) * 100
                          )}%`,
                        }}
                      />
                    </div>
                  </div>
                  <div className="flex-1">
                    <div className="flex justify-between items-center mb-0.5">
                      <span className="text-gray-400">XP</span>
                      <span className="text-gray-400">
                        {formatNumber(user.xp)}/{formatNumber(user.maxXp)}
                      </span>
                    </div>
                    <div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
                      <div
                        className="h-full bg-gradient-to-r from-blue-600 to-purple-500"
                        style={{
                          width: `${Math.min(
                            100,
                            (user.xp / user.maxXp) * 100
                          )}%`,
                        }}
                      />
                    </div>
                  </div>
                </div>
              )}
            </div>
          );
        })
      )}
    </div>
  );
}
