"use client";

import { Fragment, useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { Menu, Listbox, Transition } from '@headlessui/react';
import CreateAgencyModal from '@/components/agencies/CreateAgencyModal';
import ConfirmDialog from '@/components/layout/ConfirmDialog';
import Pagination from '@/components/layout/Pagination';
import { useToast } from '@/components/layout/ToastContext';
import {
    BuildingOfficeIcon,
    TrashIcon,
    EyeIcon,
    PencilIcon,
    EllipsisVerticalIcon,
    MagnifyingGlassIcon,
    FunnelIcon,
    CalendarIcon,
    CheckIcon,
    ChevronUpDownIcon,
    PlusIcon,
    XMarkIcon,
    UserGroupIcon,
    ChartBarIcon,
    FolderIcon,
    LifebuoyIcon,
    CreditCardIcon,
    DocumentTextIcon,
    ArchiveBoxIcon,
    ShareIcon
} from '@heroicons/react/24/outline';

interface Agency {
    id: string;
    name: string;
    subdomain: string;
    domain: string;
    email: string;
    phone: string;
    cnpj: string;
    is_active: boolean;
    created_at: string;
    logo_url?: string;
    plan_name?: string;
    solutions?: Array<{ id: string; name: string; slug: string }>;
}

// Mapeamento de ícones para cada solução
const SOLUTION_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
    'crm': UserGroupIcon,
    'erp': ChartBarIcon,
    'projetos': FolderIcon,
    'helpdesk': LifebuoyIcon,
    'pagamentos': CreditCardIcon,
    'contratos': DocumentTextIcon,
    'documentos': ArchiveBoxIcon,
    'social': ShareIcon,
};

const STATUS_OPTIONS = [
    { id: 'all', name: 'Todos os Status' },
    { id: 'active', name: 'Ativas' },
    { id: 'inactive', name: 'Inativas' },
];

const DATE_PRESETS = [
    { id: 'all', name: 'Todo o período' },
    { id: '7d', name: 'Últimos 7 dias' },
    { id: '15d', name: 'Últimos 15 dias' },
    { id: '30d', name: 'Últimos 30 dias' },
    { id: 'custom', name: 'Personalizado' },
];

