"use client";

import React, { useEffect, useState, useCallback } from "react";
import ManagerLayout from "@/components/manager-layout";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Plus, Edit, Trash2, Eye, Filter, Loader2 } from "lucide-react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

import { usersService } from "services/usersApi.mjs";

interface User {
  user: {
    id: string;
    email: string;
    email_confirmed_at?: string;
    created_at?: string;
    last_sign_in_at?: string;
  };
  profile: {
    id?: string;
    full_name?: string;
    email?: string;
    phone?: string | null;
    avatar_url?: string;
    disabled?: boolean;
    created_at?: string;
    updated_at?: string;
  };
  roles: string[];
  permissions: {
    isAdmin?: boolean;
    isManager?: boolean;
    isDoctor?: boolean;
    isSecretary?: boolean;
    isAdminOrManager?: boolean;
    [key: string]: boolean | undefined;
  };
}


interface FlatUser {
  id: string;
  full_name?: string;
  email: string;
  phone?: string | null;
  role: string;
}


export default function UsersPage() {
  const router = useRouter();

  
  const [users, setUsers] = useState<FlatUser[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
  const [userDetails, setUserDetails] = useState<User | null>(null); 
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [userToDeleteId, setUserToDeleteId] = useState<number | null>(null);
  const [selectedRole, setSelectedRole] = useState<string>("");

  const fetchUsers = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {

      const { data, error } = await usersService.list_roles();
      if (error) throw error;

      if (Array.isArray(data)) {
        setUsers(data as FlatUser[]);
      } else {
        console.warn("Formato inesperado recebido:", data);
        setUsers([]);
      }
    } catch (err: any) {
      console.error("Erro ao buscar usuários:", err);
      setError("Não foi possível carregar os usuários. Tente novamente.");
      setUsers([]);
    } finally {
      setLoading(false);
    }
  }, []);

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

  
  const openDetailsDialog = async (flatUser: FlatUser) => {
    setDetailsDialogOpen(true);
    setUserDetails(null); 
    
    try {
    
      const fullUserData: User = await usersService.full_data(flatUser.id);
  
   
      setUserDetails(fullUserData);
      
    } catch (err: any) {
      console.error("Erro ao buscar detalhes do usuário:", err);
      
      setUserDetails({
        user: {
          id: flatUser.id,
          email: flatUser.email || "",
          created_at: "Erro ao Carregar",
          last_sign_in_at: "Erro ao Carregar",
        },
        profile: {
          full_name: "Erro ao Carregar Detalhes",
          phone: "—",
        },
        roles: [],
        permissions: {},
      } as any);
    }
  };



  const filteredUsers = selectedRole
    ? users.filter((u) => u.role === selectedRole)
    : users;

  return (
    <ManagerLayout>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">Usuários Cadastrados</h1>
            <p className="text-sm text-gray-500">Gerencie todos os usuários e seus papéis no sistema.</p>
          </div>
          <Link href="/manager/usuario/novo">
            <Button className="bg-green-600 hover:bg-green-700">
              <Plus className="w-4 h-4 mr-2" /> Adicionar Novo
            </Button>
          </Link>
        </div>

        
        <div className="flex items-center space-x-4 bg-white p-4 rounded-lg border border-gray-200">
          <Filter className="w-5 h-5 text-gray-400" />
          <Select onValueChange={setSelectedRole} value={selectedRole}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Filtrar por Papel" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="">Todos</SelectItem>
              <SelectItem value="admin">Admin</SelectItem>
              <SelectItem value="gestor">Gestor</SelectItem>
              <SelectItem value="medico">Médico</SelectItem>
              <SelectItem value="secretaria">Secretaria</SelectItem>
              <SelectItem value="user">Usuário</SelectItem>
            </SelectContent>
          </Select>
        </div>

        
        <div className="bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden">
          {loading ? (
            <div className="p-8 text-center text-gray-500">
              <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-green-600" />
              Carregando usuários...
            </div>
          ) : error ? (
            <div className="p-8 text-center text-red-600">{error}</div>
          ) : filteredUsers.length === 0 ? (
            <div className="p-8 text-center text-gray-500">
              Nenhum usuário encontrado.{" "}
              <Link href="/manager/usuario/novo" className="text-green-600 hover:underline">
                Adicione um novo
              </Link>
              .
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nome</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">E-mail</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Telefone</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Papel</th>
                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Ações</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {filteredUsers.map((user) => (
                
                    <tr key={user.id} className="hover:bg-gray-50"> 
                      <td className="px-6 py-4 text-sm text-gray-700">{user.id}</td>
                      <td className="px-6 py-4 text-sm text-gray-900">{user.full_name || "—"}</td>
                      <td className="px-6 py-4 text-sm text-gray-500">{user.email || "—"}</td>
                      <td className="px-6 py-4 text-sm text-gray-500">{user.phone || "—"}</td>
                      <td className="px-6 py-4 text-sm text-gray-500 capitalize">{user.role || "—"}</td>
                      <td className="px-6 py-4 text-right">
                        <div className="flex justify-end space-x-1">
                          <Button
                            variant="outline"
                            size="icon"
                            onClick={() => openDetailsDialog(user)} 
                            title="Visualizar"
                          >
                            <Eye className="h-4 w-4" />
                          </Button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>

   
        <AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle className="text-2xl">
                {userDetails?.profile?.full_name || userDetails?.user?.email || "Detalhes do Usuário"}
              </AlertDialogTitle>
              <AlertDialogDescription>
      
              {!userDetails ? (
                <div className="p-4 text-center text-gray-500">
                    <Loader2 className="w-6 h-6 animate-spin mx-auto mb-3 text-green-600" />
                    Buscando dados completos...
                </div>
              ) : (
                <div className="space-y-3 pt-2 text-left text-gray-700">
                
                 <div><strong>ID:</strong> {userDetails.user.id}</div>
                  <div><strong>E-mail:</strong> {userDetails.user.email}</div>
                  <div><strong>Email confirmado em:</strong> {userDetails.user.email_confirmed_at || "—"}</div>
                  <div><strong>Último login:</strong> {userDetails.user.last_sign_in_at || "—"}</div>
                  <div><strong>Criado em:</strong> {userDetails.user.created_at || "—"}</div>

                 
                  <div><strong>Nome completo:</strong> {userDetails.profile.full_name || "—"}</div>
                  <div><strong>Telefone:</strong> {userDetails.profile.phone || "—"}</div>
                  {userDetails.profile.avatar_url && (
                    <div><strong>Avatar:</strong> <img src={userDetails.profile.avatar_url} className="w-16 h-16 rounded-full mt-1" /></div>
                  )}
                  <div><strong>Conta desativada:</strong> {userDetails.profile.disabled ? "Sim" : "Não"}</div>
                  <div><strong>Profile criado em:</strong> {userDetails.profile.created_at || "—"}</div>
                  <div><strong>Profile atualizado em:</strong> {userDetails.profile.updated_at || "—"}</div>

               
                  <div>
                    <strong>Roles:</strong>
                    <ul className="list-disc list-inside">
                      {userDetails.roles.map((role, idx) => <li key={idx}>{role}</li>)}
                    </ul>
                  </div>

                  <div>
                    <strong>Permissões:</strong>
                    <ul className="list-disc list-inside">
                      {Object.entries(userDetails.permissions).map(([key, value]) => (
                        <li key={key}>{key}: {value ? "Sim" : "Não"}</li>
                      ))}
                    </ul>
                  </div>
                </div>
              )}


              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Fechar</AlertDialogCancel>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </div>
    </ManagerLayout>
  );
}