"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { useEffect } from "react";

import { Shield, User } from "lucide-react";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CreateUserDialog } from "@/components/users/CreateUserDialog";
import { UsersTable } from "@/components/users/UsersTable";

import { useUserRole } from "@/hooks/useUserRole";

export default function UsuariosPage() {
  const { role, canManageUsers, isSuperAdmin } = useUserRole();
  const router = useRouter();
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  // Verificar permisos
  useEffect(() => {
    if (!canManageUsers) {
      router.push("/dashboard");
    }
  }, [canManageUsers, router]);

  const handleUserCreated = () => {
    setRefreshTrigger((prev) => prev + 1);
  };

  if (!canManageUsers) {
    return null;
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-slate-900">Usuarios</h1>
          <p className="text-slate-600">
            Gestión de usuarios y permisos del sistema
          </p>
        </div>
        <CreateUserDialog
          onUserCreated={handleUserCreated}
          currentUserRole={role}
        />
      </div>

      {/* Roles Info - Solo visible para SuperAdmin */}
      {isSuperAdmin && (
        <div className="grid gap-6 md:grid-cols-3">
          <Card>
            <CardHeader>
              <div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-red-50">
                  <Shield className="h-5 w-5 text-red-600" />
                </div>
                <CardTitle className="text-base">SuperAdmin</CardTitle>
              </div>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-slate-600">
                Control total del sistema. Gestiona usuarios, roles y
                configuración global.
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-50">
                  <Shield className="h-5 w-5 text-blue-600" />
                </div>
                <CardTitle className="text-base">Admin</CardTitle>
              </div>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-slate-600">
                Acceso completo a reportes, transcripciones y costos operativos.
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-green-50">
                  <User className="h-5 w-5 text-green-600" />
                </div>
                <CardTitle className="text-base">User</CardTitle>
              </div>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-slate-600">
                Acceso restringido a los reportes autorizados.
              </p>
            </CardContent>
          </Card>
        </div>
      )}

      {/* Users Table */}
      <Card>
        <CardHeader>
          <CardTitle>Lista de Usuarios</CardTitle>
        </CardHeader>
        <CardContent>
          <UsersTable currentUserRole={role} refreshTrigger={refreshTrigger} />
        </CardContent>
      </Card>
    </div>
  );
}