export default function AgenciesPage() {
    const toast = useToast();
    const router = useRouter();
    const [agencies, setAgencies] = useState<Agency[]>([]);
    const [loading, setLoading] = useState(true);
    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);

    // Confirmação e seleção múltipla
    const [confirmOpen, setConfirmOpen] = useState(false);
    const [agencyToDelete, setAgencyToDelete] = useState<string | null>(null);
    const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());

    // Paginação
    const [currentPage, setCurrentPage] = useState(1);
    const itemsPerPage = 10;

    // Filtros
    const [searchTerm, setSearchTerm] = useState('');
    const [selectedStatus, setSelectedStatus] = useState(STATUS_OPTIONS[0]);
    const [selectedDatePreset, setSelectedDatePreset] = useState(DATE_PRESETS[0]);
    const [startDate, setStartDate] = useState('');
    const [endDate, setEndDate] = useState('');

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

    const fetchAgencies = async () => {
        try {
            const response = await fetch('/api/admin/agencies', {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                },
            });
            if (response.ok) {
                const data = await response.json();
                setAgencies(data);
            }
        } catch (error) {
            console.error('Error fetching agencies:', error);
        } finally {
            setLoading(false);
        }
    };

    const handleDeleteClick = (id: string) => {
        setAgencyToDelete(id);
        setConfirmOpen(true);
    };

    const handleConfirmDelete = async () => {
        if (!agencyToDelete) return;

        try {
            const response = await fetch(`/api/admin/agencies/${agencyToDelete}`, {
                method: 'DELETE',
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                },
            });

            if (response.ok) {
                setAgencies(agencies.filter(a => a.id !== agencyToDelete));
                selectedIds.delete(agencyToDelete);
                setSelectedIds(new Set(selectedIds));
                toast.success('Agência excluída', 'A agência foi excluída com sucesso.');
            } else {
                toast.error('Erro ao excluir', 'Não foi possível excluir a agência.');
            }
        } catch (error) {
            console.error('Error deleting agency:', error);
            toast.error('Erro ao excluir', 'Ocorreu um erro ao excluir a agência.');
        }
    };

    const handleDeleteSelected = () => {
        if (selectedIds.size === 0) return;
        setAgencyToDelete('multiple');
        setConfirmOpen(true);
    };

    const handleConfirmDeleteMultiple = async () => {
        const idsToDelete = Array.from(selectedIds);
        let successCount = 0;

        for (const id of idsToDelete) {
            try {
                const response = await fetch(`/api/admin/agencies/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    },
                });
                if (response.ok) successCount++;
            } catch (error) {
                console.error('Error deleting agency:', error);
            }
        }

        setAgencies(agencies.filter(a => !selectedIds.has(a.id)));
        setSelectedIds(new Set());
        toast.success(`${successCount} agência(s) excluída(s)`, 'As agências selecionadas foram excluídas.');
    };

    const toggleActive = async (id: string, currentStatus: boolean) => {
        try {
            const response = await fetch(`/api/admin/agencies/${id}`, {
                method: 'PATCH',
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ is_active: !currentStatus }),
            });

            if (response.ok) {
                setAgencies(agencies.map(a =>
                    a.id === id ? { ...a, is_active: !currentStatus } : a
                ));
            }
        } catch (error) {
            console.error('Error toggling agency status:', error);
        }
    };

    const clearFilters = () => {
        setSearchTerm('');
        setSelectedStatus(STATUS_OPTIONS[0]);
        setSelectedDatePreset(DATE_PRESETS[0]);
        setStartDate('');
        setEndDate('');
    };

    // Lógica de Filtragem
    const filteredAgencies = agencies.filter((agency) => {
        // Texto
        const searchLower = searchTerm.toLowerCase();
        const matchesSearch =
            (agency.name?.toLowerCase() || '').includes(searchLower) ||
            (agency.email?.toLowerCase() || '').includes(searchLower) ||
            (agency.subdomain?.toLowerCase() || '').includes(searchLower);

        // Status
        const matchesStatus =
            selectedStatus.id === 'all' ? true :
                selectedStatus.id === 'active' ? agency.is_active :
                    !agency.is_active;

        // Data
        let matchesDate = true;
        const agencyDate = new Date(agency.created_at);
        const now = new Date();

        if (selectedDatePreset.id === 'custom') {
            if (startDate) {
                const start = new Date(startDate);
                start.setHours(0, 0, 0, 0);
                if (agencyDate < start) matchesDate = false;
            }
            if (endDate) {
                const end = new Date(endDate);
                end.setHours(23, 59, 59, 999);
                if (agencyDate > end) matchesDate = false;
            }
        } else if (selectedDatePreset.id !== 'all') {
            const diffTime = Math.abs(now.getTime() - agencyDate.getTime());
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

            if (selectedDatePreset.id === '7d') matchesDate = diffDays <= 7;
            if (selectedDatePreset.id === '15d') matchesDate = diffDays <= 15;
            if (selectedDatePreset.id === '30d') matchesDate = diffDays <= 30;
        }

        return matchesSearch && matchesStatus && matchesDate;
    });

    // Paginação
    const totalItems = filteredAgencies.length;
    const totalPages = Math.ceil(totalItems / itemsPerPage);
    const paginatedAgencies = filteredAgencies.slice(
        (currentPage - 1) * itemsPerPage,
        currentPage * itemsPerPage
    );

    // Seleção múltipla
    const toggleSelectAll = () => {
        if (selectedIds.size === paginatedAgencies.length) {
            setSelectedIds(new Set());
        } else {
            setSelectedIds(new Set(paginatedAgencies.map(a => a.id)));
        }
    };

    const toggleSelect = (id: string) => {
        const newSelected = new Set(selectedIds);
        if (newSelected.has(id)) {
            newSelected.delete(id);
        } else {
            newSelected.add(id);
        }
        setSelectedIds(newSelected);
    };

    return (
        <div className="p-6 max-w-[1600px] mx-auto space-y-6">
            {/* Header */}
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                    <h1 className="text-2xl font-bold text-zinc-900 dark:text-white tracking-tight">Agências</h1>
                    <p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
                        Gerencie seus parceiros e acompanhe o desempenho.
                    </p>
                </div>
                <div className="flex gap-2">
                    {selectedIds.size > 0 && (
                        <button
                            onClick={handleDeleteSelected}
                            className="inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-white rounded-lg bg-red-600 hover:bg-red-700 transition-colors"
                        >
                            <TrashIcon className="w-4 h-4" />
                            Excluir ({selectedIds.size})
                        </button>
                    )}
                    <button
                        onClick={() => setIsCreateModalOpen(true)}
                        className="inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-white rounded-lg hover:opacity-90 transition-opacity"
                        style={{ background: 'var(--gradient)' }}
                    >
                        <PlusIcon className="w-4 h-4" />
                        Nova Agência
                    </button>
                </div>
            </div>

            {/* Toolbar de Filtros */}
            <div className="flex flex-col lg:flex-row gap-4 items-center justify-between">
                {/* Busca */}
                <div className="relative w-full lg:w-96">
                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <MagnifyingGlassIcon className="h-5 w-5 text-zinc-400" aria-hidden="true" />
                    </div>
                    <input
                        type="text"
                        className="block w-full pl-10 pr-3 py-2 border border-zinc-200 dark:border-zinc-700 rounded-lg leading-5 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-1 focus:ring-[var(--brand-color)] focus:border-[var(--brand-color)] sm:text-sm transition duration-150 ease-in-out"
                        placeholder="Buscar por nome, email ou subdomínio..."
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                    />
                </div>

                <div className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
                    {/* Filtro de Status */}
                    <Listbox value={selectedStatus} onChange={setSelectedStatus}>
                        <div className="relative w-full sm:w-[180px]">
                            <Listbox.Button className="relative w-full cursor-pointer rounded-lg bg-white dark:bg-zinc-900 py-2 pl-3 pr-10 text-left text-sm border border-zinc-200 dark:border-zinc-700 focus:outline-none focus:border-[var(--brand-color)] focus:ring-1 focus:ring-[var(--brand-color)] text-zinc-700 dark:text-zinc-300">
                                <span className="block truncate">{selectedStatus.name}</span>
                                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                                    <ChevronUpDownIcon className="h-4 w-4 text-zinc-400" aria-hidden="true" />
                                </span>
                            </Listbox.Button>
                            <Transition
                                as={Fragment}
                                leave="transition ease-in duration-100"
                                leaveFrom="opacity-100"
                                leaveTo="opacity-0"
                            >
                                <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-zinc-800 py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm border border-zinc-200 dark:border-zinc-700">
                                    {STATUS_OPTIONS.map((status, statusIdx) => (
                                        <Listbox.Option
                                            key={statusIdx}
                                            className={({ active, selected }) =>
                                                `relative cursor-default select-none py-2 pl-10 pr-4 ${active ? 'bg-zinc-100 dark:bg-zinc-700 text-zinc-900 dark:text-white' : 'text-zinc-900 dark:text-zinc-100'
                                                }`
                                            }
                                            value={status}
                                        >
                                            {({ selected }) => (
                                                <>
                                                    <span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
                                                        {status.name}
                                                    </span>
                                                    {selected ? (
                                                        <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-[var(--brand-color)]">
                                                            <CheckIcon className="h-4 w-4" aria-hidden="true" />
                                                        </span>
                                                    ) : null}
                                                </>
                                            )}
                                        </Listbox.Option>
                                    ))}
                                </Listbox.Options>
                            </Transition>
                        </div>
                    </Listbox>

                    {/* Filtro de Data Unificado */}
                    <Menu as="div" className="relative w-full sm:w-auto">
                        <Menu.Button className="relative w-full sm:w-[220px] cursor-pointer rounded-lg bg-white dark:bg-zinc-900 py-2 pl-3 pr-10 text-left text-sm border border-zinc-200 dark:border-zinc-700 focus:outline-none focus:border-[var(--brand-color)] focus:ring-1 focus:ring-[var(--brand-color)] text-zinc-700 dark:text-zinc-300 flex items-center gap-2">
                            <CalendarIcon className="w-4 h-4 text-zinc-400" />
                            <span className="block truncate">
                                {selectedDatePreset.id === 'custom'
                                    ? (startDate && endDate ? `${new Date(startDate).toLocaleDateString()} - ${new Date(endDate).toLocaleDateString()}` : 'Selecionar período')
                                    : selectedDatePreset.name}
                            </span>
                            <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                                <ChevronUpDownIcon className="h-4 w-4 text-zinc-400" aria-hidden="true" />
                            </span>
                        </Menu.Button>
                        <Transition
                            as={Fragment}
                            enter="transition ease-out duration-100"
                            enterFrom="transform opacity-0 scale-95"
                            enterTo="transform opacity-100 scale-100"
                            leave="transition ease-in duration-75"
                            leaveFrom="transform opacity-100 scale-100"
                            leaveTo="transform opacity-0 scale-95"
                        >
                            <Menu.Items className="absolute right-0 z-10 mt-2 w-72 origin-top-right rounded-xl bg-white dark:bg-zinc-900 ring-1 ring-black ring-opacity-5 focus:outline-none border border-zinc-200 dark:border-zinc-700 divide-y divide-zinc-100 dark:divide-zinc-800">
                                <div className="p-1">
                                    {DATE_PRESETS.filter(p => p.id !== 'custom').map((preset) => (
                                        <Menu.Item key={preset.id}>
                                            {({ active }) => (
                                                <button
                                                    onClick={() => {
                                                        setSelectedDatePreset(preset);
                                                        setStartDate('');
                                                        setEndDate('');
                                                    }}
                                                    className={`${active ? 'bg-zinc-100 dark:bg-zinc-800' : ''
                                                        } ${selectedDatePreset.id === preset.id ? 'text-[var(--brand-color)] font-medium' : 'text-zinc-700 dark:text-zinc-300'
                                                        } group flex w-full items-center rounded-lg px-2 py-2 text-sm`}
                                                >
                                                    {preset.name}
                                                    {selectedDatePreset.id === preset.id && (
                                                        <CheckIcon className="ml-auto h-4 w-4" />
                                                    )}
                                                </button>
                                            )}
                                        </Menu.Item>
                                    ))}
                                </div>
                                <div className="p-3 space-y-3">
                                    <div className="text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">
                                        Personalizado
                                    </div>
                                    <div className="grid grid-cols-2 gap-2">
                                        <div>
                                            <label className="block text-xs text-zinc-500 mb-1">Início</label>
                                            <input
                                                type="date"
                                                value={startDate}
                                                onChange={(e) => {
                                                    setStartDate(e.target.value);
                                                    setSelectedDatePreset(DATE_PRESETS.find(p => p.id === 'custom')!);
                                                }}
                                                className="block w-full px-2 py-1 text-xs border border-zinc-200 dark:border-zinc-700 rounded bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 focus:outline-none focus:border-[var(--brand-color)]"
                                            />
                                        </div>
                                        <div>
                                            <label className="block text-xs text-zinc-500 mb-1">Fim</label>
                                            <input
                                                type="date"
                                                value={endDate}
                                                onChange={(e) => {
                                                    setEndDate(e.target.value);
                                                    setSelectedDatePreset(DATE_PRESETS.find(p => p.id === 'custom')!);
                                                }}
                                                className="block w-full px-2 py-1 text-xs border border-zinc-200 dark:border-zinc-700 rounded bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 focus:outline-none focus:border-[var(--brand-color)]"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </Menu.Items>
                        </Transition>
                    </Menu>

                    {/* Botão Limpar */}
                    {(searchTerm || selectedStatus.id !== 'all' || selectedDatePreset.id !== 'all') && (
                        <button
                            onClick={clearFilters}
                            className="inline-flex items-center justify-center px-3 py-2 border border-zinc-200 dark:border-zinc-700 text-sm font-medium rounded-lg text-zinc-700 dark:text-zinc-200 bg-white dark:bg-zinc-900 hover:bg-zinc-50 dark:hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--brand-color)]"
                            title="Limpar Filtros"
                        >
                            <XMarkIcon className="h-4 w-4" />
                        </button>
                    )}
                </div>
            </div>

            {/* Tabela */}
            {loading ? (
                <div className="flex items-center justify-center h-64 bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800">
                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--brand-color)]"></div>
                </div>
            ) : filteredAgencies.length === 0 ? (
                <div className="flex flex-col items-center justify-center h-64 bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 text-center p-8">
                    <div className="w-16 h-16 bg-zinc-50 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4">
                        <BuildingOfficeIcon className="w-8 h-8 text-zinc-400" />
                    </div>
                    <h3 className="text-lg font-medium text-zinc-900 dark:text-white mb-1">
                        Nenhuma agência encontrada
                    </h3>
                    <p className="text-zinc-500 dark:text-zinc-400 max-w-sm mx-auto">
                        Não encontramos resultados para os filtros selecionados. Tente limpar a busca ou alterar os filtros.
                    </p>
                    <button
                        onClick={clearFilters}
                        className="mt-4 text-sm text-[var(--brand-color)] hover:underline font-medium"
                    >
                        Limpar todos os filtros
                    </button>
                </div>
            ) : (
                <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden">
                    <div className="overflow-x-auto">
                        <table className="w-full">
                            <thead>
                                <tr className="bg-zinc-50/50 dark:bg-zinc-800/50 border-b border-zinc-200 dark:border-zinc-800">
                                    <th className="px-6 py-4 w-12">
                                        <input
                                            type="checkbox"
                                            checked={selectedIds.size === paginatedAgencies.length && paginatedAgencies.length > 0}
                                            onChange={toggleSelectAll}
                                            className="w-4 h-4 rounded border-zinc-300 dark:border-zinc-600"
                                            style={{ accentColor: 'var(--brand-color)' }}
                                        />
                                    </th>
                                    <th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Agência</th>
                                    <th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Contato</th>
                                    <th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Plano</th>
                                    <th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Soluções</th>
                                    <th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Status</th>
                                    <th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Data Cadastro</th>
                                    <th className="px-6 py-4 text-right text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Ações</th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
                                {paginatedAgencies.map((agency) => (
                                    <tr
                                        key={agency.id}
                                        onClick={(e) => {
                                            // Não navegar se clicar no checkbox, botões ou links
                                            if (
                                                (e.target as HTMLElement).closest('input[type="checkbox"]') ||
                                                (e.target as HTMLElement).closest('button') ||
                                                (e.target as HTMLElement).closest('a')
                                            ) {
                                                return;
                                            }
                                            router.push(`/superadmin/agencies/${agency.id}`);
                                        }}
                                        className="group hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors cursor-pointer"
                                    >
                                        <td className="px-6 py-4" onClick={(e) => e.stopPropagation()}>
                                            <input
                                                type="checkbox"
                                                checked={selectedIds.has(agency.id)}
                                                onChange={() => toggleSelect(agency.id)}
                                                className="w-4 h-4 rounded border-zinc-300 dark:border-zinc-600"
                                                style={{ accentColor: 'var(--brand-color)' }}
                                            />
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap">
                                            <div className="flex items-center gap-4">
                                                {agency.logo_url ? (
                                                    <img
                                                        src={agency.logo_url}
                                                        alt={agency.name}
                                                        className="w-10 h-10 rounded-lg object-cover bg-white dark:bg-zinc-800"
                                                    />
                                                ) : (
                                                    <div
                                                        className="w-10 h-10 rounded-lg flex items-center justify-center text-white font-bold text-sm"
                                                        style={{ background: 'var(--gradient)' }}
                                                    >
                                                        {agency.name?.substring(0, 2).toUpperCase()}
                                                    </div>
                                                )}
                                                <div>
                                                    <div className="text-sm font-semibold text-zinc-900 dark:text-white">
                                                        {agency.name}
                                                    </div>
                                                    <a
                                                        href={`http://${agency.subdomain}.localhost`}
                                                        target="_blank"
                                                        rel="noopener noreferrer"
                                                        className="text-xs text-zinc-500 hover:text-[var(--brand-color)] transition-colors flex items-center gap-1"
                                                    >
                                                        {agency.subdomain}.aggios.app
                                                    </a>
                                                </div>
                                            </div>
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap">
                                            <div className="flex flex-col gap-0.5">
                                                <span className="text-sm text-zinc-700 dark:text-zinc-300">{agency.email}</span>
                                                <span className="text-xs text-zinc-400">{agency.phone || 'Sem telefone'}</span>
                                            </div>
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap">
                                            {agency.plan_name ? (
                                                <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-purple-50 text-purple-700 border border-purple-200 dark:bg-purple-900/20 dark:text-purple-400 dark:border-purple-900/30">
                                                    {agency.plan_name}
                                                </span>
                                            ) : (
                                                <span className="text-xs text-zinc-400">Sem plano</span>
                                            )}
                                        </td>
                                        <td className="px-6 py-4">
                                            {agency.solutions && agency.solutions.length > 0 ? (
                                                <div className="flex flex-wrap gap-1 max-w-xs">
                                                    {agency.solutions.slice(0, 3).map((solution) => {
                                                        const Icon = SOLUTION_ICONS[solution.slug] || FolderIcon;
                                                        return (
                                                            <span
                                                                key={solution.id}
                                                                className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 border border-zinc-200 dark:border-zinc-700"
                                                            >
                                                                <Icon className="w-3.5 h-3.5 text-[var(--brand-color)]" />
                                                                {solution.name}
                                                            </span>
                                                        );
                                                    })}
                                                    {agency.solutions.length > 3 && (
                                                        <span className="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
                                                            +{agency.solutions.length - 3}
                                                        </span>
                                                    )}
                                                </div>
                                            ) : (
                                                <span className="text-xs text-zinc-400">Sem soluções</span>
                                            )}
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap" onClick={(e) => e.stopPropagation()}>
                                            <button
                                                onClick={() => toggleActive(agency.id, agency.is_active)}
                                                className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border transition-all ${agency.is_active
                                                    ? 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-400 dark:border-emerald-900/30'
                                                    : 'bg-zinc-100 text-zinc-600 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700'
                                                    }`}
                                            >
                                                <span className={`w-1.5 h-1.5 rounded-full ${agency.is_active ? 'bg-emerald-500' : 'bg-zinc-400'}`} />
                                                {agency.is_active ? 'Ativo' : 'Inativo'}
                                            </button>
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400">
                                            {new Date(agency.created_at).toLocaleDateString('pt-BR', {
                                                day: '2-digit',
                                                month: 'short',
                                                year: 'numeric'
                                            })}
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap text-right" onClick={(e) => e.stopPropagation()}>
                                            <Menu as="div" className="relative inline-block text-left">
                                                <Menu.Button className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors outline-none">
                                                    <EllipsisVerticalIcon className="w-5 h-5" />
                                                </Menu.Button>
                                                <Menu.Items
                                                    transition
                                                    portal
                                                    anchor="bottom end"
                                                    className="w-48 origin-top-right divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl bg-white dark:bg-zinc-900 focus:outline-none z-50 border border-zinc-200 dark:border-zinc-800 [--anchor-gap:8px] transition duration-100 ease-out data-[closed]:scale-95 data-[closed]:opacity-0"
                                                >
                                                    <div className="px-1 py-1">
                                                        <Menu.Item>
                                                            {({ active }) => (
                                                                <Link
                                                                    href={`/superadmin/agencies/${agency.id}`}
                                                                    className={`${active ? 'bg-zinc-50 dark:bg-zinc-800' : ''
                                                                        } group flex w-full items-center rounded-lg px-2 py-2 text-sm text-zinc-700 dark:text-zinc-300`}
                                                                >
                                                                    <EyeIcon className="mr-2 h-4 w-4 text-zinc-400" />
                                                                    Detalhes
                                                                </Link>
                                                            )}
                                                        </Menu.Item>
                                                        <Menu.Item>
                                                            {({ active }) => (
                                                                <Link
                                                                    href={`/superadmin/agencies/${agency.id}/edit`}
                                                                    className={`${active ? 'bg-zinc-50 dark:bg-zinc-800' : ''
                                                                        } group flex w-full items-center rounded-lg px-2 py-2 text-sm text-zinc-700 dark:text-zinc-300`}
                                                                >
                                                                    <PencilIcon className="mr-2 h-4 w-4 text-zinc-400" />
                                                                    Editar
                                                                </Link>
                                                            )}
                                                        </Menu.Item>
                                                    </div>
                                                    <div className="px-1 py-1">
                                                        <Menu.Item>
                                                            {({ active }) => (
                                                                <button
                                                                    onClick={() => handleDeleteClick(agency.id)}
                                                                    className={`${active ? 'bg-red-50 dark:bg-red-900/20' : ''
                                                                        } group flex w-full items-center rounded-lg px-2 py-2 text-sm text-red-600 dark:text-red-400`}
                                                                >
                                                                    <TrashIcon className="mr-2 h-4 w-4" />
                                                                    Excluir
                                                                </button>
                                                            )}
                                                        </Menu.Item>
                                                    </div>
                                                </Menu.Items>
                                            </Menu>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>

                    <Pagination
                        currentPage={currentPage}
                        totalPages={totalPages}
                        totalItems={totalItems}
                        itemsPerPage={itemsPerPage}
                        onPageChange={setCurrentPage}
                    />
                </div>
            )}

            <ConfirmDialog
                isOpen={confirmOpen}
                onClose={() => setConfirmOpen(false)}
                onConfirm={agencyToDelete === 'multiple' ? handleConfirmDeleteMultiple : handleConfirmDelete}
                title={agencyToDelete === 'multiple' ? `Excluir ${selectedIds.size} agências` : 'Excluir agência'}
                message={agencyToDelete === 'multiple'
                    ? `Tem certeza que deseja excluir ${selectedIds.size} agências? Esta ação não pode ser desfeita.`
                    : 'Tem certeza que deseja excluir esta agência? Esta ação não pode ser desfeita.'}
                confirmText="Excluir"
                cancelText="Cancelar"
                variant="danger"
            />

            <CreateAgencyModal
                isOpen={isCreateModalOpen}
                onClose={() => setIsCreateModalOpen(false)}
                onSuccess={fetchAgencies}
            />
        </div>
    );
}