"use client";

import { useState } from "react";
import { Users, Search, UserPlus, Trash2, Loader2, KeyRound, X } from "lucide-react";

type User = {
  id: string;
  name: string | null;
  email: string | null;
  phone: string | null;
  role: string;
  _count: { orders: number };
};

export default function AdminUsersClient({ users: initialUsers }: { users: User[] }) {
  const [users, setUsers] = useState(initialUsers);
  const [searchTerm, setSearchTerm] = useState("");
  const [loading, setLoading] = useState(false);
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const [error, setError] = useState("");
  const [success, setSuccess] = useState("");
  const [form, setForm] = useState({ email: "", name: "", password: "", role: "USER" as "USER" | "ADMIN" });
  const [pwdTarget, setPwdTarget] = useState<User | null>(null);
  const [newPassword, setNewPassword] = useState("");
  const [savingPwd, setSavingPwd] = useState(false);
  const [pwdError, setPwdError] = useState("");

  const filteredUsers = users.filter(
    (user) =>
      (user.name?.toLowerCase() || "").includes(searchTerm.toLowerCase()) ||
      (user.email?.toLowerCase() || "").includes(searchTerm.toLowerCase()) ||
      (user.phone || "").includes(searchTerm)
  );

  const createUser = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setSuccess("");
    if (!form.email.trim() || !form.password) {
      setError("Email y contraseña son obligatorios.");
      return;
    }
    setLoading(true);
    try {
      const res = await fetch("/api/admin/users", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          email: form.email.trim(),
          name: form.name.trim() || undefined,
          password: form.password,
          role: form.role,
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setError(data.error || "Error al crear usuario");
        return;
      }
      setSuccess("Usuario creado. Recarga la página para verlo en la lista.");
      setForm({ email: "", name: "", password: "", role: "USER" });
      // Opcional: refetch; por simplicidad pedimos recargar
      window.location.reload();
    } finally {
      setLoading(false);
    }
  };

  const openPasswordModal = (user: User) => {
    setPwdTarget(user);
    setNewPassword("");
    setPwdError("");
  };

  const changePassword = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!pwdTarget) return;
    setPwdError("");
    if (newPassword.length < 8) {
      setPwdError("La contraseña debe tener al menos 8 caracteres.");
      return;
    }
    setSavingPwd(true);
    try {
      const res = await fetch(`/api/admin/users/${pwdTarget.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ password: newPassword }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setPwdError(data.error || "Error al cambiar la contraseña");
        return;
      }
      setPwdTarget(null);
      setNewPassword("");
      setSuccess(`Contraseña actualizada para ${pwdTarget.email || pwdTarget.id}.`);
      setTimeout(() => setSuccess(""), 4000);
    } finally {
      setSavingPwd(false);
    }
  };

  const deleteUser = async (id: string, email: string | null) => {
    if (!confirm(`¿Eliminar usuario ${email || id}? Esta acción no se puede deshacer.`)) return;
    setDeletingId(id);
    setError("");
    try {
      const res = await fetch(`/api/admin/users/${id}`, { method: "DELETE" });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setError(data.error || "Error al eliminar");
        return;
      }
      setUsers((prev) => prev.filter((u) => u.id !== id));
      setSuccess("Usuario eliminado.");
      setTimeout(() => setSuccess(""), 3000);
    } finally {
      setDeletingId(null);
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
        <h1 className="text-3xl font-bold flex items-center gap-3">
          <Users className="text-neon-purple w-8 h-8" />
          Gestión de Usuarios
        </h1>
        <div className="relative w-full md:w-64">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-5 h-5" />
          <input
            type="text"
            placeholder="Buscar por nombre, email o teléfono..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full bg-white/5 border border-white/10 rounded-lg pl-10 pr-4 py-2 text-white focus:outline-none focus:border-neon-purple transition-colors"
          />
        </div>
      </div>

      <p className="text-sm text-gray-400">
        El usuario del back es <strong className="text-neon-blue">soporte@r3q.cl</strong>. Desde aquí puedes agregar (invitar) o eliminar usuarios.
      </p>

      {/* Formulario agregar usuario */}
      <section className="bg-white/5 border border-white/10 rounded-xl p-6">
        <h2 className="text-lg font-semibold flex items-center gap-2 mb-4">
          <UserPlus className="w-5 h-5 text-neon-blue" /> Agregar usuario
        </h2>
        <form onSubmit={createUser} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 items-end">
          <div>
            <label className="block text-xs text-gray-500 mb-1">Email *</label>
            <input
              type="email"
              required
              value={form.email}
              onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
              className="w-full bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-neon-purple"
              placeholder="usuario@ejemplo.com"
            />
          </div>
          <div>
            <label className="block text-xs text-gray-500 mb-1">Nombre</label>
            <input
              type="text"
              value={form.name}
              onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
              className="w-full bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-neon-purple"
              placeholder="Nombre opcional"
            />
          </div>
          <div>
            <label className="block text-xs text-gray-500 mb-1">Contraseña * (mín. 8)</label>
            <input
              type="password"
              required
              minLength={8}
              value={form.password}
              onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))}
              className="w-full bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-neon-purple"
              placeholder="••••••••"
            />
          </div>
          <div className="flex gap-2 items-end">
            <div className="flex-1">
              <label className="block text-xs text-gray-500 mb-1">Rol</label>
              <select
                value={form.role}
                onChange={(e) => setForm((f) => ({ ...f, role: e.target.value as "USER" | "ADMIN" }))}
                className="w-full bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-neon-purple"
              >
                <option value="USER">USER</option>
                <option value="ADMIN">ADMIN</option>
              </select>
            </div>
            <button
              type="submit"
              disabled={loading}
              className="flex items-center gap-2 px-4 py-2 bg-neon-blue rounded-lg text-white font-medium hover:opacity-90 disabled:opacity-50"
            >
              {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <UserPlus className="w-4 h-4" />}
              Agregar
            </button>
          </div>
        </form>
        {(error || success) && (
          <div className="mt-3">
            {error && <p className="text-red-400 text-sm">{error}</p>}
            {success && <p className="text-green-400 text-sm">{success}</p>}
          </div>
        )}
      </section>

      <div className="bg-white/5 border border-white/10 rounded-xl overflow-hidden shadow-2xl">
        <div className="overflow-x-auto">
          <table className="w-full text-left border-collapse min-w-[600px]">
            <thead>
              <tr className="bg-white/10 text-sm text-gray-300">
                <th className="p-4 font-semibold">Usuario</th>
                <th className="p-4 font-semibold">Correo</th>
                <th className="p-4 font-semibold">Teléfono</th>
                <th className="p-4 font-semibold">Rol</th>
                <th className="p-4 font-semibold">Total Compras</th>
                <th className="p-4 font-semibold w-32">Acciones</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-white/5 text-sm">
              {filteredUsers.map((user) => (
                <tr key={user.id} className="hover:bg-white/5 transition-colors">
                  <td className="p-4 font-bold">{user.name || "Sin Nombre"}</td>
                  <td className="p-4 text-gray-400">{user.email}</td>
                  <td className="p-4 font-mono text-neon-blue text-xs">{user.phone ? `+56 ${user.phone}` : "—"}</td>
                  <td className="p-4">
                    <span
                      className={`px-2 py-1 rounded-full text-xs font-bold border ${
                        user.role === "ADMIN"
                          ? "bg-neon-purple/20 text-neon-purple border-neon-purple/50"
                          : "bg-gray-500/20 text-gray-400 border-gray-500/50"
                      }`}
                    >
                      {user.role}
                    </span>
                  </td>
                  <td className="p-4">
                    <span className="font-mono bg-white/10 px-3 py-1 rounded-full">{user._count.orders}</span>
                  </td>
                  <td className="p-4 flex items-center gap-1">
                    <button
                      type="button"
                      onClick={() => openPasswordModal(user)}
                      className="p-2 rounded-lg text-neon-blue hover:bg-neon-blue/20 transition-colors"
                      title="Cambiar contraseña"
                    >
                      <KeyRound className="w-4 h-4" />
                    </button>
                    <button
                      type="button"
                      onClick={() => deleteUser(user.id, user.email)}
                      disabled={deletingId === user.id}
                      className="p-2 rounded-lg text-red-400 hover:bg-red-500/20 hover:text-red-300 disabled:opacity-50 transition-colors"
                      title="Eliminar usuario"
                    >
                      {deletingId === user.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <Trash2 className="w-4 h-4" />}
                    </button>
                  </td>
                </tr>
              ))}
              {filteredUsers.length === 0 && (
                <tr>
                  <td colSpan={6} className="p-8 text-center text-gray-500">
                    No se encontraron usuarios.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {pwdTarget && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
          <div className="w-full max-w-md bg-[#111827] border border-white/10 rounded-xl p-6 shadow-2xl">
            <div className="flex items-start justify-between mb-4">
              <h2 className="text-lg font-semibold flex items-center gap-2">
                <KeyRound className="w-5 h-5 text-neon-blue" /> Cambiar contraseña
              </h2>
              <button
                type="button"
                onClick={() => setPwdTarget(null)}
                className="p-1 rounded-lg text-gray-400 hover:bg-white/10 hover:text-white transition-colors"
                title="Cerrar"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <p className="text-sm text-gray-400 mb-4">
              Usuario:{" "}
              <strong className="text-white">
                {pwdTarget.email || pwdTarget.name || pwdTarget.id}
              </strong>
            </p>

            <form onSubmit={changePassword} className="space-y-4">
              <div>
                <label className="block text-xs text-gray-500 mb-1">
                  Nueva contraseña (mín. 8 caracteres)
                </label>
                <input
                  type="password"
                  autoFocus
                  required
                  minLength={8}
                  value={newPassword}
                  onChange={(e) => setNewPassword(e.target.value)}
                  className="w-full bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-neon-purple"
                  placeholder="••••••••"
                />
              </div>

              {pwdError && <p className="text-red-400 text-sm">{pwdError}</p>}

              <div className="flex justify-end gap-2">
                <button
                  type="button"
                  onClick={() => setPwdTarget(null)}
                  className="px-4 py-2 rounded-lg border border-white/10 text-gray-300 hover:bg-white/10 transition-colors"
                >
                  Cancelar
                </button>
                <button
                  type="submit"
                  disabled={savingPwd}
                  className="flex items-center gap-2 px-4 py-2 bg-neon-blue rounded-lg text-white font-medium hover:opacity-90 disabled:opacity-50"
                >
                  {savingPwd ? (
                    <Loader2 className="w-4 h-4 animate-spin" />
                  ) : (
                    <KeyRound className="w-4 h-4" />
                  )}
                  Guardar
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}