import React, { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/router";
import { toast } from "react-toastify";
import AdminLayout from "~/admin/components/AdminLayout";
import ProtectedRoute from "~/admin/components/ProtectedRoute";
import { Admin, authService } from "~/admin/services/authApi";

function RegistroPage() {
  const router = useRouter();
  const [admins, setAdmins] = useState<Admin[]>([]);
  const [loading, setLoading] = useState(true);
  const [deletingId, setDeletingId] = useState<number | null>(null);

  const totalAdmins = useMemo(() => admins.length, [admins]);

  const loadAdmins = async () => {
    try {
      setLoading(true);
      const response = await authService.getAdmins();
      setAdmins(response.data || []);
    } catch (error: any) {
      toast.error(error?.message || "Error al cargar administradores");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void loadAdmins();
  }, []);

  const handleDelete = async (admin: Admin) => {
    if (!confirm(`¿Seguro que deseas eliminar al usuario ${admin.nombre}?`)) return;
    try {
      setDeletingId(admin.id);
      await authService.deleteAdmin(admin.id);
      toast.success("Administrador eliminado exitosamente");
      await loadAdmins();
    } catch (error: any) {
      toast.error(error?.message || "Error al eliminar administrador");
    } finally {
      setDeletingId(null);
    }
  };

  return (
    <ProtectedRoute>
      <AdminLayout>
        <div className="container-fluid">
          <div className="d-flex justify-content-between align-items-center mb-4">
            <div>
              <h1 className="mb-1">Usuarios</h1>
            </div>
            <button
              className="btn btn-primary"
              onClick={() => router.push("/admin/registro/nuevo")}
            >
              <i className="fas fa-user-plus mr-2" />
              Nuevo Administrador
            </button>
          </div>

          <div className="card mb-4">
            <div className="card-body">
              {loading ? (
                <div className="text-center py-4">
                  <div className="spinner-border" role="status" />
                </div>
              ) : admins.length === 0 ? (
                <div className="text-center py-4 text-muted">
                  No hay administradores registrados.
                </div>
              ) : (
                <div className="table-responsive">
                  <table className="table table-hover">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>Nombre</th>
                        <th>Email</th>
                        <th>Estado</th>
                        <th>Creado</th>
                        <th className="text-center">Acciones</th>
                      </tr>
                    </thead>
                    <tbody>
                      {admins.map((admin) => (
                        <tr key={admin.id}>
                          <td>{admin.id}</td>
                          <td>{admin.nombre}</td>
                          <td>{admin.email}</td>
                          <td>{Number(admin.activo) === 1 ? "Activo" : "Inactivo"}</td>
                          <td>
                            {admin.created_at
                              ? new Date(admin.created_at).toLocaleDateString()
                              : "—"}
                          </td>
                          <td className="text-center">
                            <button
                              className="btn btn-sm btn-primary mr-2"
                              onClick={() => router.push(`/admin/registro/editar/${admin.id}`)}
                            >
                              <i className="fas fa-edit" />
                            </button>
                            <button
                              className="btn btn-sm btn-danger"
                              onClick={() => void handleDelete(admin)}
                              disabled={deletingId === admin.id}
                            >
                              <i className="fas fa-trash" />
                            </button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </div>
        </div>
      </AdminLayout>
    </ProtectedRoute>
  );
}

export default RegistroPage;