"use client";

import { Fragment, useEffect, useState, Suspense } from 'react';
import { Menu, Transition, Tab } from '@headlessui/react';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { SolutionGuard } from '@/components/auth/SolutionGuard';
import { useCRMFilter } from '@/contexts/CRMFilterContext';
import { useToast } from '@/components/layout/ToastContext';
import {
    UserPlusIcon,
    TrashIcon,
    PencilIcon,
    EllipsisVerticalIcon,
    MagnifyingGlassIcon,
    PlusIcon,
    XMarkIcon,
    TagIcon,
    PhoneIcon,
    EnvelopeIcon,
    ChartBarIcon,
    RectangleStackIcon,
    UsersIcon,
    FunnelIcon,
    ArrowTrendingUpIcon,
    ArrowTrendingDownIcon,
    ShareIcon,
    ClipboardDocumentCheckIcon,
    LinkIcon,
    ArrowUpTrayIcon,
    ArrowDownTrayIcon,
} from '@heroicons/react/24/outline';

interface Lead {
    id: string;
    tenant_id: string;
    customer_id?: string;
    name: string;
    email: string;
    phone: string;
    source: string;
    source_meta: any;
    status: string;
    notes: string;
    tags: string[];
    is_active: boolean;
    created_by: string;
    created_at: string;
    updated_at: string;
    lists?: List[];
}

interface Customer {
    id: string;
    name: string;
    email: string;
    company: string;
}

interface List {
    id: string;
    name: string;
    description: string;
    lead_count?: number;
}

interface LeadStats {
    total: number;
    novo: number;
    qualificado: number;
    negociacao: number;
    convertido: number;
    perdido: number;
    bySource: Record<string, number>;
    conversionRate: number;
    thisMonth: number;
    lastMonth: number;
}

