"use client";

import React, { useEffect, useState, useCallback } from "react";
// REMOVIDO: import ManagerLayout, pois a página já é envolvida pelo layout pai.
import Link from "next/link";
import { Button } from "@/components/ui/button"; 
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Plus, Eye, Filter, Loader2 } from "lucide-react"; 
import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";

// Assumindo caminhos de importação do seu projeto
import { api } from "services/api"; 
import { usuariosApi } from "@/services/usuariosApi"; 
import { perfisApi } from "@/services/perfisApi";
import { UserRole } from "@/services/usuariosApi"; 

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

interface UserInfoResponse {
  user: any;
  profile: any;
  roles: string[];
  permissions: Record<string, boolean>;
}

export default function UsersPage() {
  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<UserInfoResponse | null>(null);
  const [selectedRole, setSelectedRole] = useState<string>("");
  // Estado para armazenar papéis disponíveis dinamicamente
  const [availableRoles, setAvailableRoles] = useState<string[]>([]);

  // Função utilitária para capitalizar a primeira letra
  const capitalize = (s: string) => {
    if (!s) return s;
    return s.charAt(0).toUpperCase() + s.slice(1);
  };

  const fetchUsers = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      // 1) Pega papéis e perfis em paralelo para melhor performance
      const [rolesData, profilesData] = await Promise.all([
        usuariosApi.listRoles(), 
        perfisApi.list()
      ]);

      const rolesArray: UserRole[] = Array.isArray(rolesData) ? rolesData : [];
      
      // 2) Extrair e salvar papéis únicos para o filtro (NOVO)
      const uniqueRoles = new Set<string>();
      rolesArray.forEach(roleItem => {
        // Usa roleItem.role, se existir
        if (roleItem.role) { 
          uniqueRoles.add(roleItem.role);
        }
      });
      // Converter para array, ordenar e atualizar o estado
      setAvailableRoles(Array.from(uniqueRoles).sort());

      const profilesById = new Map<string, any>();
      if (Array.isArray(profilesData)) {
        for (const p of profilesData) {
          // A chave do perfil deve ser o user_id, conforme a lógica anterior
          if (p?.id) profilesById.set(p.id, p);
        }
      }

      // 3) Mapear roles -> flat users
      const mapped: FlatUser[] = rolesArray.map((roleItem) => {
        const uid = roleItem.user_id;
        const profile = profilesById.get(uid);
        
        // Determina o role a ser usado. Prioriza roleItem.role, se não, '—'
        const role = roleItem.role ?? "—"; 
        
        return {
          id: uid,
          user_id: uid,
          full_name: profile?.full_name ?? "—",
          email: profile?.email ?? "—",
          phone: profile?.phone ?? "—",
          role: role,
        };
      });

      setUsers(mapped);
    } catch (err: any) {
      console.error("Erro ao buscar usuários:", err);
      setError("Não foi possível carregar os usuários. Verifique o console.");
      setUsers([]);
      setAvailableRoles([]); // Limpa os papéis em caso de erro
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    const init = async () => {
      // Garante que o interceptor da API seja executado para ler o cookie
      try { 
        await api.get('/'); 
      } catch (e) { 
        console.warn("API setup (leitura de cookie via interceptor) falhou ou o endpoint raiz não existe:", e); 
      }
      
      await fetchUsers();
    };
    init();
  }, [fetchUsers]);

  const openDetailsDialog = async (flatUser: FlatUser) => {
    setDetailsDialogOpen(true);
    setUserDetails(null);
    try {
      // O getFullData usa user_id
      const data = await usuariosApi.getFullData(flatUser.user_id);
      setUserDetails(data);
    } catch (err: any) {
      console.error("Erro ao carregar detalhes:", err);
      // Fallback details em caso de falha na API
      setUserDetails({
        user: { id: flatUser.user_id, email: flatUser.email },
        profile: { full_name: flatUser.full_name, phone: flatUser.phone },
        roles: [flatUser.role],
        permissions: { "read:self": true, "write:profile": false },
      });
    }
  };

  const filteredUsers =
    selectedRole && selectedRole !== "all" ? users.filter((u) => u.role === selectedRole) : users;

  // REMOVIDO: mockUserProfile e mockMenuItems não são mais necessários 
  // pois o ManagerLayout deve ser fornecido pelo arquivo app/manager/layout.tsx


  return (
    // CORRIGIDO: Retornando apenas o conteúdo da página, sem o ManagerLayout
    <div className="space-y-6">
      {/* Conteúdo da página */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Usuários</h1>
          <p className="text-sm text-gray-500">Gerencie usuários.</p>
        </div>
        <Link href="/manager/usuario/novo">
          <Button className="bg-green-600 hover:bg-green-700">
            <Plus className="w-4 h-4 mr-2" /> Novo Usuário
          </Button>
        </Link>
      </div>
      {/* Filtros */}
      <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="all">Todos</SelectItem>
            {availableRoles.map(role => (
              <SelectItem key={role} value={role}>
                {capitalize(role)}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      {/* Tabela de Usuários */}
      <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{selectedRole && selectedRole !== 'all' ? ` para o papel: ${capitalize(selectedRole)}` : '.'}</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">Cargo</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((u) => (
                  <tr key={u.id} className="hover:bg-gray-50">
                    <td className="px-6 py-4 text-sm text-gray-500">{u.id}</td>
                    <td className="px-6 py-4 text-sm text-gray-900">{u.full_name}</td>
                    <td className="px-6 py-4 text-sm text-gray-500">{u.email}</td>
                    <td className="px-6 py-4 text-sm text-gray-500">{u.phone}</td>
                    <td className="px-6 py-4 text-sm text-gray-500 capitalize">{capitalize(u.role)}</td>
                    <td className="px-6 py-4 text-right">
                      <Button variant="outline" size="icon" onClick={() => openDetailsDialog(u)} title="Visualizar">
                        <Eye className="h-4 w-4" />
                      </Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>}
      </div>
      {/* Diálogo de Detalhes */}
      <AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle className="text-2xl">{userDetails?.profile?.full_name || "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>Nome completo:</strong> {userDetails.profile.full_name}</div>
                  <div><strong>Telefone:</strong> {userDetails.profile.phone}</div>
                  <div><strong>Roles:</strong> {userDetails.roles?.map(capitalize).join(", ")}</div>
                  <div><strong>Permissões:</strong>
                      <ul className="list-disc list-inside mt-1 ml-4 text-sm">
                          {Object.entries(userDetails.permissions || {}).map(([k,v]) => <li key={k}>{k}: <strong className={`${v ? 'text-green-600' : 'text-red-600'}`}>{v ? "Sim" : "Não"}</strong></li>)}
                      </ul>
                  </div>
                </div>}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter><AlertDialogCancel>Fechar</AlertDialogCancel></AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}