import React, { useState, useEffect, useMemo } from "react";
import { useNavigate } from 'react-router-dom';
import { UserRole, EventData, EventStatus, EventType, Professional } from "../types";
import { EventTable } from "../components/EventTable";
import { EventFiltersBar, EventFilters } from "../components/EventFiltersBar";
import { EventForm } from "../components/EventForm";
import { Button } from "../components/Button";
import {
  PlusCircle,
  Search,
  CheckCircle,
  Clock,
  Edit,
  Users,
  Map,
  Building2,
  Calendar,
  MapPin,
  X,
  UserCheck,
  UserX,
  AlertCircle,
  Star,
} from "lucide-react";
import { setCoordinator, finalizeFOT, getPrice } from "../services/apiService";
import { useAuth } from "../contexts/AuthContext";
import { useData } from "../contexts/DataContext";
import { STATUS_COLORS } from "../constants";
import { ProfessionalDetailsModal } from "../components/ProfessionalDetailsModal";

interface DashboardProps {
  initialView?: "list" | "create";
}

export const Dashboard: React.FC<DashboardProps> = ({
  initialView = "list",
}) => {
  const { user, token } = useAuth();
  const navigate = useNavigate();
  // Extract updateEventDetails from useData
  const {
    events,
    getEventsByRole,
    addEvent,
    updateEventStatus,
    assignPhotographer,
    professionals,
    getInstitutionById,
    getActiveCoursesByInstitutionId,
    respondToAssignment,
    updateEventDetails,
    functions,
    isLoading,
    refreshEvents,
  } = useData();

  // ... (inside component)

  const handleSaveEvent = async (data: any) => {
    const isClient = user.role === UserRole.EVENT_OWNER;

    if (view === "edit" && selectedEvent) {
      if (updateEventDetails) {
        await updateEventDetails(selectedEvent.id, data);
        // Force reload of view to reflect changes (or rely on DataContext optimistic update)
        // But DataContext optimistic update only touched generic fields.
        // Address might still be old in 'selectedEvent' state if we don't update it.
        // Updating selectedEvent manually as well to be safe, mapping snake_case payload to camelCase state:
        const updatedEvent = { 
          ...selectedEvent, 
          ...data, 
          date: data.date || data.data_evento?.split('T')[0] || selectedEvent.date,
          // Map snake_case fields used in EventForm payload to camelCase fields used in UI
          qtdFormandos: data.qtd_formandos ?? selectedEvent.qtdFormandos,
          qtdFotografos: data.qtd_fotografos ?? selectedEvent.qtdFotografos,
          qtdRecepcionistas: data.qtd_recepcionistas ?? selectedEvent.qtdRecepcionistas,
          qtdCinegrafistas: data.qtd_cinegrafistas ?? selectedEvent.qtdCinegrafistas,
          qtdEstudios: data.qtd_estudios ?? selectedEvent.qtdEstudios,
          qtdPontosFoto: data.qtd_pontos_foto ?? selectedEvent.qtdPontosFoto,
          qtdPontosDecorados: data.qtd_pontos_decorados ?? selectedEvent.qtdPontosDecorados,
          qtdPontosLed: data.qtd_pontos_led ?? selectedEvent.qtdPontosLed,
          qtdPlataforma360: data.qtd_plataforma_360 ?? selectedEvent.qtdPlataforma360,
          name: data.observacoes_evento || selectedEvent.name,
          briefing: data.observacoes_evento || selectedEvent.briefing,
          time: data.horario || selectedEvent.time,
        };
        setSelectedEvent(updatedEvent);
        setView("details");
        // Reloading window to ensure total consistency with backend as fallback
        // window.location.reload(); // Commented out to try SPA update first
      } else {
        console.error("Update function not available");
      }
    } else {
      const initialStatus = isClient
        ? EventStatus.PENDING_APPROVAL
        : EventStatus.PLANNING;
      const newEvent: EventData = {
        ...data,
        id: Math.random().toString(36).substr(2, 9),
        status: initialStatus,
        checklist: [],
        ownerId: isClient ? user.id : "unknown",
        photographerIds: [],
      };
      await addEvent(newEvent);
      setView("list");
    }
  };
  const [view, setView] = useState<"list" | "create" | "edit" | "details">(() => {
    const params = new URLSearchParams(window.location.search);
    return params.get("eventId") ? "details" : initialView;
  });
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedEvent, setSelectedEvent] = useState<EventData | null>(() => {
    const params = new URLSearchParams(window.location.search);
    const eventId = params.get("eventId");
    if (eventId && events.length > 0) {
       return events.find(e => e.id === eventId) || null;
    }
    return null;
  });

  // Effect to sync selectedEvent if events load LATER than initial render
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const eventId = params.get("eventId");
    if (eventId && events.length > 0 && !selectedEvent) {
       const found = events.find(e => e.id === eventId);
       if (found) {
         setSelectedEvent(found);
         // Ensure view is details if we just found it
         setView("details"); 
       }
    }
  }, [events, window.location.search]);
  const [activeFilter, setActiveFilter] = useState<string>("all");
  const [advancedFilters, setAdvancedFilters] = useState<EventFilters>({
    date: "",
    fotId: "",
    type: "",
    company: "",
    institution: "",
  });
  const [isTeamModalOpen, setIsTeamModalOpen] = useState(false);
  const [viewingProfessional, setViewingProfessional] = useState<Professional | null>(null);
  
  // Estados para filtros do modal de equipe
  const [teamSearchTerm, setTeamSearchTerm] = useState("");
  const [teamRoleFilter, setTeamRoleFilter] = useState("all");
  const [teamStatusFilter, setTeamStatusFilter] = useState("all");
  const [teamAvailabilityFilter, setTeamAvailabilityFilter] = useState("all");
  const [roleSelectionProf, setRoleSelectionProf] = useState<Professional | null>(null);
  const [basePrice, setBasePrice] = useState<number | null>(null);

  useEffect(() => {
    const fetchBasePrice = async () => {
        if (!selectedEvent || !user || !token) {
            setBasePrice(null);
            return;
        }

        // Only for professionals (skip owners/admins unless they want to see it? User asked for professional view)
        // If user is admin but viewing as professional context? No, user req specifically: "ao convidar um profissional... no painel dele"
        if (user.role === UserRole.EVENT_OWNER || user.role === UserRole.BUSINESS_OWNER || user.role === UserRole.SUPERADMIN) {
             setBasePrice(null);
             return;
        }

        const currentProf = professionals.find(p => p.usuarioId === user.id);
        if (!currentProf) return;

        // Determine Service Name
        let serviceName = "";
        
        // 1. Check assignment
        const assignment = selectedEvent.assignments?.find(a => a.professionalId === currentProf.id);
        if (assignment && assignment.funcaoId && functions) {
            const fn = functions.find(f => f.id === assignment.funcaoId);
            if (fn) serviceName = fn.nome;
        }

        // 2. Fallback to professional functions/role
        if (!serviceName) {
            if (currentProf.functions && currentProf.functions.length > 0) {
                 // Use first function as default base? Or try to match?
                 // Simple approach: use first.
                 serviceName = currentProf.functions[0].nome;
            } else {
                 serviceName = currentProf.role;
            }
        }
        
        // Map legacy roles if needed (Backend expects names matching tipos_servicos)
        // e.g. "fotografo" -> "Fotografia"? Check backend migration/seeds.
        // Assuming names match or backend handles fuzzy match. 
        // Backend GetStandardPrice uses ILIKE on tipos_servicos.nome. 
        // "Fotógrafo" might need to map to "Fotografia". 
        // "Cinegrafista" -> "Cinegrafia".
        // Let's try raw first, but maybe normalize if needed.
        // Actually, let's map common ones just in case.
        // Map legacy roles and English enums
        const serviceLower = serviceName.toLowerCase();
        if (serviceLower.includes("fot") || serviceLower === "photographer") serviceName = "Fotógrafo";
        else if (serviceLower.includes("cine") || serviceLower === "videographer") serviceName = "Cinegrafista";
        else if (serviceLower.includes("recep")) serviceName = "Recepcionista";
        else if (serviceLower === "drone") serviceName = "Drone"; // Example

        console.log("Fetch Base Price Debug:", { 
            currentProfId: currentProf.id, 
            assignmentFound: !!assignment, 
            rawService: serviceLower, 
            finalService: serviceName, 
            eventType: selectedEvent.type 
        });

        if (serviceName && selectedEvent.type) {
            try {
                const res = await getPrice(token, selectedEvent.type, serviceName);
                console.log("Fetch Base Price Result:", res);
                if (res.data) {
                    setBasePrice(res.data.valor);
                } else {
                    console.warn("Base Price returned no data");
                    setBasePrice(0);
                }
            } catch (err) {
                console.error("Error fetching base price:", err);
                setBasePrice(0);
            }
        } else {
            console.warn("Skipping price fetch: Missing serviceName or eventType");
        }
    };


    fetchBasePrice();
  }, [selectedEvent, user, token, professionals, functions]);

  // ... (existing code) ...

  // Inside render (around line 1150 in original file, need to find the "Time" card)
  // Look for: <div className="bg-gray-50 p-4 rounded-sm border border-gray-100"> ... Horário ... </div>


  useEffect(() => {
    if (initialView) {
      setView(initialView);
      if (initialView === "create") setSelectedEvent(null);
    }
  }, [initialView]);

  const handleViewProfessional = (professional: Professional) => {
    setViewingProfessional(professional);
  };

  // Função para calcular profissionais faltantes e status
  const calculateTeamStatus = (event: EventData) => {
    const assignments = event.assignments || [];
    
    // Contadores de profissionais aceitos por tipo
    // Helper to check if professional has a specific role
    const hasRole = (professional: Professional | undefined, roleSlug: string, assignedFuncaoId?: string) => {
      if (!professional) return false;
      const term = roleSlug.toLowerCase();
      
      // 1. If assignment has explicit function, check it
      if (assignedFuncaoId) {
         const fn = functions.find(f => f.id === assignedFuncaoId);
         if (fn && fn.nome.toLowerCase().includes(term)) return true;
         // If term didn't match the assigned function, return false (exclusive assignment)
         // Unless we fallback? No, if assigned as Cine, shouldn't count as Fot.
         if (fn) return false; 
      }

      // 2. Fallback to existing logic (capabilities) if no function assigned
      // Check functions array first (new multi-role system)
      if (professional.functions && professional.functions.length > 0) {
        return professional.functions.some(f => f.nome.toLowerCase().includes(term));
      }
      
      // Fallback to legacy role field
      return (professional.role || "").toLowerCase().includes(term);
    };

    // Contadores de profissionais aceitos por tipo
    const acceptedFotografos = assignments.filter(a => 
      a.status === "ACEITO" && hasRole(professionals.find(p => p.id === a.professionalId), "fot", a.funcaoId)
    ).length;
    
    const pendingFotografos = assignments.filter(a => 
      a.status === "PENDENTE" && hasRole(professionals.find(p => p.id === a.professionalId), "fot", a.funcaoId)
    ).length;
    
    const acceptedRecepcionistas = assignments.filter(a => 
      a.status === "ACEITO" && hasRole(professionals.find(p => p.id === a.professionalId), "recep", a.funcaoId)
    ).length;

    const pendingRecepcionistas = assignments.filter(a => 
      a.status === "PENDENTE" && hasRole(professionals.find(p => p.id === a.professionalId), "recep", a.funcaoId)
    ).length;
    
    const acceptedCinegrafistas = assignments.filter(a => 
      a.status === "ACEITO" && hasRole(professionals.find(p => p.id === a.professionalId), "cine", a.funcaoId)
    ).length;

    const pendingCinegrafistas = assignments.filter(a => 
      a.status === "PENDENTE" && hasRole(professionals.find(p => p.id === a.professionalId), "cine")
    ).length;

    // Quantidades necessárias
    const qtdFotografos = event.qtdFotografos || 0;
    const qtdRecepcionistas = event.qtdRecepcionistas || 0;
    const qtdCinegrafistas = event.qtdCinegrafistas || 0;

    // Calcular faltantes
    const fotoFaltante = Math.max(0, qtdFotografos - acceptedFotografos);
    const recepFaltante = Math.max(0, qtdRecepcionistas - acceptedRecepcionistas);
    const cineFaltante = Math.max(0, qtdCinegrafistas - acceptedCinegrafistas);

    // Verificar se todos os profissionais estão OK
    const profissionaisOK = fotoFaltante === 0 && recepFaltante === 0 && cineFaltante === 0;

    return {
      acceptedFotografos,
      pendingFotografos,
      acceptedRecepcionistas,
      pendingRecepcionistas,
      acceptedCinegrafistas,
      pendingCinegrafistas,
      fotoFaltante,
      recepFaltante,
      cineFaltante,
      profissionaisOK,
      qtdFotografos,
      qtdRecepcionistas,
      qtdCinegrafistas
    };
  };

  const handleSetCoordinator = async (professionalId: string, currentStatus: boolean) => {
    if (!user || !selectedEvent) return;
    const token = localStorage.getItem("token");
    if (!token) return;

    const res = await setCoordinator(token, selectedEvent.id, professionalId, !currentStatus);
    if (res.error) {
        alert("Erro ao definir coordenador: " + res.error);
    } else {
        // Optimistic update
        setSelectedEvent(prev => prev ? ({
            ...prev,
            assignments: prev.assignments?.map(a => 
                a.professionalId === professionalId ? { ...a, is_coordinator: !currentStatus } : a
            )
        }) : null);
        
        // Force refresh to get data from server and persist color
        setTimeout(() => {
            refreshEvents();
        }, 500);
    }
  };

  // Função para fechar modal de equipe e limpar filtros
  const closeTeamModal = () => {
    setIsTeamModalOpen(false);
    setTeamSearchTerm("");
    setTeamRoleFilter("all");
    setTeamStatusFilter("all");
    setTeamAvailabilityFilter("all");
  };

  const [processingIds, setProcessingIds] = useState<Set<string>>(new Set());
  const [teamPage, setTeamPage] = useState(1);
  const ITEMS_PER_PAGE = 20;

  // Optimização 1: Pre-calcular status de ocupação (remove complexidade O(N*M) de dentro do loop)
  const busyProfessionalIds = useMemo(() => {
    if (!selectedEvent) return new Set<string>();
    const busySet = new Set<string>();
    
    // Itera eventos apenas UMA vez
    for (const e of events) {
      if (e.id !== selectedEvent.id && e.date === selectedEvent.date) {
        if (e.assignments) {
           for (const a of e.assignments) {
             if (a.status === 'ACEITO') {
               busySet.add(a.professionalId);
             }
           }
        }
      }
    }
    return busySet;
  }, [events, selectedEvent]);

  // Função para filtrar profissionais no modal de equipe
  const filteredTeamProfessionals = useMemo(() => {
    if (!selectedEvent) return professionals;
    
    // Reset page when filters change
    setTeamPage(1);

    return professionals.filter((professional) => {
      // Filter out professionals with unknown roles
      if (functions.length > 0) {
        const isValidRole = functions.some(f => f.id === professional.funcao_profissional_id);
        if (!isValidRole) return false;
      }

      // Filtro por busca (nome ou email)
      if (teamSearchTerm) {
        const searchLower = teamSearchTerm.toLowerCase();
        const nameMatch = (professional.name || professional.nome || "").toLowerCase().includes(searchLower);
        const emailMatch = (professional.email || "").toLowerCase().includes(searchLower);
        if (!nameMatch && !emailMatch) return false;
      }

      // Filtro por função/role
      if (teamRoleFilter !== "all") {
        const professionalFunctions = professional.functions || [];
        const hasMatchingFunction = professionalFunctions.some(f => f.id === teamRoleFilter);
        const hasMatchingPrimaryRole = professional.funcao_profissional_id === teamRoleFilter;
        if (!hasMatchingFunction && !hasMatchingPrimaryRole) return false;
      }

      // Verificar assignment no evento atual
      // Otimização: Evitar criar array intermediário com filter/find se possível, mas aqui é pequeno (assignments do evento)
      const assignment = (selectedEvent.assignments || []).find(
        (a) => a.professionalId === professional.id
      );
      const status = assignment ? assignment.status : null;
      const isAssigned = !!status && status !== "REJEITADO";
      
      // Otimização 2: Usar o Set pré-calculado (O(1))
      const isBusy = !isAssigned && busyProfessionalIds.has(professional.id);

      // Filtro por status
      if (teamStatusFilter !== "all") {
        switch (teamStatusFilter) {
          case "assigned": if (!isAssigned) return false; break;
          case "available": if (isAssigned || isBusy) return false; break;
          case "busy": if (!isBusy) return false; break;
          case "rejected": if (!status || status !== "REJEITADO") return false; break;
        }
      }

      // Filtro por disponibilidade
      if (teamAvailabilityFilter !== "all") {
        switch (teamAvailabilityFilter) {
          case "available": if (isAssigned || isBusy) return false; break;
          case "unavailable": if (!isAssigned && !isBusy) return false; break;
        }
      }

      return true;
    });
  }, [
    selectedEvent,
    professionals,
    functions,
    teamSearchTerm,
    teamRoleFilter,
    teamStatusFilter,
    teamAvailabilityFilter,
    busyProfessionalIds // Depende apenas do Set otimizado
  ]);

  // Paginação
   const displayedTeamProfessionals = useMemo(() => {
        return filteredTeamProfessionals.slice(0, teamPage * ITEMS_PER_PAGE);
   }, [filteredTeamProfessionals, teamPage]);

  // Guard Clause for basic security
  if (!user)
    return <div className="p-10 text-center">Acesso Negado. Faça login.</div>;

  const myEvents = getEventsByRole(user.id, user.role);

  const currentProfessionalId =
    user.role === UserRole.PHOTOGRAPHER
      ? professionals.find((p) => p.usuarioId === user.id)?.id
      : undefined;

  // Extract unique values for filters
  const { availableTypes, availableCompanies, availableInstitutions } = useMemo(() => {
    const types = [...new Set(myEvents.map((e) => e.type))].sort();
    const companies = [...new Set(myEvents.map((e) => e.empresa).filter(Boolean))].sort();
    const institutions = [...new Set(myEvents.map((e) => e.instituicao).filter(Boolean))].sort();
    return {
      availableTypes: types,
      availableCompanies: companies,
      availableInstitutions: institutions,
    };
  }, [myEvents]);

  // Removed the previous useEffect for eventId to avoid conflicts with the new initialization logic 
  // and separate sync effect above.
  /*
  // Check for eventId in URL on mount
    useEffect(() => {
       ...
    }, [events, window.location.search]);
  */

  // Combined filtering logic
  const filteredEvents = myEvents.filter((e) => {
    const matchesSearch = e.name
      .toLowerCase()
      .includes(searchTerm.toLowerCase());
    const matchesStatus =
      activeFilter === "all" ||
      (activeFilter === "pending" &&
        e.status === EventStatus.PENDING_APPROVAL) ||
      (activeFilter === "active" &&
        e.status !== EventStatus.ARCHIVED &&
        e.status !== EventStatus.PENDING_APPROVAL);

    // Advanced filters
    const matchesDate =
      !advancedFilters.date || e.date === advancedFilters.date;
    const matchesFot =
      !advancedFilters.fotId ||
      String(e.fot || "").toLowerCase().includes(advancedFilters.fotId.toLowerCase());
    const matchesType =
      !advancedFilters.type || e.type === advancedFilters.type;
    const matchesCompany =
      !advancedFilters.company || e.empresa === advancedFilters.company;
    const matchesInstitution =
      !advancedFilters.institution || e.instituicao === advancedFilters.institution;
      
    // New FOT Status Filter
    const matchesFotStatus = 
       !advancedFilters.fotStatus || 
       (advancedFilters.fotStatus === 'finalizada' && e.fot_finalizada) ||
       (advancedFilters.fotStatus === 'pre_venda' && (e.fot_pre_venda || e.pre_venda)) ||
       (advancedFilters.fotStatus === 'normal' && !e.fot_finalizada && !e.fot_pre_venda && !e.pre_venda);

    return (
      matchesSearch && matchesStatus && matchesDate && matchesFot && matchesType && matchesCompany && matchesInstitution && matchesFotStatus
    );
  });

  // Keep selectedEvent in sync with global events state
  useEffect(() => {
    if (selectedEvent) {
      const updated = events.find((e) => e.id === selectedEvent.id);
      if (updated && updated !== selectedEvent) {
        setSelectedEvent(updated);
      }
    }
  }, [events, selectedEvent]);

  const handleApprove = (e: React.MouseEvent, eventId: string) => {
    e.stopPropagation();
    updateEventStatus(eventId, EventStatus.CONFIRMED);
  };

  const handleReject = (e: React.MouseEvent, eventId: string, reason?: string) => {
    e.stopPropagation();
    updateEventStatus(eventId, EventStatus.ARCHIVED, reason);
  };

  const handleAssignmentResponse = async (
    e: React.MouseEvent,
    eventId: string,
    status: string,
    reason?: string
  ) => {
    e.stopPropagation();

    // Validação de Lotação da Equipe (Apenas para Aceite)
    if (status === "ACEITO") {
      const targetEvent = events.find(evt => evt.id === eventId);
      const currentProfessional = professionals.find(p => p.usuarioId === user.id);

      if (targetEvent && currentProfessional) {
        // Reutilizando lógica de contagem (adaptada de calculateTeamStatus)
        // Precisamos recalcular pois calculateTeamStatus depende de selectedEvent que pode não ser o alvo aqui
        
        const assignments = targetEvent.assignments || [];
        
        const hasRole = (professional: Professional | undefined, roleSlug: string) => {
          if (!professional) return false;
          const term = roleSlug.toLowerCase();
          if (professional.functions && professional.functions.length > 0) {
            return professional.functions.some(f => f.nome.toLowerCase().includes(term));
          }
          return (professional.role || "").toLowerCase().includes(term);
        };

        // Helper to check if assignment handles a specific role (using ID first, then fallback)
        const isAssignedToRole = (assignment: any, roleSlug: string) => {
             if (assignment.funcaoId && functions) {
                const func = functions.find(f => f.id === assignment.funcaoId);
                if (func) return func.nome.toLowerCase().includes(roleSlug.toLowerCase());
             }
             // Fallback only if no function assigned
             if (!assignment.funcaoId) {
                const p = professionals.find(pr => pr.id === assignment.professionalId);
                return hasRole(p, roleSlug);
             }
             return false;
        };

        // Contagens Atuais (Updated to match EventTable logic)
        const acceptedFot = assignments.filter(a => a.status === "ACEITO" && isAssignedToRole(a, "fot")).length;
        const acceptedRecep = assignments.filter(a => a.status === "ACEITO" && isAssignedToRole(a, "recep")).length;
        const acceptedCine = assignments.filter(a => a.status === "ACEITO" && isAssignedToRole(a, "cine")).length;

        // Limites
        const reqFot = targetEvent.qtdFotografos || 0;
        const reqRecep = targetEvent.qtdRecepcionistas || 0;
        const reqCine = targetEvent.qtdCinegrafistas || 0;

        // Find OUR assignment to know what we are accepting
        const myAssignment = assignments.find(a => a.professionalId === currentProfessional.id);

        const checkQuota = (roleSlugs: string[], acceptedCount: number, requiredCount: number, roleName: string) => {
           // Only check quota if I am assigned to this role
           if (myAssignment) {
                if (isAssignedToRole(myAssignment, roleSlugs[0])) { // Using first slug as proxy for role group
                     if (acceptedCount >= requiredCount) {
                        return `A equipe de ${roleName} já está completa (${acceptedCount}/${requiredCount}).`;
                     }
                }
           } else {
               // Fallback if no assignment found (shouldn't happen for existing invite)
               const isProfessionalRole = roleSlugs.some(slug => hasRole(currentProfessional, slug));
               if (isProfessionalRole && acceptedCount >= requiredCount) {
                    return `A equipe de ${roleName} já está completa (${acceptedCount}/${requiredCount}).`;
               }
           }
           return null;
        };
        
        const errors = [];
        
        const errFot = checkQuota(["fot"], acceptedFot, reqFot, "Fotografia");
        if (errFot) errors.push(errFot);

        const errRecep = checkQuota(["recep"], acceptedRecep, reqRecep, "Recepção");
        if (errRecep) errors.push(errRecep);

        const errCine = checkQuota(["cine"], acceptedCine, reqCine, "Cinegrafia");
        if (errCine) errors.push(errCine);

        if (errors.length > 0) {
          alert(`Não foi possível aceitar o convite:\n\n${errors.join("\n")}\n\nEntre em contato com a administração.`);
          return; // Bloqueia a ação
        }
      }
    }

    await respondToAssignment(eventId, status, reason);
  };

  const handleOpenMaps = () => {
    if (!selectedEvent) return;
    if (selectedEvent.address.mapLink) {
      window.open(selectedEvent.address.mapLink, "_blank");
      return;
    }
    const { street, number, city, state } = selectedEvent.address;
    const query = encodeURIComponent(
      `${street}, ${number}, ${city} - ${state}`
    );
    window.open(
      `https://www.google.com/maps/search/?api=1&query=${query}`,
      "_blank"
    );
  };

  const handleApproveEvent = async (e: React.MouseEvent) => {
    e.stopPropagation();
    if (selectedEvent) {
        if(window.confirm("Tem certeza que deseja aprovar este evento?")) {
            await updateEventStatus(selectedEvent.id, EventStatus.CONFIRMED);
            // Optimistically update
            setSelectedEvent({ ...selectedEvent, status: EventStatus.CONFIRMED });
        }
    }
  };

  const handleFinalizeClass = async (e: React.MouseEvent, eventToFinalize?: EventData) => {
    e.stopPropagation();
    const targetEvent = eventToFinalize || selectedEvent;

    if (!targetEvent || !targetEvent.fotId) return;

    // Check permissions (Optional, backend also checks)
    if (user.role !== UserRole.SUPERADMIN && user.role !== UserRole.BUSINESS_OWNER) {
        alert("Você não tem permissão para finalizar turmas.");
        return;
    }
    
    const isFinalized = targetEvent.fot_finalizada;
    const action = isFinalized ? "reabrir" : "finalizar";
    
    if(window.confirm(`Tem certeza que deseja ${action} a turma ${targetEvent.fot}?`)) {
        try {
            if (!token) {
                alert("Erro de autenticação. Tente fazer login novamente.");
                return;
            }
            await finalizeFOT(targetEvent.fotId, !isFinalized, token);
            alert(`Turma ${action === "reabrir" ? "reaberta" : "finalizada"} com sucesso!`);
            
            // Refresh events list
            if (refreshEvents) {
                refreshEvents();
            }
            
            // Update selected event if it matches
            if (selectedEvent && selectedEvent.fotId === targetEvent.fotId) {
                setSelectedEvent({ ...selectedEvent, fot_finalizada: !isFinalized });
            }
            
        } catch (error: any) {
            alert("Erro ao alterar status da turma: " + error.message);
        }
    }
  };

  const handleManageTeam = () => {
    setIsTeamModalOpen(true);
  };

  const togglePhotographer = async (photographerId: string) => {
    if (!selectedEvent) return;
    if (processingIds.has(photographerId)) return; // Prevent double click

    const prof = professionals.find(p => p.id === photographerId);
    
    const assignment = selectedEvent.assignments?.find(a => a.professionalId === photographerId);
    if (!assignment && prof && prof.functions && prof.functions.length > 1) {
      setRoleSelectionProf(prof);
      return;
    }

    setProcessingIds(prev => new Set(prev).add(photographerId));
    try {
        await assignPhotographer(selectedEvent.id, photographerId);
    } finally {
        setProcessingIds(prev => {
            const next = new Set(prev);
            next.delete(photographerId);
            return next;
        });
    }
  };
  
  const handleRoleSelect = async (funcaoId: string) => {
    if (roleSelectionProf && selectedEvent) {
        setProcessingIds(prev => new Set(prev).add(roleSelectionProf.id));
        try {
            await assignPhotographer(selectedEvent.id, roleSelectionProf.id, funcaoId);
        } finally {
            setProcessingIds(prev => {
                const next = new Set(prev);
                next.delete(roleSelectionProf.id);
                return next;
            });
            setRoleSelectionProf(null);
        }
    }
  };

  // --- RENDERS PER ROLE ---

  const renderRoleSpecificHeader = () => {
    if (user.role === UserRole.EVENT_OWNER) {
      return (
        <div>
          <h1 className="text-xl sm:text-2xl md:text-3xl font-serif font-bold text-brand-black">
            Meus Eventos
          </h1>
          <p className="text-xs sm:text-sm text-gray-500 mt-0.5 sm:mt-1">
            Acompanhe seus eventos ou solicite novos orçamentos.
          </p>
        </div>
      );
    }
    if (user.role === UserRole.PHOTOGRAPHER) {
      return (
        <div>
          <h1 className="text-xl sm:text-2xl md:text-3xl font-serif font-bold text-brand-black">
            Eventos Designados
          </h1>
          <p className="text-xs sm:text-sm text-gray-500 mt-0.5 sm:mt-1">
            Gerencie seus trabalhos e visualize detalhes.
          </p>
        </div>
      );
    }
    return (
      <div>
        <h1 className="text-xl sm:text-2xl md:text-3xl font-serif font-bold text-brand-black">
          Gestão Geral
        </h1>
        <p className="text-xs sm:text-sm text-gray-500 mt-0.5 sm:mt-1">
          Controle total de eventos, aprovações e equipes.
        </p>
      </div>
    );
  };

  const renderRoleSpecificActions = () => {
    if (user.role === UserRole.PHOTOGRAPHER || user.role === UserRole.AGENDA_VIEWER || user.role === UserRole.RESEARCHER) return null;

    const label =
      user.role === UserRole.EVENT_OWNER
        ? "Solicitar Novo Evento"
        : "Novo Evento";

    return (
      <Button onClick={() => setView("create")} className="shadow-lg">
        <PlusCircle className="mr-2 h-5 w-5" /> {label}
      </Button>
    );
  };

  // --- MAIN RENDER ---

  return (
    <div className="min-h-screen bg-gray-50 pt-20 sm:pt-24 md:pt-28 lg:pt-32 pb-8 sm:pb-12 px-3 sm:px-4 lg:px-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        {view === "list" && !new URLSearchParams(window.location.search).get("eventId") && (
          <div className="flex flex-col md:flex-row md:items-center justify-between mb-6 sm:mb-8 gap-3 sm:gap-4 fade-in">
            {renderRoleSpecificHeader()}
            {renderRoleSpecificActions()}
          </div>
        )}

        {/* Content Switcher */}
        {view === "list" && !new URLSearchParams(window.location.search).get("eventId") && (
          <div className="space-y-6 fade-in">
            {/* Search Bar */}
            <div className="flex flex-col sm:flex-row gap-4 items-center justify-between bg-gray-50 p-3 rounded-lg border border-gray-100">
              <div className="relative flex-1 w-full">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                <input
                  type="text"
                  placeholder="Buscar evento..."
                  className="w-full pl-10 pr-4 py-2 bg-white border border-gray-200 rounded-sm focus:outline-none focus:border-brand-gold text-sm"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>

              {(user.role === UserRole.BUSINESS_OWNER ||
                user.role === UserRole.SUPERADMIN) && (
                  <div className="flex space-x-2 bg-white p-1 rounded border border-gray-200">
                    <button
                      onClick={() => setActiveFilter("all")}
                      className={`px-3 py-1 text-xs font-medium rounded-sm ${activeFilter === "all"
                        ? "bg-brand-black text-white"
                        : "text-gray-600 hover:bg-gray-100"
                        }`}
                    >
                      Todos
                    </button>
                    <button
                      onClick={() => setActiveFilter("pending")}
                      className={`px-3 py-1 text-xs font-medium rounded-sm flex items-center ${activeFilter === "pending"
                        ? "bg-brand-gold text-white"
                        : "text-gray-600 hover:bg-gray-100"
                        }`}
                    >
                      <Clock size={12} className="mr-1" /> Pendentes
                    </button>
                  </div>
                )}
            </div>

            {/* Advanced Filters */}
            <EventFiltersBar
              filters={advancedFilters}
              onFilterChange={setAdvancedFilters}
              availableTypes={availableTypes}
              availableCompanies={availableCompanies}
              availableInstitutions={availableInstitutions}
            />

            {/* Results Count */}
            <div className="flex items-center justify-between text-sm text-gray-600">
              <span>
                Exibindo{" "}
                <strong className="text-brand-gold">
                  {filteredEvents.length}
                </strong>{" "}
                de <strong>{myEvents.length}</strong> eventos
              </span>
            </div>

            {/* Event Table */}
            <EventTable
              events={filteredEvents}
              onEventClick={(event) => {
                setSelectedEvent(event);
                setView("details");
              }}
              onApprove={handleApprove}
              onReject={handleReject}
              userRole={user.role}
              currentProfessionalId={currentProfessionalId}
              onAssignmentResponse={handleAssignmentResponse}
              isManagingTeam={true} // Permitir aprovação na gestão geral
              professionals={professionals} // Adicionar lista de profissionais
              functions={functions}
              isLoading={isLoading}
              onFinalizeClass={handleFinalizeClass}
            />
          </div>
        )}

        {(view === "create" || view === "edit") && (
          <EventForm
            onCancel={() => setView(view === "edit" ? "details" : "list")}
            onSubmit={handleSaveEvent}
            initialData={view === "edit" ? selectedEvent : undefined}
          />
        )}


        {/* Loading State for Deep Link */ }
        {(!!new URLSearchParams(window.location.search).get("eventId") && (!selectedEvent || view !== "details")) && (
             <div className="flex flex-col items-center justify-center py-20 fade-in">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-purple mb-4"></div>
                <p className="text-gray-500">Carregando detalhes do evento...</p>
             </div>
        )}

        {view === "details" && selectedEvent && (
          <div className="fade-in">
            <Button
              variant="ghost"
              onClick={() => setView("list")}
              className="mb-4 pl-0"
            >
              ← Voltar para lista
            </Button>

            {/* Status Banner */}
            {selectedEvent.status === EventStatus.PENDING_APPROVAL &&
              user.role === UserRole.EVENT_OWNER && (
                <div className="bg-yellow-50 border border-yellow-200 text-yellow-800 p-4 rounded-lg mb-6 flex items-start">
                  <Clock className="mr-3 flex-shrink-0" />
                  <div>
                    <h4 className="font-bold">Solicitação em Análise</h4>
                    <p className="text-sm mt-1">
                      Seu evento foi enviado e está aguardando aprovação da
                      equipe Photum.
                    </p>
                  </div>
                </div>
              )}

            <div className="bg-white border rounded-lg overflow-hidden shadow-sm">
              {/* Header Section - Sem foto */}
              <div className="bg-gradient-to-r from-brand-gold/5 to-brand-black/5 border-b-2 border-brand-gold p-6">
                <div className="flex items-start justify-between">
                  <div>
                    <h1 className="text-3xl font-serif font-bold text-brand-black mb-2">
                      {selectedEvent.name}
                    </h1>
                    <div className="flex flex-wrap gap-3 text-sm text-gray-600">
                      <span className="flex items-center gap-1">
                        <Calendar size={16} className="text-brand-gold" />
                        {new Date(
                          selectedEvent.date + "T00:00:00"
                        ).toLocaleDateString("pt-BR")}{" "}
                        às {selectedEvent.time}
                      </span>
                      <span className="flex items-center gap-1">
                        <MapPin size={16} className="text-brand-gold" />
                        {selectedEvent.address.city},{" "}
                        {selectedEvent.address.state}
                      </span>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    {/* Badge de Finalizada */}
                    {(selectedEvent.fot_finalizada) && (
                      <div className="px-4 py-2 rounded text-sm font-semibold bg-red-100 text-red-800 border border-red-200">
                        Turma Finalizada
                      </div>
                    )}
                     {/* Badge de Pré-Venda */}
                    {((selectedEvent.fot_pre_venda || selectedEvent.pre_venda) && !selectedEvent.fot_finalizada) && (
                      <div className="px-4 py-2 rounded text-sm font-semibold bg-blue-100 text-blue-800 border border-blue-200">
                        Pré-Venda
                      </div>
                    )}

                    <div
                      className={`px-4 py-2 rounded text-sm font-semibold ${STATUS_COLORS[selectedEvent.status]
                        }`}
                    >
                      {selectedEvent.status}
                    </div>
                  </div>
                </div>
              </div>

              <div className="p-6">
                <div className="flex flex-wrap gap-2 mb-6 pb-4 border-b">
                  <Button
                    variant="primary"
                    onClick={() => navigate(`/agenda/${selectedEvent.id}`)}
                    className="text-sm bg-brand-purple text-white hover:bg-brand-purple/90"
                  >
                    <CheckCircle size={16} className="mr-2" /> Área Operacional
                  </Button>

                  {(user.role === UserRole.BUSINESS_OWNER ||
                    user.role === UserRole.SUPERADMIN) && (
                      <>
                        <Button
                          variant="outline"
                          onClick={() => setView("edit")}
                          className="text-sm"
                        >
                          <Edit size={16} className="mr-2" /> Editar Detalhes
                        </Button>
                        <Button
                          variant="outline"
                          onClick={handleManageTeam}
                          className="text-sm"
                        >
                          <Users size={16} className="mr-2" /> Gerenciar Equipe
                        </Button>

                      </>
                    )}
                  {user.role === UserRole.EVENT_OWNER &&
                    selectedEvent.status !== EventStatus.ARCHIVED && (
                      <Button
                        variant="outline"
                        onClick={() => setView("edit")}
                        className="text-sm"
                      >
                        <Edit size={16} className="mr-2" /> Editar Informações
                      </Button>
                    )}
                  <Button
                    variant="outline"
                    onClick={handleOpenMaps}
                    className="text-sm"
                  >
                    <Map size={16} className="mr-2" /> Abrir no Maps
                  </Button>

                  {/* Botão de Aprovação (Apenas Admin/Owner se pendente) */}
                  {(user.role === UserRole.BUSINESS_OWNER || user.role === UserRole.SUPERADMIN) && 
                   selectedEvent.status === EventStatus.PENDING_APPROVAL && (
                    <Button
                      variant="primary"
                      onClick={handleApproveEvent}
                      className="text-sm bg-green-600 text-white hover:bg-green-700 border-green-600"
                    >
                      <CheckCircle size={16} className="mr-2" /> Aprovar
                    </Button>
                  )}

                  <Button
                    variant="default"
                    onClick={() => {
                      // Use a direct window location or navigate if available. 
                      // Since Dashboard doesn't seem to expose navigate cleanly, likely we need to pass it or use window.location
                      // Actually, Dashboard is usually wrapped in a Router context.
                      // We can use window.open or window.location.href for now as Dashboard props don't include navigation function easily accessible without hooking.
                      // However, line 348 uses setView("list"). Ideally we use useNavigate.
                      // Looking at lines 34-45, we don't have navigate. 
                      // But Dashboard is inside PageWrapper which has navigate? No.
                      // Let's use window.location.assign for simplicity or add useNavigate.
                      window.location.assign(`/agenda/${selectedEvent.id}`);
                    }}
                    className="text-sm bg-brand-purple text-white hover:bg-brand-purple/90"
                  >
                    <CheckCircle size={16} className="mr-2" /> Área Operacional
                  </Button>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                  <div className="lg:col-span-2 space-y-6">
                    {/* Quick Info Cards */}
                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                      <div className="bg-gray-50 p-4 rounded border border-gray-200">
                        <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">
                          Tipo
                        </p>
                        <p className="font-semibold text-gray-900">
                          {selectedEvent.type}
                        </p>
                      </div>
                      <div className="bg-gray-50 p-4 rounded border border-gray-200">
                        <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">
                          Data
                        </p>
                        <p className="font-semibold text-gray-900">
                          {new Date(
                            selectedEvent.date + "T00:00:00"
                          ).toLocaleDateString("pt-BR")}
                        </p>
                      </div>
                      <div className="bg-gray-50 p-4 rounded border border-gray-200">
                        <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">
                          Horário
                        </p>
                        <p className="font-semibold text-gray-900">
                          {selectedEvent.time}
                        </p>
                      </div>
                      
                      {basePrice !== null && (
                        <div className={`p-4 rounded border ${basePrice > 0 ? "bg-green-50 border-green-200" : "bg-gray-50 border-gray-200"}`}>
                            <p className={`text-xs uppercase tracking-wide mb-1 font-bold ${basePrice > 0 ? "text-green-700" : "text-gray-500"}`}>
                            Valor Base
                            </p>
                            <p className={`font-bold ${basePrice > 0 ? "text-green-800" : "text-gray-700"}`}>
                            {basePrice > 0 ? basePrice.toLocaleString("pt-BR", { style: "currency", currency: "BRL" }) : "R$ 0,00"}
                            </p>
                        </div>
                      )}
                    </div>

                    {/* FOT Information Table */}
                    <section className="bg-white border border-gray-200 rounded-lg overflow-hidden">
                      <div className="bg-gradient-to-r from-brand-purple to-brand-purple/90 px-4 py-3">
                        <h3 className="text-base font-bold text-white">
                          Informações FOT
                        </h3>
                      </div>
                      <div className="overflow-x-auto">
                        <table className="w-full">
                          <tbody className="divide-y divide-gray-200">
                            <tr className="hover:bg-gray-50">
                              <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50 w-1/3">
                                FOT
                              </td>
                              <td className="px-4 py-3 text-sm text-gray-900 font-medium">
                                {(selectedEvent as any).fot || "-"}
                              </td>
                            </tr>
                            <tr className="hover:bg-gray-50">
                              <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                Data
                              </td>
                              <td className="px-4 py-3 text-sm text-gray-900">
                                {new Date(
                                  selectedEvent.date + "T00:00:00"
                                ).toLocaleDateString("pt-BR")}
                              </td>
                            </tr>
                            <tr className="hover:bg-gray-50">
                              <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                Curso
                              </td>
                              <td className="px-4 py-3 text-sm text-gray-900">
                                {selectedEvent.curso || "-"}
                              </td>
                            </tr>
                            <tr className="hover:bg-gray-50">
                              <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                Instituição
                              </td>
                              <td className="px-4 py-3 text-sm text-gray-900">
                                {selectedEvent.instituicao || "-"}
                              </td>
                            </tr>
                            <tr className="hover:bg-gray-50">
                              <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                Ano Formatura
                              </td>
                              <td className="px-4 py-3 text-sm text-gray-900">
                                {selectedEvent.anoFormatura || "-"}
                              </td>
                            </tr>
                            <tr className="hover:bg-gray-50">
                              <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                Empresa
                              </td>
                              <td className="px-4 py-3 text-sm text-gray-900">
                                {selectedEvent.empresa || "-"}
                              </td>
                            </tr>
                            <tr className="hover:bg-gray-50">
                              <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                Tipo Evento
                              </td>
                              <td className="px-4 py-3 text-sm text-gray-900">
                                {selectedEvent.type}
                              </td>
                            </tr>
                            <tr className="hover:bg-gray-50">
                              <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                Observações
                              </td>
                              <td className="px-4 py-3 text-sm text-gray-900">
                                {(selectedEvent as any).observacoes || "-"}
                              </td>
                            </tr>
                            <tr className="hover:bg-gray-50">
                              <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                Local
                              </td>
                              <td className="px-4 py-3 text-sm text-gray-900">
                                {(selectedEvent as any).local_evento || (selectedEvent as any).locationName || "-"}
                              </td>
                            </tr>
                            <tr className="hover:bg-gray-50">
                              <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                Endereço
                              </td>
                              <td className="px-4 py-3 text-sm text-gray-900">
                                {selectedEvent.address.street}, {selectedEvent.address.number} - {selectedEvent.address.city}/{selectedEvent.address.state}
                                {selectedEvent.address.zip && ` | CEP: ${selectedEvent.address.zip}`}
                              </td>
                            </tr>
                            <tr className="hover:bg-gray-50">
                              <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                QTD Formandos
                              </td>
                              <td className="px-4 py-3 text-sm text-gray-900">
                                {selectedEvent.qtdFormandos || (selectedEvent as any).qtd_formandos || selectedEvent.attendees || "-"}
                              </td>
                            </tr>

                            {/* Seção de Gestão de Equipe - Ocultar para Fotógrafos, mas mostrar para Coordenadores */}
                            {(user.role !== UserRole.PHOTOGRAPHER || (selectedEvent.assignments || []).some((a: any) => a.professionalId === (user.professionalId || user.id) && a.is_coordinator)) && (
                              <>
                                <tr className="bg-blue-50">
                                  <td colSpan={2} className="px-4 py-3 text-xs font-bold text-blue-700 uppercase tracking-wider">
                                    Gestão de Equipe e Recursos
                                  </td>
                                </tr>
                                {/* Helper to calculate pending counts */
                             (() => {
                               const teamStatus = calculateTeamStatus(selectedEvent);
                               
                               const renderResourceRow = (label: string, confirmed: number, pending: number, required: number) => {
                                 if (!required && confirmed === 0 && pending === 0) {
                                   return (
                                     <tr className="hover:bg-gray-50">
                                       <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                         {label}
                                       </td>
                                       <td className="px-4 py-3 text-sm text-gray-500">-</td>
                                     </tr>
                                   );
                                 }

                                 const isComplete = confirmed >= required;
                                 
                                 return (
                                   <tr className="hover:bg-gray-50">
                                     <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                       {label}
                                     </td>
                                     <td className="px-4 py-3 text-sm text-gray-900">
                                       <div className="flex flex-col">
                                          <div className="flex items-center gap-2">
                                            <span className={`font-bold ${isComplete ? 'text-green-600' : 'text-gray-900'}`}>{confirmed}</span>
                                            <span className="text-gray-400">/</span>
                                            <span className="font-medium">{required || 0}</span>
                                            {isComplete && <CheckCircle size={14} className="text-green-500 ml-1" />}
                                          </div>
                                          {pending > 0 && (
                                            <span className="text-[10px] text-yellow-600 font-medium">
                                              ({pending} aguardando aceite)
                                            </span>
                                          )}
                                       </div>
                                     </td>
                                   </tr>
                                 );
                               };

                               return (
                                 <>

                                   
                                   {renderResourceRow(
                                      "Fotógrafo", 
                                      teamStatus.acceptedFotografos, 
                                      teamStatus.pendingFotografos, 
                                      selectedEvent.qtdFotografos || 0
                                   )}
                                   {renderResourceRow(
                                      "Recepcionista", 
                                      teamStatus.acceptedRecepcionistas, 
                                      teamStatus.pendingRecepcionistas, 
                                      selectedEvent.qtdRecepcionistas || 0
                                   )}
                                   {renderResourceRow(
                                      "Cinegrafista", 
                                      teamStatus.acceptedCinegrafistas, 
                                      teamStatus.pendingCinegrafistas, 
                                      selectedEvent.qtdCinegrafistas || 0
                                   )}

                                    <tr className="hover:bg-gray-50">
                                      <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                        Estúdio
                                      </td>
                                      <td className="px-4 py-3 text-sm text-gray-900">
                                        {selectedEvent.qtdEstudios || (selectedEvent as any).qtd_estudios || "-"}
                                      </td>
                                    </tr>
                                    <tr className="hover:bg-gray-50">
                                      <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                        Ponto de Foto
                                      </td>
                                      <td className="px-4 py-3 text-sm text-gray-900">
                                        {selectedEvent.qtdPontosFoto || (selectedEvent as any).qtd_ponto_foto || "-"}
                                      </td>
                                    </tr>
                                    <tr className="hover:bg-gray-50">
                                      <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                        Ponto Decorado
                                      </td>
                                      <td className="px-4 py-3 text-sm text-gray-900">
                                        {selectedEvent.qtdPontosDecorados || (selectedEvent as any).qtd_ponto_decorado || "-"}
                                      </td>
                                    </tr>
                                    <tr className="hover:bg-gray-50">
                                      <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                        Ponto LED
                                      </td>
                                      <td className="px-4 py-3 text-sm text-gray-900">
                                        {selectedEvent.qtdPontosLed || (selectedEvent as any).qtd_pontos_led || "-"}
                                      </td>
                                    </tr>
                                    <tr className="hover:bg-gray-50">
                                      <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                        Plataforma 360
                                      </td>
                                      <td className="px-4 py-3 text-sm text-gray-900">
                                        {selectedEvent.qtdPlataforma360 || (selectedEvent as any).qtd_plataforma_360 || "-"}
                                      </td>
                                    </tr>
                                 </>
                               );
                             })()}

                            {/* Status e Faltantes */}
                            {(() => {
                              const teamStatus = calculateTeamStatus(selectedEvent);
                              return (
                                <>
                                  <tr className="hover:bg-gray-50">
                                    <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                      Profissionais OK?
                                    </td>
                                    <td className="px-4 py-3 text-sm">
                                      <span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium ${
                                        teamStatus.profissionaisOK 
                                          ? "bg-green-100 text-green-800" 
                                          : "bg-red-100 text-red-800"
                                      }`}>
                                        {teamStatus.profissionaisOK ? (
                                          <>
                                            <CheckCircle size={12} />
                                            Completo
                                          </>
                                        ) : (
                                          <>
                                            <X size={12} />
                                            Incompleto
                                          </>
                                        )}
                                      </span>
                                    </td>
                                  </tr>
                                  <tr className="hover:bg-gray-50">
                                    <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                      Foto Faltante
                                    </td>
                                    <td className="px-4 py-3 text-sm text-gray-900">
                                      <span className={`font-medium ${teamStatus.fotoFaltante > 0 ? "text-red-600" : "text-green-600"}`}>
                                        {teamStatus.fotoFaltante}
                                      </span>
                                    </td>
                                  </tr>
                                  <tr className="hover:bg-gray-50">
                                    <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                      Recep. Faltante
                                    </td>
                                    <td className="px-4 py-3 text-sm text-gray-900">
                                      <span className={`font-medium ${teamStatus.recepFaltante > 0 ? "text-red-600" : "text-green-600"}`}>
                                        {teamStatus.recepFaltante}
                                      </span>
                                    </td>
                                  </tr>
                                  <tr className="hover:bg-gray-50">
                                    <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                      Cine Faltante
                                    </td>
                                    <td className="px-4 py-3 text-sm text-gray-900">
                                      <span className={`font-medium ${teamStatus.cineFaltante > 0 ? "text-red-600" : "text-green-600"}`}>
                                        {teamStatus.cineFaltante}
                                      </span>
                                    </td>
                                  </tr>
                                </>
                              );
                            })()}
                              </>
                            )}

                            {/* Base Value Card for Professionals */}
                            {basePrice !== null && basePrice > 0 && (
                                <tr className="hover:bg-gray-50">
                                <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                    Valor Base
                                </td>
                                <td className="px-4 py-3 text-sm text-gray-900 font-bold text-green-700">
                                    {basePrice.toLocaleString("pt-BR", { style: "currency", currency: "BRL" })}
                                </td>
                                </tr>
                            )}

                            <tr className="hover:bg-gray-50">
                              <td className="px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider bg-gray-50">
                                Horário
                              </td>
                              <td className="px-4 py-3 text-sm text-gray-900">
                                {selectedEvent.time}
                              </td>
                            </tr>

                          </tbody>
                        </table>
                      </div>
                    </section>

                    {/* Institution Information */}
                    {selectedEvent.institutionId &&
                      (() => {
                        const institution = getInstitutionById(
                          selectedEvent.institutionId
                        );
                        if (institution) {
                          return (
                            <section className="bg-gradient-to-br from-brand-gold/10 to-transparent border border-brand-gold/30 rounded-sm p-6">
                              <div className="flex items-start space-x-4">
                                <div className="bg-brand-gold/20 p-3 rounded-full">
                                  <Building2
                                    className="text-brand-gold"
                                    size={24}
                                  />
                                </div>
                                <div className="flex-1">
                                  <h3 className="text-lg font-bold text-brand-black mb-1">
                                    {institution.name}
                                  </h3>
                                  <p className="text-sm text-brand-gold uppercase tracking-wide font-medium mb-3">
                                    {institution.type}
                                  </p>

                                  {/* Course Information */}
                                  {selectedEvent.courseId &&
                                    (() => {
                                      const course =
                                        getActiveCoursesByInstitutionId(
                                          selectedEvent.institutionId
                                        ).find(
                                          (c) => c.id === selectedEvent.courseId
                                        );
                                      if (course) {
                                        return (
                                          <div className="bg-brand-gold/10 border border-brand-gold/30 rounded px-3 py-2 mb-3">
                                            <p className="text-xs text-gray-500 uppercase tracking-wide mb-0.5">
                                              Curso/Turma
                                            </p>
                                            <p className="text-sm font-semibold text-brand-black">
                                              {course.name} -{" "}
                                              {course.graduationType} (
                                              {course.year}/{course.semester}º
                                              sem)
                                            </p>
                                          </div>
                                        );
                                      }
                                      return null;
                                    })()}

                                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                                    <div>
                                      <p className="text-gray-500 text-xs uppercase tracking-wide">
                                        Contato
                                      </p>
                                      <p className="text-gray-700 font-medium">
                                        {institution.phone}
                                      </p>
                                      <p className="text-gray-600">
                                        {institution.email}
                                      </p>
                                    </div>

                                    {institution.address && (
                                      <div>
                                        <p className="text-gray-500 text-xs uppercase tracking-wide">
                                          Endereço
                                        </p>
                                        <p className="text-gray-700">
                                          {institution.address.street},{" "}
                                          {institution.address.number}
                                        </p>
                                        <p className="text-gray-600">
                                          {institution.address.city} -{" "}
                                          {institution.address.state}
                                        </p>
                                      </div>
                                    )}
                                  </div>

                                  {institution.description && (
                                    <p className="text-gray-600 text-sm mt-3 italic border-t border-brand-gold/20 pt-3">
                                      {institution.description}
                                    </p>
                                  )}
                                </div>
                              </div>
                            </section>
                          );
                        }
                        return null;
                      })()}

                    <section>
                      <h3 className="text-lg font-bold border-b pb-2 mb-4 text-brand-black">
                        Sobre o Evento
                      </h3>
                      <p className="text-gray-600 leading-relaxed whitespace-pre-wrap">
                        {selectedEvent.briefing || "Sem briefing detalhado."}
                      </p>
                    </section>

                    {selectedEvent.contacts.length > 0 && (
                      <section>
                        <h3 className="text-lg font-bold border-b pb-2 mb-4 text-brand-black">
                          Contatos & Responsáveis
                        </h3>
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                          {selectedEvent.contacts.map((c, i) => (
                            <div
                              key={i}
                              className="bg-gray-50 p-4 rounded-sm border border-gray-100"
                            >
                              <p className="font-bold text-sm">{c.name}</p>
                              <p className="text-xs text-brand-gold uppercase tracking-wide">
                                {c.role}
                              </p>
                              <p className="text-sm text-gray-500 mt-1">
                                {c.phone}
                              </p>
                            </div>
                          ))}
                        </div>
                      </section>
                    )}
                  </div>

                  <div className="lg:col-span-1 space-y-4">
                    {/* Localização Card */}
                    <div className="border p-5 rounded bg-gray-50">
                      <h4 className="font-bold text-sm mb-3 text-gray-700 flex items-center gap-2">
                        <MapPin size={16} className="text-brand-gold" />
                        Localização
                      </h4>
                      <p className="font-medium text-base mb-1">
                        {selectedEvent.address.street},{" "}
                        {selectedEvent.address.number}
                      </p>
                      <p className="text-gray-600 text-sm">
                        {selectedEvent.address.city} -{" "}
                        {selectedEvent.address.state}
                      </p>
                      {selectedEvent.address.zip && (
                        <p className="text-gray-500 text-xs mt-1">
                          CEP: {selectedEvent.address.zip}
                        </p>
                      )}
                    </div>

                    {/* Equipe Designada */}
                    {(selectedEvent.assignments && selectedEvent.assignments.filter(a => a.status !== "REJEITADO").length > 0) ||
                      ((user.role === UserRole.BUSINESS_OWNER || user.role === UserRole.SUPERADMIN) && selectedEvent.photographerIds.length > 0) ? (
                      <div className="border p-5 rounded bg-white">
                        <div className="flex justify-between items-center mb-3">
                          <h4 className="font-bold text-sm text-gray-700 flex items-center gap-2">
                            <Users size={16} className="text-brand-gold" />
                            Equipe ({(selectedEvent.assignments || []).filter(a => a.status !== "REJEITADO").length})
                          </h4>
                          {(user.role === UserRole.BUSINESS_OWNER ||
                            user.role === UserRole.SUPERADMIN) && (
                              <button
                                onClick={handleManageTeam}
                                className="text-brand-gold hover:text-brand-black transition-colors"
                                title="Adicionar fotógrafo"
                              >
                                <PlusCircle size={18} />
                              </button>
                            )}
                        </div>

                        {(selectedEvent.assignments || [])
                          .filter(a => a.status !== "REJEITADO")
                          .map((assignment) => {
                            const photographer = professionals.find(
                              (p) => p.id === assignment.professionalId
                            );
                            return (
                              <div
                                key={assignment.professionalId}
                                className="flex items-center justify-between gap-2 text-sm mb-2"
                              >
                                <div
                                  className="flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity"
                                  onClick={() => handleViewProfessional(photographer!)}
                                >
                                  <div
                                    className="relative w-8 h-8 rounded-full border-2 border-gray-200 bg-gray-300 flex-shrink-0"
                                    style={{
                                      backgroundImage: `url(${photographer?.avatar ||
                                        `https://i.pravatar.cc/100?u=${assignment.professionalId}`
                                        })`,
                                      backgroundSize: "cover",
                                    }}
                                  >
                                    {assignment.is_coordinator && (
                                        <div className="absolute -top-1 -right-1 bg-white rounded-full p-0.5 shadow-sm border border-gray-100">
                                            <Star size={10} className="text-yellow-500 fill-yellow-500" />
                                        </div>
                                    )}
                                  </div>
                                  <div className="flex flex-col">
                                    <span className="text-gray-700 font-medium">
                                      {photographer?.name || "Fotógrafo"}
                                      {assignment.is_coordinator && (
                                        <span className="ml-1 text-xs text-yellow-600 font-bold border border-yellow-200 bg-yellow-50 px-1 rounded">
                                            Coord.
                                        </span>
                                      )}
                                    </span>
                                    <span className="text-xs text-gray-500">
                                      {assignment.status === "PENDENTE" ? "Convite Pendente" : "Confirmado"}
                                      {assignment.funcaoId && functions && (
                                          <span className="block text-xs font-semibold text-blue-600">
                                              {functions.find(f => f.id === assignment.funcaoId)?.nome || ""}
                                          </span>
                                      )}
                                    </span>
                                  </div>
                                </div>
                                {assignment.status === "PENDENTE" && (
                                  <span className="w-2 h-2 rounded-full bg-yellow-400" title="Pendente"></span>
                                )}
                                {assignment.status === "ACEITO" && (
                                  <span className="w-2 h-2 rounded-full bg-green-500" title="Aceito"></span>
                                )}
                              </div>
                            );
                          })}
                        {(selectedEvent.assignments || []).filter(a => a.status !== "REJEITADO").length === 0 && (
                          <p className="text-sm text-gray-400 italic">
                            Nenhum profissional na equipe.
                          </p>
                        )}
                      </div>
                    ) : null
                    }
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Modal de Gerenciamento de Equipe */}
        {isTeamModalOpen && selectedEvent && (
          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
            <div className="bg-white rounded-2xl shadow-2xl max-w-6xl w-full max-h-[90vh] overflow-hidden flex flex-col">
              {/* Header do Modal */}
                <div className="flex items-center justify-between p-6 border-b border-gray-100">
                  <div>
                    <h2 className="text-xl font-serif font-bold text-brand-black">
                      Gerenciar Equipe
                    </h2>
                    <p className="text-sm text-gray-500">
                      {selectedEvent.name} - {new Date(selectedEvent.date + 'T00:00:00').toLocaleDateString('pt-BR')}
                    </p>
                  </div>
                  <button
                    onClick={closeTeamModal}
                    className="p-2 hover:bg-gray-100 rounded-full transition-colors"
                  >
                    <X size={20} className="text-gray-500" />
                  </button>
                </div>

                {/* Resource Summary Bar */}
                <div className="bg-blue-50 px-6 py-3 border-b border-blue-100 flex flex-wrap gap-4 md:gap-8 overflow-x-auto">
                   {(() => {
                      const stats = calculateTeamStatus(selectedEvent);
                      return (
                        <>
                          <div className="flex items-center gap-2 min-w-fit">
                            <span className="text-xs font-bold text-blue-800 uppercase tracking-wider">Fotógrafos:</span>
                            <div className="flex items-baseline gap-1">
                               <span className={`text-sm font-bold ${stats.fotoFaltante > 0 ? 'text-red-600' : 'text-green-600'}`}>
                                 {stats.acceptedFotografos}
                               </span>
                               <span className="text-xs text-blue-600">/ {stats.qtdFotografos}</span>
                               {stats.fotoFaltante === 0 ? (
                                 <CheckCircle size={14} className="text-green-500 ml-1" />
                               ) : (
                                 <AlertCircle size={14} className="text-red-500 ml-1" />
                               )}
                            </div>
                          </div>

                          <div className="flex items-center gap-2 min-w-fit">
                            <span className="text-xs font-bold text-blue-800 uppercase tracking-wider">Cinegrafistas:</span>
                            <div className="flex items-baseline gap-1">
                               <span className={`text-sm font-bold ${stats.cineFaltante > 0 ? 'text-red-600' : 'text-green-600'}`}>
                                 {stats.acceptedCinegrafistas}
                               </span>
                               <span className="text-xs text-blue-600">/ {stats.qtdCinegrafistas}</span>
                               {stats.cineFaltante === 0 ? (
                                 <CheckCircle size={14} className="text-green-500 ml-1" />
                               ) : (
                                 <AlertCircle size={14} className="text-red-500 ml-1" />
                               )}
                            </div>
                          </div>

                          <div className="flex items-center gap-2 min-w-fit">
                            <span className="text-xs font-bold text-blue-800 uppercase tracking-wider">Recepcionistas:</span>
                            <div className="flex items-baseline gap-1">
                               <span className={`text-sm font-bold ${stats.recepFaltante > 0 ? 'text-red-600' : 'text-green-600'}`}>
                                 {stats.acceptedRecepcionistas}
                               </span>
                               <span className="text-xs text-blue-600">/ {stats.qtdRecepcionistas}</span>
                               {stats.recepFaltante === 0 ? (
                                 <CheckCircle size={14} className="text-green-500 ml-1" />
                               ) : (
                                 <AlertCircle size={14} className="text-red-500 ml-1" />
                               )}
                            </div>
                          </div>
                        </>
                      );
                   })()}
                </div>

              {/* Body */}
              <div className="flex-1 overflow-auto p-6">
                <div className="mb-4">
                  <p className="text-sm text-gray-600">
                    Profissionais disponíveis para a data{" "}
                    <strong>
                      {new Date(
                        selectedEvent.date + "T00:00:00"
                      ).toLocaleDateString("pt-BR")}
                    </strong>
                    . Clique em "Adicionar" para atribuir ao evento.
                  </p>
                </div>

                {/* Filtros e Busca */}
                <div className="mb-6 space-y-4">
                  {/* Barra de busca */}
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
                    <input
                      type="text"
                      placeholder="Buscar por nome ou email..."
                      value={teamSearchTerm}
                      onChange={(e) => setTeamSearchTerm(e.target.value)}
                      className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-purple focus:border-transparent"
                    />
                  </div>
                  
                  {/* Filtros */}
                  <div className="flex flex-wrap gap-3">
                    {/* Filtro por função */}
                    <select
                      value={teamRoleFilter}
                      onChange={(e) => setTeamRoleFilter(e.target.value)}
                      className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-purple focus:border-transparent text-sm"
                    >
                      <option value="all">Todas as funções</option>
                      {functions?.map(fn => (
                        <option key={fn.id} value={fn.id}>{fn.nome}</option>
                      ))}
                    </select>

                    {/* Filtro por status */}
                    <select
                      value={teamStatusFilter}
                      onChange={(e) => setTeamStatusFilter(e.target.value)}
                      className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-purple focus:border-transparent text-sm"
                    >
                      <option value="all">Todos os status</option>
                      <option value="assigned">Designados</option>
                      <option value="available">Disponíveis</option>
                      <option value="busy">Em outro evento</option>
                      <option value="rejected">Rejeitados</option>
                    </select>

                    {/* Filtro por disponibilidade */}
                    <select
                      value={teamAvailabilityFilter}
                      onChange={(e) => setTeamAvailabilityFilter(e.target.value)}
                      className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-purple focus:border-transparent text-sm"
                    >
                      <option value="all">Todas disponibilidades</option>
                      <option value="available">Disponíveis</option>
                      <option value="unavailable">Indisponíveis</option>
                    </select>

                    {/* Botão limpar filtros */}
                    {(teamSearchTerm || teamRoleFilter !== "all" || teamStatusFilter !== "all" || teamAvailabilityFilter !== "all") && (
                      <button
                        onClick={() => {
                          setTeamSearchTerm("");
                          setTeamRoleFilter("all");
                          setTeamStatusFilter("all");
                          setTeamAvailabilityFilter("all");
                        }}
                        className="px-3 py-2 text-sm text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-colors flex items-center gap-1"
                      >
                        <X size={16} />
                        Limpar filtros
                      </button>
                    )}
                  </div>
                </div>

                {/* Tabela de Profissionais (Desktop) */}
                <div className="hidden md:block overflow-x-auto">
                  <table className="w-full border-collapse">
                    <thead>
                      <tr className="bg-gray-50 border-b-2 border-gray-200">
                        <th className="text-left p-4 font-semibold text-gray-700">
                          Profissional
                        </th>
                        <th className="text-center p-4 font-semibold text-gray-700">
                          Função
                        </th>
                        <th className="text-center p-4 font-semibold text-gray-700">
                          E-mail
                        </th>
                        <th className="text-center p-4 font-semibold text-gray-700">
                          Status
                        </th>
                        <th className="text-center p-4 font-semibold text-gray-700">
                          Ação
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {displayedTeamProfessionals.map((photographer) => {
                        const assignment = (selectedEvent.assignments || []).find(
                          (a) => a.professionalId === photographer.id
                        );
                        const status = assignment ? assignment.status : null;
                        const isAssigned = !!status && status !== "REJEITADO";

                        // Optimization: Use busySet (O(1))
                        // We need the busy EVENT details if we want to show WHERE they are busy. 
                        // But for speed, just checking if busy is enough for filtering.
                        // To show tooltip, we can do a lookup ONLY if they are busy.
                        
                        // Check if busy in other events on the same date (using logic or Set)
                        const isBusyInSet = busyProfessionalIds.has(photographer.id);
                        const isBusy = !isAssigned && isBusyInSet;

                        // Only search for the specific event if we need to show the tooltip and they ARE busy
                        // This avoids searching for everyone.
                        const busyEvent = isBusy ? events.find(e =>
                          e.id !== selectedEvent.id &&
                          e.date === selectedEvent.date &&
                          (e.assignments || []).some(a => a.professionalId === photographer.id && a.status === 'ACEITO')
                        ) : undefined;
                        
                        const isProcessing = processingIds.has(photographer.id);

                        return (
                          <tr
                            key={photographer.id}
                            className="border-b border-gray-100 hover:bg-gray-50 transition-colors"
                          >
                            {/* Profissional */}
                            <td className="p-4 cursor-pointer" onClick={() => handleViewProfessional(photographer)}>
                              <div className="flex items-center gap-3">
                            <div className="relative">
                                {/* Avatar */}
                                <div
                                className="w-10 h-10 rounded-full border border-gray-200 bg-gray-300 flex-shrink-0"
                                style={{
                                    backgroundImage: `url(${photographer.avatar})`,
                                    backgroundSize: "cover",
                                    backgroundPosition: "center",
                                }}
                                />
                                {assignment?.is_coordinator && (
                                    <div className="absolute -top-1 -right-1 bg-white rounded-full p-0.5 shadow-sm border border-gray-100">
                                        <Star size={12} className="text-yellow-500 fill-yellow-500" />
                                    </div>
                                )}
                            </div>
                            <div>
                              <p className="font-semibold text-gray-800 text-sm">
                                {photographer.name || photographer.nome}
                              </p>
                              <p className="text-xs text-gray-500">
                                ID: {photographer.id.substring(0, 8)}...
                              </p>
                            </div>
                          </div>
                            </td>

                            {/* Função */}
                            <td className="p-4 text-center">
                              <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                {photographer.functions && photographer.functions.length > 0
                                  ? photographer.functions.map(f => f.nome).join(", ")
                                  : photographer.role}
                              </span>
                            </td>

                            {/* E-mail */}
                            <td className="p-4 text-center text-sm text-gray-600">
                              {photographer.email}
                            </td>

                            {/* Status */}
                            <td className="p-4 text-center">
                              {status === "ACEITO" && (
                                <span className="inline-flex items-center gap-1.5 px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">
                                  <CheckCircle size={14} />
                                  Confirmado
                                </span>
                              )}
                              {status === "PENDENTE" && (
                                <span className="inline-flex items-center gap-1.5 px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">
                                  <Clock size={14} />
                                  Pendente
                                </span>
                              )}
                              {status === "REJEITADO" && (
                                <span 
                                  className="inline-flex items-center gap-1.5 px-3 py-1 bg-red-100 text-red-800 rounded-full text-xs font-medium cursor-help"
                                  title={assignment?.reason ? `Motivo: ${assignment.reason}` : "Evento recusado pelo fotógrafo"}
                                >
                                  <X size={14} />
                                  Recusado
                                </span>
                              )}
                              {!status && (
                                <span 
                                  className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium ${isBusy ? "bg-red-100 text-red-800 cursor-help" : "bg-gray-100 text-gray-600"}`}
                                  title={busyEvent ? `Em evento: ${busyEvent.name} - ${busyEvent.local_evento || 'Local não informado'} (${busyEvent.time || busyEvent.startTime || 'Horário indefinido'})` : ""}
                                >
                                  {isBusy ? <UserX size={14} /> : <UserCheck size={14} />}
                                  {isBusy ? "Em outro evento" : "Disponível"}
                                </span>
                              )}
                            </td>

                            {/* Ação */}
                            <td className="p-4 text-center">
                              <div className="flex items-center justify-center gap-2">
                              <button
                                onClick={() =>
                                  togglePhotographer(photographer.id)
                                }
                                disabled={(!status && isBusy) || isProcessing}
                                className={`px-4 py-2 rounded-lg font-medium text-sm transition-colors flex items-center justify-center gap-2 ${status === "ACEITO" || status === "PENDENTE"
                                  ? "bg-red-100 text-red-700 hover:bg-red-200"
                                  : "bg-brand-gold text-white hover:bg-[#a5bd2e]"
                                  } ${isProcessing ? "opacity-70 cursor-wait" : ""}`}
                              >
                                {isProcessing && <div className="w-3 h-3 border-2 border-current border-t-transparent rounded-full animate-spin"></div>}
                                {status === "ACEITO" || status === "PENDENTE" ? "Remover" : "Adicionar"}
                              </button>
                                {(status === "ACEITO" || status === "PENDENTE") && (
                                    <button
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            handleSetCoordinator(photographer.id, !!assignment?.is_coordinator);
                                        }}
                                        className={`p-2 rounded-full hover:bg-gray-100 transition-colors ${assignment?.is_coordinator ? "bg-yellow-50" : ""}`}
                                        title={assignment?.is_coordinator ? "Remover coordenação" : "Definir como coordenador"}
                                    >
                                        <Star size={18} className={assignment?.is_coordinator ? "text-yellow-500 fill-yellow-500" : "text-gray-400"} />
                                    </button>
                                )}
                            </div>
                            </td>
                          </tr>
                        );
                      })}
                      
                      {/* Empty State */}
                      {filteredTeamProfessionals.length === 0 && (
                        <tr>
                          <td colSpan={5} className="p-8 text-center">
                             {/* ... existing empty state ... */}
                             <div className="flex flex-col items-center gap-3">
                              <UserX size={48} className="text-gray-300" />
                              <p className="text-gray-500 font-medium">
                                Ninguém encontrado.
                              </p>
                             </div>
                          </td>
                        </tr>
                      )}

                      {/* Load More Row */}
                       {displayedTeamProfessionals.length < filteredTeamProfessionals.length && (
                        <tr>
                          <td colSpan={5} className="p-4 text-center">
                            <button
                              onClick={() => setTeamPage(prev => prev + 1)}
                              className="text-brand-gold font-medium hover:underline flex items-center justify-center w-full"
                            >
                              Carregar mais ({filteredTeamProfessionals.length - displayedTeamProfessionals.length} restantes)
                            </button>
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>

                {/* Lista de Cards (Mobile) */}
                <div className="md:hidden space-y-4">
                  {displayedTeamProfessionals.map((photographer) => {
                    const assignment = (selectedEvent.assignments || []).find(
                      (a) => a.professionalId === photographer.id
                    );
                    const status = assignment ? assignment.status : null;
                    const isAssigned = !!status && status !== "REJEITADO";

                    const isBusyInSet = busyProfessionalIds.has(photographer.id);
                    const isBusy = !isAssigned && isBusyInSet;
                    const isProcessing = processingIds.has(photographer.id);

                    return (
                      <div key={photographer.id} className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                        <div className="flex items-center gap-3 mb-3" onClick={() => handleViewProfessional(photographer)}>
                          <div
                            className="relative w-12 h-12 rounded-full border-2 border-gray-200 bg-gray-300 flex-shrink-0"
                            style={{
                              backgroundImage: `url(${photographer.avatar})`,
                              backgroundSize: "cover",
                            }}
                          >
                            {/* Visual Indicator of Coordinator in the list */}
                            {assignment?.is_coordinator && (
                                <div className="absolute top-0 right-0 p-1">
                                    <Star size={12} className="text-yellow-500 fill-yellow-500" />
                                </div>
                            )}
                          </div>
                          <div>
                            <p className="font-medium text-gray-800 text-sm">{photographer.name || photographer.nome}</p>
                            <p className="text-xs text-gray-500">{assignment?.status === "PENDENTE" ? "Convite Pendente" : assignment?.status}</p>
                          </div>
                        </div>

                        <div className="flex flex-wrap gap-2 mb-4">
                          <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                            {photographer.functions && photographer.functions.length > 0
                              ? photographer.functions.map(f => f.nome).join(", ")
                              : photographer.role}
                          </span>

                          {status === "ACEITO" && (
                            <span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">
                              <CheckCircle size={12} /> Confirmado
                            </span>
                          )}
                          {status === "PENDENTE" && (
                            <span className="inline-flex items-center gap-1 px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">
                              <Clock size={12} /> Pendente
                            </span>
                          )}
                          {status === "REJEITADO" && (
                            <span 
                              className="inline-flex items-center gap-1 px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs font-medium cursor-help"
                              title={assignment?.reason ? `Motivo: ${assignment.reason}` : "Evento recusado pelo fotógrafo"}
                            >
                              <X size={12} /> Recusado
                            </span>
                          )}
                          {!status && (
                            <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${isBusy ? "bg-red-100 text-red-800" : "bg-gray-100 text-gray-600"}`}>
                              {isBusy ? <UserX size={12} /> : <UserCheck size={12} />}
                              {isBusy ? "Em outro evento" : "Disponível"}
                            </span>
                          )}
                        </div>

                        <div className="flex gap-2">
                          <button
                            onClick={() => handleViewProfessional(photographer)}
                            className="flex-1 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 bg-white"
                          >
                            Ver Detalhes
                          </button>
                          <button
                            onClick={() => togglePhotographer(photographer.id)}
                            disabled={(!status && isBusy) || isProcessing}
                            className={`flex-1 py-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2 ${status === "ACEITO" || status === "PENDENTE"
                              ? "bg-red-100 text-red-700 hover:bg-red-200"
                              : isBusy ? "bg-gray-300 text-gray-500 cursor-not-allowed" : "bg-brand-gold text-white hover:bg-[#a5bd2e]"
                              } ${isProcessing ? "opacity-70 cursor-wait" : ""}`}
                          >
                            {isProcessing && <div className="w-3 h-3 border-2 border-current border-t-transparent rounded-full animate-spin"></div>}
                            {status === "ACEITO" || status === "PENDENTE" ? "Remover" : isBusy ? "Ocupado" : "Adicionar"}
                          </button>
                        </div>
                      </div>
                    );
                  })}
                  
                  {/* Load More Mobile */}
                   {displayedTeamProfessionals.length < filteredTeamProfessionals.length && (
                        <div className="p-4 text-center">
                            <button
                              onClick={() => setTeamPage(prev => prev + 1)}
                              className="text-brand-gold font-medium hover:underline flex items-center justify-center w-full bg-white p-3 rounded shadow-sm border border-gray-100"
                            >
                              Carregar mais ({filteredTeamProfessionals.length - displayedTeamProfessionals.length} restantes)
                            </button>
                        </div>
                  )}
                  {filteredTeamProfessionals.length === 0 && (
                    <div className="text-center p-8 text-gray-500">
                      <UserX size={48} className="mx-auto text-gray-300 mb-2" />
                      <p>Nenhum profissional disponível.</p>
                    </div>
                  )}
                </div>

              </div>

              {/* Footer */}
              <div className="border-t border-gray-200 p-6 bg-gray-50 flex justify-end gap-3">
                <Button
                  variant="outline"
                  onClick={closeTeamModal}
                >
                  Fechar
                </Button>
              </div>
            </div>
          </div>
        )}

        {viewingProfessional && (
          <ProfessionalDetailsModal
            professional={viewingProfessional}
            isOpen={!!viewingProfessional}
            onClose={() => setViewingProfessional(null)}
          />
        )}

        {roleSelectionProf && (
          <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black bg-opacity-50">
            <div className="bg-white rounded-lg p-6 w-96 max-w-full shadow-xl">
              <h3 className="text-lg font-bold mb-4">Selecione a Função</h3>
              <p className="mb-4 text-gray-600">
                Qual função {roleSelectionProf.nome} irá desempenhar neste evento?
              </p>
              <div className="space-y-2">
                {roleSelectionProf.functions?.map((fn) => (
                  <button
                    key={fn.id}
                    onClick={() => handleRoleSelect(fn.id)}
                    className="w-full text-left px-4 py-3 rounded border hover:bg-gray-50 flex items-center justify-between"
                  >
                    <span>{fn.nome}</span>
                  </button>
                ))}
              </div>
              <div className="mt-4 flex justify-end">
                <button
                  onClick={() => setRoleSelectionProf(null)}
                  className="px-4 py-2 text-gray-600 hover:text-gray-800"
                >
                  Cancelar
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};