const STATUS_OPTIONS = [
    { value: 'novo', label: 'Novo', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' },
    { value: 'qualificado', label: 'Qualificado', color: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' },
    { value: 'negociacao', label: 'Em Negociação', color: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' },
    { value: 'convertido', label: 'Convertido', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' },
    { value: 'perdido', label: 'Perdido', color: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200' },
];

function classNames(...classes: string[]) {
    return classes.filter(Boolean).join(' ');
}

// Componente para exibir card de lead
function LeadCard({ lead, getStatusColor, getCustomerName, handleEdit, handleDelete }: {
    lead: Lead;
    getStatusColor: (status: string) => string;
    getCustomerName: (customerId?: string) => string | null;
    handleEdit: (lead: Lead) => void;
    handleDelete: (id: string) => void;
}) {
    return (
        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-md transition-shadow">
            <div className="flex items-start justify-between mb-3">
                <div className="flex-1 min-w-0">
                    <h3 className="font-semibold text-gray-900 dark:text-white truncate">
                        {lead.name || 'Sem nome'}
                    </h3>
                    <span className={`inline-block px-2 py-0.5 text-xs font-medium rounded-full mt-1 ${getStatusColor(lead.status)}`}>
                        {STATUS_OPTIONS.find(s => s.value === lead.status)?.label || lead.status}
                    </span>
                </div>
                <Menu as="div" className="relative">
                    <Menu.Button className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
                        <EllipsisVerticalIcon className="w-5 h-5 text-gray-500" />
                    </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 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-10">
                            <Menu.Item>
                                {({ active }) => (
                                    <button
                                        onClick={() => handleEdit(lead)}
                                        className={`${active ? 'bg-gray-50 dark:bg-gray-700' : ''} flex items-center w-full px-4 py-2 text-sm text-gray-700 dark:text-gray-300`}
                                    >
                                        <PencilIcon className="w-4 h-4 mr-2" />
                                        Editar
                                    </button>
                                )}
                            </Menu.Item>
                            <Menu.Item>
                                {({ active }) => (
                                    <button
                                        onClick={() => handleDelete(lead.id)}
                                        className={`${active ? 'bg-red-50 dark:bg-red-900/20' : ''} flex items-center w-full px-4 py-2 text-sm text-red-600 dark:text-red-400`}
                                    >
                                        <TrashIcon className="w-4 h-4 mr-2" />
                                        Excluir
                                    </button>
                                )}
                            </Menu.Item>
                        </Menu.Items>
                    </Transition>
                </Menu>
            </div>

            <div className="space-y-2 text-sm">
                {lead.email && (
                    <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                        <EnvelopeIcon className="w-4 h-4 flex-shrink-0" />
                        <span className="truncate">{lead.email}</span>
                    </div>
                )}
                {lead.phone && (
                    <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                        <PhoneIcon className="w-4 h-4 flex-shrink-0" />
                        <span>{lead.phone}</span>
                    </div>
                )}
                {lead.tags && lead.tags.length > 0 && (
                    <div className="flex items-center gap-2 flex-wrap mt-2">
                        {lead.tags.map((tag, idx) => (
                            <span
                                key={idx}
                                className="inline-flex items-center gap-1 px-2 py-0.5 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs rounded"
                            >
                                <TagIcon className="w-3 h-3" />
                                {tag}
                            </span>
                        ))}
                    </div>
                )}
            </div>

            <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 space-y-1">
                {lead.customer_id && (
                    <div>
                        Cliente: <span className="font-medium text-brand-600 dark:text-brand-400">{getCustomerName(lead.customer_id)}</span>
                    </div>
                )}
                {lead.lists && lead.lists.length > 0 && (
                    <div className="flex items-center gap-1 flex-wrap">
                        <span className="mr-1">Campanhas:</span>
                        {lead.lists.map(list => (
                            <span
                                key={list.id}
                                className="px-1.5 py-0.5 rounded text-[10px] font-medium text-white"
                                style={{ backgroundColor: (list as any).color || '#3b82f6' }}
                            >
                                {list.name}
                            </span>
                        ))}
                    </div>
                )}
                <div>
                    Origem: <span className="font-medium">{lead.source || 'manual'}</span>
                </div>
            </div>
        </div>
    );
}

function LeadsContent() {
    const { selectedCustomerId, customers, setCustomers } = useCRMFilter();
    const searchParams = useSearchParams();
    const campaignIdFromUrl = searchParams.get('campaign');
    const toast = useToast();

    const [leads, setLeads] = useState<Lead[]>([]);
    const [campaigns, setCampaigns] = useState<List[]>([]);
    const [selectedCampaign, setSelectedCampaign] = useState<string>(campaignIdFromUrl || '');
    const [stats, setStats] = useState<LeadStats | null>(null);
    const [loading, setLoading] = useState(true);
    const [searchTerm, setSearchTerm] = useState('');
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [editingLead, setEditingLead] = useState<Lead | null>(null);
    const [shareModalOpen, setShareModalOpen] = useState(false);
    const [selectedCustomerForShare, setSelectedCustomerForShare] = useState<Customer | null>(null);
    const [shareUrl, setShareUrl] = useState<string>('');
    const [copiedToClipboard, setCopiedToClipboard] = useState(false);
    const [formData, setFormData] = useState({
        customer_id: '',
        name: '',
        email: '',
        phone: '',
        source: 'manual',
        status: 'novo',
        notes: '',
        tags: [] as string[],
    });

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

    // Recarrega dados quando o filtro de cliente ou campanha mudar
    useEffect(() => {
        console.log('🔄 LeadsContent: Filtros alterados', { selectedCustomerId, selectedCampaign });

        if (selectedCampaign) {
            fetchLeadsByList(selectedCampaign);
        } else {
            fetchLeads();
        }
        fetchCampaigns();
    }, [selectedCustomerId, selectedCampaign]);

    useEffect(() => {
        calculateStats();
    }, [leads]);

    const calculateStats = () => {
        if (leads.length === 0) {
            setStats({
                total: 0,
                novo: 0,
                qualificado: 0,
                negociacao: 0,
                convertido: 0,
                perdido: 0,
                bySource: {},
                conversionRate: 0,
                thisMonth: 0,
                lastMonth: 0,
            });
            return;
        }

        const now = new Date();
        const currentMonth = now.getMonth();
        const currentYear = now.getFullYear();

        const statsByStatus = leads.reduce((acc, lead) => {
            acc[lead.status] = (acc[lead.status] || 0) + 1;
            return acc;
        }, {} as Record<string, number>);

        const bySource = leads.reduce((acc, lead) => {
            const source = lead.source || 'manual';
            acc[source] = (acc[source] || 0) + 1;
            return acc;
        }, {} as Record<string, number>);

        const thisMonth = leads.filter(lead => {
            const createdDate = new Date(lead.created_at);
            return createdDate.getMonth() === currentMonth && createdDate.getFullYear() === currentYear;
        }).length;

        const lastMonth = leads.filter(lead => {
            const createdDate = new Date(lead.created_at);
            const lastMonthDate = new Date(currentYear, currentMonth - 1);
            return createdDate.getMonth() === lastMonthDate.getMonth() &&
                createdDate.getFullYear() === lastMonthDate.getFullYear();
        }).length;

        const convertidos = statsByStatus['convertido'] || 0;
        const conversionRate = leads.length > 0 ? (convertidos / leads.length) * 100 : 0;

        setStats({
            total: leads.length,
            novo: statsByStatus['novo'] || 0,
            qualificado: statsByStatus['qualificado'] || 0,
            negociacao: statsByStatus['negociacao'] || 0,
            convertido: statsByStatus['convertido'] || 0,
            perdido: statsByStatus['perdido'] || 0,
            bySource,
            conversionRate,
            thisMonth,
            lastMonth,
        });
    };

    const fetchCampaigns = async () => {
        try {
            const timestamp = new Date().getTime();
            const url = selectedCustomerId
                ? `/api/crm/lists?customer_id=${selectedCustomerId}&t=${timestamp}`
                : `/api/crm/lists?t=${timestamp}`;

            console.log(`📡 Fetching campaigns from: ${url}`);
            const response = await fetch(url, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Cache-Control': 'no-cache'
                },
            });
            if (response.ok) {
                const data = await response.json();
                const newCampaigns = data.lists || [];
                setCampaigns(newCampaigns);

                // Se a campanha selecionada não estiver na nova lista, limpa a seleção
                if (selectedCampaign && !newCampaigns.find((c: any) => c.id === selectedCampaign)) {
                    console.log('🧹 Limpando campanha selecionada pois não pertence ao novo cliente');
                    setSelectedCampaign('');
                }
            }
        } catch (error) {
            console.error('Error fetching campaigns:', error);
        }
    };

    const fetchLeadsByList = async (listId: string) => {
        try {
            setLoading(true);
            const timestamp = new Date().getTime();
            const url = `/api/crm/lists/${listId}/leads?t=${timestamp}`;

            console.log(`📡 Fetching leads by list from: ${url}`);
            const response = await fetch(url, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Cache-Control': 'no-cache'
                },
            });
            if (response.ok) {
                const data = await response.json();
                console.log('✅ Leads by list received:', data.leads?.length || 0, 'leads');
                setLeads(data.leads || []);
            }
        } catch (error) {
            console.error('Error fetching leads by list:', error);
        } finally {
            setLoading(false);
        }
    };

    const fetchCustomers = async () => {
        try {
            const response = await fetch('/api/crm/customers', {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                },
            });
            if (response.ok) {
                const data = await response.json();
                setCustomers(data.customers || []);
            }
        } catch (error) {
            console.error('Error fetching customers:', error);
        }
    };

    const fetchLeads = async () => {
        try {
            setLoading(true);
            const timestamp = new Date().getTime();
            const url = selectedCustomerId
                ? `/api/crm/leads?customer_id=${selectedCustomerId}&t=${timestamp}`
                : `/api/crm/leads?t=${timestamp}`;

            console.log(`📡 Fetching leads from: ${url}`);
            const response = await fetch(url, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Cache-Control': 'no-cache'
                },
            });
            if (response.ok) {
                const data = await response.json();
                console.log('✅ Leads received:', data.leads?.length || 0, 'leads');
                setLeads(data.leads || []);
            }
        } catch (error) {
            console.error('Error fetching leads:', error);
        } finally {
            setLoading(false);
        }
    };

    const handleExport = async (format: 'csv' | 'xlsx' | 'json') => {
        try {
            const token = localStorage.getItem('token');
            let url = `/api/crm/leads/export?format=${format}`;
            if (selectedCustomerId) {
                url += `&customer_id=${selectedCustomerId}`;
            }
            if (selectedCampaign) {
                url += `&campaign_id=${selectedCampaign}`;
            }

            const response = await fetch(url, {
                headers: { 'Authorization': `Bearer ${token}` }
            });

            if (response.ok) {
                const blob = await response.blob();
                const downloadUrl = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = downloadUrl;
                a.download = `leads.${format === 'xlsx' ? 'xlsx' : format}`;
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(downloadUrl);
                document.body.removeChild(a);
                toast.success('Exportado com sucesso!');
            } else {
                toast.error('Erro ao exportar leads');
            }
        } catch (error) {
            console.error('Export error:', error);
            toast.error('Erro ao exportar');
        }
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();

        const url = editingLead
            ? `/api/crm/leads/${editingLead.id}`
            : '/api/crm/leads';

        const method = editingLead ? 'PUT' : 'POST';

        try {
            const response = await fetch(url, {
                method,
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData),
            });

            if (response.ok) {
                fetchLeads();
                handleCloseModal();
            }
        } catch (error) {
            console.error('Error saving lead:', error);
        }
    };

    const handleNewLead = () => {
        setEditingLead(null);
        setFormData({
            customer_id: selectedCustomerId || '',
            name: '',
            email: '',
            phone: '',
            source: 'manual',
            status: 'novo',
            notes: '',
            tags: [] as string[],
        });
        setIsModalOpen(true);
    };

    const handleEdit = (lead: Lead) => {
        setEditingLead(lead);
        setFormData({
            customer_id: lead.customer_id || '',
            name: lead.name,
            email: lead.email,
            phone: lead.phone,
            source: lead.source,
            status: lead.status,
            notes: lead.notes,
            tags: lead.tags || [],
        });
        setIsModalOpen(true);
    };

    const handleDelete = async (id: string) => {
        if (!confirm('Tem certeza que deseja excluir este lead?')) return;

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

            if (response.ok) {
                fetchLeads();
            }
        } catch (error) {
            console.error('Error deleting lead:', error);
        }
    };

    const handleCloseModal = () => {
        setIsModalOpen(false);
        setEditingLead(null);
        setFormData({
            customer_id: '',
            name: '',
            email: '',
            phone: '',
            source: 'manual',
            status: 'novo',
            notes: '',
            tags: [],
        });
    };

    const handleShareCustomerLeads = async (customer: Customer) => {
        setSelectedCustomerForShare(customer);

        try {
            // Gera um token de compartilhamento para este cliente
            const response = await fetch('/api/crm/customers/share-token', {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ customer_id: customer.id }),
            });

            if (response.ok) {
                const data = await response.json();
                const baseUrl = window.location.origin;
                const shareLink = `${baseUrl}/share/leads/${data.token}`;
                setShareUrl(shareLink);
                setShareModalOpen(true);
            }
        } catch (error) {
            console.error('Error generating share token:', error);
            alert('Erro ao gerar link de compartilhamento');
        }
    };

    const copyShareLink = () => {
        navigator.clipboard.writeText(shareUrl);
        setCopiedToClipboard(true);
        setTimeout(() => setCopiedToClipboard(false), 2000);
    };

    const getCustomerName = (customerId?: string) => {
        if (!customerId) return null;
        const customer = customers.find(c => c.id === customerId);
        return customer?.company || customer?.name || 'Cliente';
    };

    const filteredLeads = leads.filter(lead =>
        lead.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        lead.email?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        lead.phone?.includes(searchTerm)
    );

    const getStatusColor = (status: string) => {
        return STATUS_OPTIONS.find(s => s.value === status)?.color || 'bg-gray-100 text-gray-800';
    };

    return (
        <SolutionGuard requiredSolution="crm">
            <div className="p-6 h-full overflow-auto">
                {/* Header */}
                <div className="flex items-center justify-between mb-6">
                    <div>
                        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Leads</h1>
                        <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                            Central completa de gerenciamento de leads e funil de vendas
                        </p>
                    </div>
                    <div className="flex items-center gap-3">
                        <Menu as="div" className="relative">
                            <Menu.Button className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                <ArrowDownTrayIcon className="w-5 h-5" />
                                Exportar
                            </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 mt-2 w-48 origin-top-right rounded-lg bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-50 border border-gray-200 dark:border-gray-700">
                                    <div className="p-1">
                                        <Menu.Item>
                                            {({ active }) => (
                                                <button
                                                    onClick={() => handleExport('csv')}
                                                    className={`${active ? 'bg-gray-100 dark:bg-gray-700' : ''} w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-300 rounded-md`}
                                                >
                                                    Exportar como CSV
                                                </button>
                                            )}
                                        </Menu.Item>
                                        <Menu.Item>
                                            {({ active }) => (
                                                <button
                                                    onClick={() => handleExport('xlsx')}
                                                    className={`${active ? 'bg-gray-100 dark:bg-gray-700' : ''} w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-300 rounded-md`}
                                                >
                                                    Exportar como Excel
                                                </button>
                                            )}
                                        </Menu.Item>
                                        <Menu.Item>
                                            {({ active }) => (
                                                <button
                                                    onClick={() => handleExport('json')}
                                                    className={`${active ? 'bg-gray-100 dark:bg-gray-700' : ''} w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-300 rounded-md`}
                                                >
                                                    Exportar como JSON
                                                </button>
                                            )}
                                        </Menu.Item>
                                    </div>
                                </Menu.Items>
                            </Transition>
                        </Menu>
                        <Link
                            href={selectedCustomerId ? `/crm/leads/importar?customer=${selectedCustomerId}` : "/crm/leads/importar"}
                            className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                        >
                            <ArrowUpTrayIcon className="w-5 h-5" />
                            Importar
                        </Link>
                        <Menu as="div" className="relative">
                            <Menu.Button className="flex items-center gap-2 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
                                <ShareIcon className="w-5 h-5" />
                                Compartilhar
                            </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 mt-2 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-10 max-h-96 overflow-y-auto">
                                    <div className="p-3 border-b border-gray-200 dark:border-gray-700">
                                        <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
                                            Compartilhar leads com cliente
                                        </p>
                                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                            Selecione um cliente para gerar link
                                        </p>
                                    </div>
                                    {selectedCustomerId && customers.find(c => c.id === selectedCustomerId) && (
                                        <div className="p-2 bg-brand-50 dark:bg-brand-900/20 border-b border-gray-100 dark:border-gray-700">
                                            <p className="text-[10px] font-bold text-brand-600 dark:text-brand-400 uppercase tracking-wider px-2 mb-1">
                                                Cliente Selecionado
                                            </p>
                                            <Menu.Item>
                                                {({ active }) => (
                                                    <button
                                                        onClick={() => handleShareCustomerLeads(customers.find(c => c.id === selectedCustomerId)!)}
                                                        className={`${active ? 'bg-brand-100 dark:bg-brand-900/40' : ''} flex items-center w-full px-2 py-2 text-sm text-brand-700 dark:text-brand-300 rounded-md`}
                                                    >
                                                        <div className="flex-1 text-left">
                                                            <p className="font-bold">{customers.find(c => c.id === selectedCustomerId)?.company || customers.find(c => c.id === selectedCustomerId)?.name}</p>
                                                        </div>
                                                        <LinkIcon className="w-4 h-4 text-brand-500" />
                                                    </button>
                                                )}
                                            </Menu.Item>
                                        </div>
                                    )}
                                    {customers.length === 0 ? (
                                        <div className="p-4 text-center text-sm text-gray-500">
                                            Nenhum cliente cadastrado
                                        </div>
                                    ) : (
                                        customers
                                            .filter(c => c.id !== selectedCustomerId)
                                            .map(customer => (
                                                <Menu.Item key={customer.id}>
                                                    {({ active }) => (
                                                        <button
                                                            onClick={() => handleShareCustomerLeads(customer)}
                                                            className={`${active ? 'bg-gray-50 dark:bg-gray-700' : ''} flex items-center w-full px-4 py-3 text-sm text-gray-700 dark:text-gray-300 border-b border-gray-100 dark:border-gray-700 last:border-0`}
                                                        >
                                                            <div className="flex-1 text-left">
                                                                <p className="font-medium">{customer.company || customer.name}</p>
                                                                <p className="text-xs text-gray-500 dark:text-gray-400">{customer.email}</p>
                                                            </div>
                                                            <LinkIcon className="w-4 h-4 text-gray-400" />
                                                        </button>
                                                    )}
                                                </Menu.Item>
                                            ))
                                    )}
                                </Menu.Items>
                            </Transition>
                        </Menu>
                        <Link
                            href="/crm/funis"
                            className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-800 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                        >
                            <RectangleStackIcon className="w-5 h-5 text-brand-500" />
                            Ver no Funil
                        </Link>
                        <button
                            onClick={handleNewLead}
                            className="flex items-center gap-2 px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors"
                        >
                            <PlusIcon className="w-5 h-5" />
                            Novo Lead
                        </button>
                    </div>
                </div>

                {/* Tabs */}
                <Tab.Group>
                    <Tab.List className="flex space-x-1 rounded-xl bg-white dark:bg-gray-900 p-1 border border-gray-200 dark:border-gray-800 mb-6">
                        <Tab
                            className={({ selected }) =>
                                classNames(
                                    'w-full rounded-lg py-2.5 text-sm font-medium leading-5',
                                    'ring-white ring-opacity-60 ring-offset-2 ring-offset-brand-400 focus:outline-none focus:ring-2',
                                    selected
                                        ? 'bg-brand-500 text-white shadow'
                                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
                                )
                            }
                        >
                            <div className="flex items-center justify-center gap-2">
                                <ChartBarIcon className="w-5 h-5" />
                                Visão Geral
                            </div>
                        </Tab>
                        <Tab
                            className={({ selected }) =>
                                classNames(
                                    'w-full rounded-lg py-2.5 text-sm font-medium leading-5',
                                    'ring-white ring-opacity-60 ring-offset-2 ring-offset-brand-400 focus:outline-none focus:ring-2',
                                    selected
                                        ? 'bg-brand-500 text-white shadow'
                                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
                                )
                            }
                        >
                            <div className="flex items-center justify-center gap-2">
                                <UsersIcon className="w-5 h-5" />
                                Todos os Leads
                            </div>
                        </Tab>
                        <Tab
                            className={({ selected }) =>
                                classNames(
                                    'w-full rounded-lg py-2.5 text-sm font-medium leading-5',
                                    'ring-white ring-opacity-60 ring-offset-2 ring-offset-brand-400 focus:outline-none focus:ring-2',
                                    selected
                                        ? 'bg-brand-500 text-white shadow'
                                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
                                )
                            }
                        >
                            <div className="flex items-center justify-center gap-2">
                                <RectangleStackIcon className="w-5 h-5" />
                                Por Campanha
                            </div>
                        </Tab>
                    </Tab.List>

                    <Tab.Panels>
                        {/* Painel de Visão Geral */}
                        <Tab.Panel>
                            {stats && (
                                <div className="space-y-6">
                                    {/* Cards de Métricas Principais */}
                                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                                        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
                                            <div className="flex items-center justify-between mb-2">
                                                <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Total de Leads</h3>
                                                <UsersIcon className="w-5 h-5 text-brand-500" />
                                            </div>
                                            <p className="text-3xl font-bold text-gray-900 dark:text-white">{stats.total}</p>
                                            <div className="mt-2 flex items-center text-sm">
                                                {stats.thisMonth >= stats.lastMonth ? (
                                                    <ArrowTrendingUpIcon className="w-4 h-4 text-green-500 mr-1" />
                                                ) : (
                                                    <ArrowTrendingDownIcon className="w-4 h-4 text-red-500 mr-1" />
                                                )}
                                                <span className={stats.thisMonth >= stats.lastMonth ? 'text-green-600' : 'text-red-600'}>
                                                    {stats.thisMonth} este mês
                                                </span>
                                            </div>
                                        </div>

                                        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
                                            <div className="flex items-center justify-between mb-2">
                                                <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Taxa de Conversão</h3>
                                                <FunnelIcon className="w-5 h-5 text-purple-500" />
                                            </div>
                                            <p className="text-3xl font-bold text-gray-900 dark:text-white">
                                                {stats.conversionRate.toFixed(1)}%
                                            </p>
                                            <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
                                                {stats.convertido} convertidos
                                            </p>
                                        </div>

                                        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
                                            <div className="flex items-center justify-between mb-2">
                                                <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Novos Leads</h3>
                                                <UserPlusIcon className="w-5 h-5 text-blue-500" />
                                            </div>
                                            <p className="text-3xl font-bold text-gray-900 dark:text-white">{stats.novo}</p>
                                            <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
                                                Aguardando qualificação
                                            </p>
                                        </div>

                                        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
                                            <div className="flex items-center justify-between mb-2">
                                                <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Em Negociação</h3>
                                                <TagIcon className="w-5 h-5 text-yellow-500" />
                                            </div>
                                            <p className="text-3xl font-bold text-gray-900 dark:text-white">{stats.negociacao}</p>
                                            <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
                                                Potencial de conversão
                                            </p>
                                        </div>
                                    </div>

                                    {/* Leads por Status */}
                                    <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
                                        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                                            Distribuição por Status
                                        </h3>
                                        <div className="space-y-3">
                                            {STATUS_OPTIONS.map(status => {
                                                const count = stats[status.value as keyof LeadStats] as number || 0;
                                                const percentage = stats.total > 0 ? (count / stats.total) * 100 : 0;
                                                return (
                                                    <div key={status.value}>
                                                        <div className="flex items-center justify-between mb-1">
                                                            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                                                                {status.label}
                                                            </span>
                                                            <span className="text-sm text-gray-600 dark:text-gray-400">
                                                                {count} ({percentage.toFixed(1)}%)
                                                            </span>
                                                        </div>
                                                        <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                                            <div
                                                                className={`h-2 rounded-full ${status.color.split(' ')[0]}`}
                                                                style={{ width: `${percentage}%` }}
                                                            ></div>
                                                        </div>
                                                    </div>
                                                );
                                            })}
                                        </div>
                                    </div>

                                    {/* Leads por Origem */}
                                    <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
                                        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                                            Leads por Origem
                                        </h3>
                                        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                                            {Object.entries(stats.bySource).map(([source, count]) => (
                                                <div key={source} className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
                                                    <p className="text-sm text-gray-600 dark:text-gray-400 capitalize">{source}</p>
                                                    <p className="text-2xl font-bold text-gray-900 dark:text-white mt-1">{count}</p>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                            )}
                        </Tab.Panel>

                        {/* Painel de Todos os Leads */}
                        <Tab.Panel>
                            {/* Search */}
                            <div className="mb-6">
                                <div className="relative">
                                    <MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                                    <input
                                        type="text"
                                        placeholder="Buscar por nome, email ou telefone..."
                                        value={searchTerm}
                                        onChange={(e) => setSearchTerm(e.target.value)}
                                        className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                                    />
                                </div>
                            </div>

                            {/* Leads Grid */}
                            {loading ? (
                                <div className="text-center py-12">
                                    <div className="animate-spin w-8 h-8 border-4 border-brand-500 border-t-transparent rounded-full mx-auto"></div>
                                </div>
                            ) : filteredLeads.length === 0 ? (
                                <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800">
                                    <UserPlusIcon className="w-12 h-12 text-gray-400 mx-auto mb-3" />
                                    <p className="text-gray-500 dark:text-gray-400">
                                        {searchTerm ? 'Nenhum lead encontrado' : 'Nenhum lead cadastrado'}
                                    </p>
                                </div>
                            ) : (
                                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                    {filteredLeads.map((lead) => (
                                        <LeadCard
                                            key={lead.id}
                                            lead={lead}
                                            getStatusColor={getStatusColor}
                                            getCustomerName={getCustomerName}
                                            handleEdit={handleEdit}
                                            handleDelete={handleDelete}
                                        />
                                    ))}
                                </div>
                            )}
                        </Tab.Panel>

                        {/* Painel Por Campanha */}
                        <Tab.Panel>
                            <div className="space-y-6">
                                {/* Seletor de Campanha */}
                                <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
                                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Selecione uma Campanha
                                    </label>
                                    <select
                                        value={selectedCampaign}
                                        onChange={(e) => {
                                            setSelectedCampaign(e.target.value);
                                            if (e.target.value) {
                                                fetchLeadsByList(e.target.value);
                                            } else {
                                                fetchLeads();
                                            }
                                        }}
                                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                                    >
                                        <option value="">Todas as campanhas</option>
                                        {campaigns.map(campaign => (
                                            <option key={campaign.id} value={campaign.id}>
                                                {campaign.name} {campaign.description && `- ${campaign.description}`}
                                            </option>
                                        ))}
                                    </select>
                                </div>

                                {/* Leads da Campanha */}
                                {loading ? (
                                    <div className="text-center py-12">
                                        <div className="animate-spin w-8 h-8 border-4 border-brand-500 border-t-transparent rounded-full mx-auto"></div>
                                    </div>
                                ) : selectedCampaign ? (
                                    filteredLeads.length === 0 ? (
                                        <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800">
                                            <RectangleStackIcon className="w-12 h-12 text-gray-400 mx-auto mb-3" />
                                            <p className="text-gray-500 dark:text-gray-400">
                                                Nenhum lead nesta campanha
                                            </p>
                                        </div>
                                    ) : (
                                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                            {filteredLeads.map((lead) => (
                                                <LeadCard
                                                    key={lead.id}
                                                    lead={lead}
                                                    getStatusColor={getStatusColor}
                                                    getCustomerName={getCustomerName}
                                                    handleEdit={handleEdit}
                                                    handleDelete={handleDelete}
                                                />
                                            ))}
                                        </div>
                                    )
                                ) : (
                                    <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800">
                                        <RectangleStackIcon className="w-12 h-12 text-gray-400 mx-auto mb-3" />
                                        <p className="text-gray-500 dark:text-gray-400">
                                            Selecione uma lista para ver os leads
                                        </p>
                                    </div>
                                )}
                            </div>
                        </Tab.Panel>
                    </Tab.Panels>
                </Tab.Group>

                {/* Modal */}
                {
                    isModalOpen && (
                        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
                            <div className="bg-white dark:bg-gray-900 rounded-xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
                                <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-800">
                                    <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
                                        {editingLead ? 'Editar Lead' : 'Novo Lead'}
                                    </h2>
                                    <button
                                        onClick={handleCloseModal}
                                        className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg"
                                    >
                                        <XMarkIcon className="w-5 h-5" />
                                    </button>
                                </div>

                                <form onSubmit={handleSubmit} className="p-6 space-y-4">
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                            Cliente (Empresa)
                                        </label>
                                        <select
                                            value={formData.customer_id}
                                            onChange={(e) => setFormData({ ...formData, customer_id: e.target.value })}
                                            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                                        >
                                            <option value="">Sem cliente vinculado</option>
                                            {customers.map(customer => (
                                                <option key={customer.id} value={customer.id}>
                                                    {customer.company || customer.name}
                                                </option>
                                            ))}
                                        </select>
                                        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                            Vincule este lead a um cliente específico (ex: DH Projects)
                                        </p>
                                    </div>

                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                            Nome *
                                        </label>
                                        <input
                                            type="text"
                                            required
                                            value={formData.name}
                                            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                                            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                                        />
                                    </div>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div>
                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                                Email
                                            </label>
                                            <input
                                                type="email"
                                                value={formData.email}
                                                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                                                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                                            />
                                        </div>

                                        <div>
                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                                Telefone
                                            </label>
                                            <input
                                                type="tel"
                                                value={formData.phone}
                                                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                                                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                                            />
                                        </div>
                                    </div>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div>
                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                                Origem
                                            </label>
                                            <input
                                                type="text"
                                                value={formData.source}
                                                onChange={(e) => setFormData({ ...formData, source: e.target.value })}
                                                placeholder="manual, site, meta, etc"
                                                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                                            />
                                        </div>

                                        <div>
                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                                Status
                                            </label>
                                            <select
                                                value={formData.status}
                                                onChange={(e) => setFormData({ ...formData, status: e.target.value })}
                                                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                                            >
                                                {STATUS_OPTIONS.map(option => (
                                                    <option key={option.value} value={option.value}>
                                                        {option.label}
                                                    </option>
                                                ))}
                                            </select>
                                        </div>
                                    </div>

                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                            Notas
                                        </label>
                                        <textarea
                                            value={formData.notes}
                                            onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                                            rows={3}
                                            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                                        />
                                    </div>

                                    <div className="flex gap-3 pt-4">
                                        <button
                                            type="button"
                                            onClick={handleCloseModal}
                                            className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800"
                                        >
                                            Cancelar
                                        </button>
                                        <button
                                            type="submit"
                                            className="flex-1 px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600"
                                        >
                                            {editingLead ? 'Salvar' : 'Criar'}
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    )
                }

                {/* Modal de Compartilhamento */}
                {
                    shareModalOpen && selectedCustomerForShare && (
                        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
                            <div className="bg-white dark:bg-gray-900 rounded-xl shadow-xl max-w-lg w-full">
                                <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-800">
                                    <div className="flex items-center gap-3">
                                        <div className="p-2 bg-brand-100 dark:bg-brand-900/30 rounded-lg">
                                            <ShareIcon className="w-6 h-6 text-brand-600 dark:text-brand-400" />
                                        </div>
                                        <div>
                                            <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
                                                Link de Compartilhamento
                                            </h2>
                                            <p className="text-sm text-gray-600 dark:text-gray-400">
                                                {selectedCustomerForShare.company || selectedCustomerForShare.name}
                                            </p>
                                        </div>
                                    </div>
                                    <button
                                        onClick={() => {
                                            setShareModalOpen(false);
                                            setSelectedCustomerForShare(null);
                                            setShareUrl('');
                                            setCopiedToClipboard(false);
                                        }}
                                        className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg"
                                    >
                                        <XMarkIcon className="w-5 h-5" />
                                    </button>
                                </div>

                                <div className="p-6 space-y-4">
                                    <div>
                                        <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
                                            Compartilhe este link com seu cliente para que ele possa visualizar:
                                        </p>
                                        <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-400 mb-4">
                                            <li className="flex items-center gap-2">
                                                <div className="w-1.5 h-1.5 bg-brand-500 rounded-full"></div>
                                                Dashboard com métricas dos leads
                                            </li>
                                            <li className="flex items-center gap-2">
                                                <div className="w-1.5 h-1.5 bg-brand-500 rounded-full"></div>
                                                Lista completa de leads vinculados
                                            </li>
                                            <li className="flex items-center gap-2">
                                                <div className="w-1.5 h-1.5 bg-brand-500 rounded-full"></div>
                                                Estatísticas de conversão em tempo real
                                            </li>
                                        </ul>
                                    </div>

                                    <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                                        <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">
                                            LINK DE ACESSO
                                        </label>
                                        <div className="flex items-center gap-2">
                                            <input
                                                type="text"
                                                value={shareUrl}
                                                readOnly
                                                className="flex-1 px-3 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white"
                                            />
                                            <button
                                                onClick={copyShareLink}
                                                className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${copiedToClipboard
                                                    ? 'bg-green-500 text-white'
                                                    : 'bg-brand-500 text-white hover:bg-brand-600'
                                                    }`}
                                            >
                                                {copiedToClipboard ? (
                                                    <>
                                                        <ClipboardDocumentCheckIcon className="w-5 h-5" />
                                                        Copiado!
                                                    </>
                                                ) : (
                                                    <>
                                                        <LinkIcon className="w-5 h-5" />
                                                        Copiar
                                                    </>
                                                )}
                                            </button>
                                        </div>
                                    </div>

                                    <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                                        <p className="text-sm text-blue-800 dark:text-blue-300">
                                            <strong>💡 Dica:</strong> Este link é único e seguro. Apenas pessoas com acesso ao link poderão visualizar os dados deste cliente.
                                        </p>
                                    </div>

                                    <div className="flex justify-end pt-2">
                                        <button
                                            onClick={() => {
                                                setShareModalOpen(false);
                                                setSelectedCustomerForShare(null);
                                                setShareUrl('');
                                                setCopiedToClipboard(false);
                                            }}
                                            className="px-6 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700"
                                        >
                                            Fechar
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}
            </div>
        </SolutionGuard>
    );
}

export default function LeadsPage() {
    return (
        <Suspense fallback={<div className="p-6">Carregando leads...</div>}>
            <LeadsContent />
        </Suspense>
    );
}