"use client";

import { useState, useEffect, Suspense, useRef } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useToast } from '@/components/layout/ToastContext';
import Papa from 'papaparse';
import {
    ArrowUpTrayIcon,
    DocumentTextIcon,
    CheckCircleIcon,
    XCircleIcon,
    ArrowPathIcon,
    ChevronLeftIcon,
    InformationCircleIcon,
    TableCellsIcon,
    CommandLineIcon,
    CpuChipIcon,
    CloudArrowUpIcon,
} from '@heroicons/react/24/outline';

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

interface Campaign {
    id: string;
    name: string;
    customer_id: string;
}

function ImportLeadsContent() {
    const router = useRouter();
    const searchParams = useSearchParams();
    const campaignIdFromUrl = searchParams.get('campaign');
    const customerIdFromUrl = searchParams.get('customer');

    const toast = useToast();
    const [customers, setCustomers] = useState<Customer[]>([]);
    const [campaigns, setCampaigns] = useState<Campaign[]>([]);
    const [loading, setLoading] = useState(false);
    const [importing, setImporting] = useState(false);

    const [selectedCustomer, setSelectedCustomer] = useState(customerIdFromUrl || '');
    const [selectedCampaign, setSelectedCampaign] = useState(campaignIdFromUrl || '');
    const [jsonContent, setJsonContent] = useState('');
    const [csvFile, setCsvFile] = useState<File | null>(null);
    const [preview, setPreview] = useState<any[]>([]);
    const [error, setError] = useState<string | null>(null);
    const [importType, setImportType] = useState<'json' | 'csv' | 'typebot' | 'api'>('json');
    const fileInputRef = useRef<HTMLInputElement>(null);

    // Mapeamento inteligente de campos
    const mapLeadData = (data: any[]) => {
        const fieldMap: Record<string, string[]> = {
            name: ['nome', 'name', 'full name', 'nome completo', 'cliente', 'contato'],
            email: ['email', 'e-mail', 'mail', 'correio'],
            phone: ['phone', 'telefone', 'celular', 'mobile', 'whatsapp', 'zap', 'tel'],
            source: ['source', 'origem', 'canal', 'campanha', 'midia', 'mídia', 'campaign'],
            status: ['status', 'fase', 'etapa', 'situação', 'situacao'],
            notes: ['notes', 'notas', 'observações', 'observacoes', 'obs', 'comentário', 'comentario'],
        };

        return data.map(item => {
            const mapped: any = { ...item };
            const itemKeys = Object.keys(item);

            // Tenta encontrar correspondências para cada campo principal
            Object.entries(fieldMap).forEach(([targetKey, aliases]) => {
                const foundKey = itemKeys.find(k =>
                    aliases.includes(k.toLowerCase().trim())
                );
                if (foundKey && !mapped[targetKey]) {
                    mapped[targetKey] = item[foundKey];
                }
            });

            // Garante que campos básicos existam
            if (!mapped.name && mapped.Nome) mapped.name = mapped.Nome;
            if (!mapped.email && mapped.Email) mapped.email = mapped.Email;
            if (!mapped.phone && (mapped.Celular || mapped.Telefone)) mapped.phone = mapped.Celular || mapped.Telefone;

            return mapped;
        });
    };

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

    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (!file) return;

        if (file.type !== 'text/csv' && !file.name.endsWith('.csv')) {
            toast.error('Erro', 'Por favor, selecione um arquivo CSV válido.');
            return;
        }

        setCsvFile(file);
        setError(null);

        // Tenta ler o arquivo primeiro para detectar onde começam os dados
        const reader = new FileReader();
        reader.onload = (event) => {
            const text = event.target?.result as string;
            const lines = text.split('\n');

            // Procura a linha que parece ser o cabeçalho (contém Nome, Email ou Celular)
            let headerIndex = 0;
            for (let i = 0; i < Math.min(lines.length, 10); i++) {
                const lowerLine = lines[i].toLowerCase();
                if (lowerLine.includes('nome') || lowerLine.includes('email') || lowerLine.includes('celular')) {
                    headerIndex = i;
                    break;
                }
            }

            const csvData = lines.slice(headerIndex).join('\n');

            Papa.parse(csvData, {
                header: true,
                skipEmptyLines: true,
                complete: (results) => {
                    if (results.errors.length > 0 && results.data.length === 0) {
                        setError('Erro ao processar CSV. Verifique a formatação.');
                        setPreview([]);
                    } else {
                        const mappedData = mapLeadData(results.data);
                        setPreview(mappedData.slice(0, 5));
                    }
                },
                error: (err: any) => {
                    setError('Falha ao ler o arquivo.');
                    setPreview([]);
                }
            });
        };
        reader.readAsText(file);
    };

    const fetchData = async () => {
        setLoading(true);
        try {
            const [custRes, campRes] = await Promise.all([
                fetch('/api/crm/customers', {
                    headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
                }),
                fetch('/api/crm/lists', {
                    headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
                })
            ]);

            let fetchedCampaigns: Campaign[] = [];
            if (campRes.ok) {
                const data = await campRes.json();
                fetchedCampaigns = data.lists || [];
                setCampaigns(fetchedCampaigns);
            }

            if (custRes.ok) {
                const data = await custRes.json();
                setCustomers(data.customers || []);
            }

            // Se veio da campanha, tenta setar o cliente automaticamente
            if (campaignIdFromUrl && fetchedCampaigns.length > 0) {
                const campaign = fetchedCampaigns.find(c => c.id === campaignIdFromUrl);
                if (campaign && campaign.customer_id) {
                    setSelectedCustomer(campaign.customer_id);
                }
            }
        } catch (err) {
            console.error('Error fetching data:', err);
        } finally {
            setLoading(false);
        }
    };

    const handleJsonChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        const content = e.target.value;
        setJsonContent(content);
        setError(null);

        if (!content.trim()) {
            setPreview([]);
            return;
        }

        try {
            const parsed = JSON.parse(content);
            const leads = Array.isArray(parsed) ? parsed : [parsed];
            const mappedData = mapLeadData(leads);
            setPreview(mappedData.slice(0, 5));
        } catch (err) {
            setError('JSON inválido. Verifique a formatação.');
            setPreview([]);
        }
    };

    const handleImport = async () => {
        let leads: any[] = [];

        if (importType === 'json') {
            if (!jsonContent.trim() || error) {
                toast.error('Erro', 'Por favor, insira um JSON válido.');
                return;
            }
            try {
                const parsed = JSON.parse(jsonContent);
                leads = Array.isArray(parsed) ? parsed : [parsed];
            } catch (err) {
                toast.error('Erro', 'JSON inválido.');
                return;
            }
        } else if (importType === 'csv') {
            if (!csvFile || error) {
                toast.error('Erro', 'Por favor, selecione um arquivo CSV válido.');
                return;
            }

            // Parse CSV again to get all data
            const results = await new Promise<any[]>((resolve) => {
                const reader = new FileReader();
                reader.onload = (event) => {
                    const text = event.target?.result as string;
                    const lines = text.split('\n');
                    let headerIndex = 0;
                    for (let i = 0; i < Math.min(lines.length, 10); i++) {
                        const lowerLine = lines[i].toLowerCase();
                        if (lowerLine.includes('nome') || lowerLine.includes('email') || lowerLine.includes('celular')) {
                            headerIndex = i;
                            break;
                        }
                    }
                    const csvData = lines.slice(headerIndex).join('\n');
                    Papa.parse(csvData, {
                        header: true,
                        skipEmptyLines: true,
                        complete: (results: any) => resolve(results.data)
                    });
                };
                reader.readAsText(csvFile);
            });
            leads = results;
        }

        if (leads.length === 0) {
            toast.error('Erro', 'Nenhum lead encontrado para importar.');
            return;
        }

        // Aplica o mapeamento inteligente antes de enviar
        const mappedLeads = mapLeadData(leads);

        setImporting(true);
        try {
            const response = await fetch('/api/crm/leads/import', {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    customer_id: selectedCustomer,
                    campaign_id: selectedCampaign,
                    leads: mappedLeads
                }),
            });

            if (response.ok) {
                const result = await response.json();
                toast.success('Sucesso', `${result.count} leads importados com sucesso.`);

                // Se veio de uma campanha, volta para a campanha
                if (campaignIdFromUrl) {
                    router.push(`/crm/campanhas/${campaignIdFromUrl}`);
                } else {
                    router.push('/crm/leads');
                }
            } else {
                const errData = await response.json();
                toast.error('Erro na importação', errData.error || 'Ocorreu um erro ao importar os leads.');
            }
        } catch (err) {
            console.error('Import error:', err);
            toast.error('Erro', 'Falha ao processar a importação.');
        } finally {
            setImporting(false);
        }
    };

    return (
        <div className="p-6 max-w-5xl mx-auto space-y-6">
            {/* Header */}
            <div className="flex items-center gap-4">
                <button
                    onClick={() => router.back()}
                    className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-500 transition-colors"
                >
                    <ChevronLeftIcon className="w-5 h-5" />
                </button>
                <div>
                    <h1 className="text-2xl font-bold text-zinc-900 dark:text-white tracking-tight">Importar Leads</h1>
                    <p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
                        Selecione o método de importação e organize seus leads
                    </p>
                </div>
            </div>

            {/* Import Methods */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <button
                    onClick={() => setImportType('json')}
                    className={`p-4 rounded-xl border transition-all text-left flex flex-col gap-3 ${importType === 'json'
                        ? 'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800 ring-1 ring-blue-500'
                        : 'bg-white border-zinc-200 dark:bg-zinc-900 dark:border-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700'
                        }`}
                >
                    <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${importType === 'json' ? 'bg-blue-500 text-white' : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-500'}`}>
                        <DocumentTextIcon className="w-6 h-6" />
                    </div>
                    <div>
                        <h3 className="text-sm font-bold text-zinc-900 dark:text-white">JSON</h3>
                        <p className="text-xs text-zinc-500 dark:text-zinc-400">Importação via código</p>
                    </div>
                    <div className="mt-auto">
                        <span className="text-[10px] font-bold uppercase px-1.5 py-0.5 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 rounded">Ativo</span>
                    </div>
                </button>

                <button
                    onClick={() => {
                        setImportType('csv');
                        setPreview([]);
                        setError(null);
                    }}
                    className={`p-4 rounded-xl border transition-all text-left flex flex-col gap-3 ${importType === 'csv'
                        ? 'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800 ring-1 ring-blue-500'
                        : 'bg-white border-zinc-200 dark:bg-zinc-900 dark:border-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700'
                        }`}
                >
                    <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${importType === 'csv' ? 'bg-blue-500 text-white' : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-500'}`}>
                        <TableCellsIcon className="w-6 h-6" />
                    </div>
                    <div>
                        <h3 className="text-sm font-bold text-zinc-900 dark:text-white">CSV / Excel</h3>
                        <p className="text-xs text-zinc-500 dark:text-zinc-400">Planilhas padrão</p>
                    </div>
                    <div className="mt-auto">
                        <span className="text-[10px] font-bold uppercase px-1.5 py-0.5 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 rounded">Ativo</span>
                    </div>
                </button>

                <button
                    disabled
                    className="p-4 rounded-xl border bg-zinc-50/50 dark:bg-zinc-900/50 border-zinc-200 dark:border-zinc-800 opacity-60 cursor-not-allowed text-left flex flex-col gap-3"
                >
                    <div className="w-10 h-10 rounded-lg flex items-center justify-center bg-zinc-100 dark:bg-zinc-800 text-zinc-400">
                        <CpuChipIcon className="w-6 h-6" />
                    </div>
                    <div>
                        <h3 className="text-sm font-bold text-zinc-400">Typebot</h3>
                        <p className="text-xs text-zinc-400">Integração direta</p>
                    </div>
                    <div className="mt-auto">
                        <span className="text-[10px] font-bold uppercase px-1.5 py-0.5 bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-500 rounded">Em breve</span>
                    </div>
                </button>

                <button
                    disabled
                    className="p-4 rounded-xl border bg-zinc-50/50 dark:bg-zinc-900/50 border-zinc-200 dark:border-zinc-800 opacity-60 cursor-not-allowed text-left flex flex-col gap-3"
                >
                    <div className="w-10 h-10 rounded-lg flex items-center justify-center bg-zinc-100 dark:bg-zinc-800 text-zinc-400">
                        <CommandLineIcon className="w-6 h-6" />
                    </div>
                    <div>
                        <h3 className="text-sm font-bold text-zinc-400">API / Webhook</h3>
                        <p className="text-xs text-zinc-400">Endpoint externo</p>
                    </div>
                    <div className="mt-auto">
                        <span className="text-[10px] font-bold uppercase px-1.5 py-0.5 bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-500 rounded">Em breve</span>
                    </div>
                </button>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Config Side */}
                <div className="lg:col-span-1 space-y-6">
                    <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 shadow-sm">
                        <h2 className="text-sm font-semibold text-zinc-900 dark:text-white mb-4 flex items-center gap-2">
                            <InformationCircleIcon className="w-4 h-4 text-blue-500" />
                            Destino dos Leads
                        </h2>

                        <div className="space-y-4">
                            <div>
                                <label className="block text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider mb-1.5">
                                    Campanha
                                </label>
                                <select
                                    value={selectedCampaign}
                                    onChange={(e) => {
                                        setSelectedCampaign(e.target.value);
                                        const camp = campaigns.find(c => c.id === e.target.value);
                                        if (camp?.customer_id) setSelectedCustomer(camp.customer_id);
                                    }}
                                    className="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
                                >
                                    <option value="">Nenhuma</option>
                                    {campaigns.map(c => (
                                        <option key={c.id} value={c.id}>{c.name}</option>
                                    ))}
                                </select>
                                {campaignIdFromUrl && (
                                    <p className="mt-1.5 text-[10px] text-blue-600 dark:text-blue-400 font-medium">
                                        * Campanha pré-selecionada via contexto
                                    </p>
                                )}
                            </div>

                            <div>
                                <label className="block text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider mb-1.5">
                                    Cliente Vinculado
                                </label>
                                <select
                                    value={selectedCustomer}
                                    onChange={(e) => setSelectedCustomer(e.target.value)}
                                    className="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
                                >
                                    <option value="">Nenhum (Geral)</option>
                                    {customers.map(c => (
                                        <option key={c.id} value={c.id}>{c.name}</option>
                                    ))}
                                </select>
                            </div>
                        </div>
                    </div>

                    <div className="bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-100 dark:border-blue-800/30 p-4">
                        <h3 className="text-xs font-bold text-blue-700 dark:text-blue-400 uppercase mb-2">Formato JSON Esperado</h3>
                        <pre className="text-[10px] text-blue-600 dark:text-blue-300 overflow-x-auto">
                            {`[
  {
    "name": "João Silva",
    "email": "joao@email.com",
    "phone": "11999999999",
    "source": "facebook",
    "tags": ["lead-quente"]
  }
]`}
                        </pre>
                    </div>
                </div>

                {/* Editor Side */}
                <div className="lg:col-span-2 space-y-6">
                    {importType === 'json' ? (
                        <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 shadow-sm overflow-hidden">
                            <div className="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800 flex items-center justify-between bg-zinc-50/50 dark:bg-zinc-800/50">
                                <div className="flex items-center gap-2">
                                    <DocumentTextIcon className="w-5 h-5 text-zinc-400" />
                                    <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Conteúdo JSON</span>
                                </div>
                                {error && (
                                    <span className="text-xs text-red-500 flex items-center gap-1">
                                        <XCircleIcon className="w-4 h-4" />
                                        {error}
                                    </span>
                                )}
                                {!error && preview.length > 0 && (
                                    <span className="text-xs text-green-500 flex items-center gap-1">
                                        <CheckCircleIcon className="w-4 h-4" />
                                        JSON Válido
                                    </span>
                                )}
                            </div>
                            <textarea
                                value={jsonContent}
                                onChange={handleJsonChange}
                                placeholder="Cole seu JSON aqui..."
                                className="w-full h-80 p-4 font-mono text-sm bg-transparent border-none focus:ring-0 resize-none text-zinc-800 dark:text-zinc-200"
                            />
                            <div className="px-6 py-4 bg-zinc-50 dark:bg-zinc-800/50 border-t border-zinc-200 dark:border-zinc-800 flex justify-end">
                                <button
                                    onClick={handleImport}
                                    disabled={importing || !!error || !jsonContent.trim()}
                                    className="inline-flex items-center gap-2 px-6 py-2.5 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-lg font-semibold text-sm hover:opacity-90 disabled:opacity-50 transition-all shadow-sm"
                                >
                                    {importing ? (
                                        <ArrowPathIcon className="w-4 h-4 animate-spin" />
                                    ) : (
                                        <ArrowUpTrayIcon className="w-4 h-4" />
                                    )}
                                    {importing ? 'Importando...' : 'Iniciar Importação'}
                                </button>
                            </div>
                        </div>
                    ) : importType === 'csv' ? (
                        <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 shadow-sm overflow-hidden">
                            <div className="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800 flex items-center justify-between bg-zinc-50/50 dark:bg-zinc-800/50">
                                <div className="flex items-center gap-2">
                                    <TableCellsIcon className="w-5 h-5 text-zinc-400" />
                                    <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Upload de Arquivo CSV</span>
                                </div>
                                {error && (
                                    <span className="text-xs text-red-500 flex items-center gap-1">
                                        <XCircleIcon className="w-4 h-4" />
                                        {error}
                                    </span>
                                )}
                                {!error && csvFile && (
                                    <span className="text-xs text-green-500 flex items-center gap-1">
                                        <CheckCircleIcon className="w-4 h-4" />
                                        Arquivo Selecionado
                                    </span>
                                )}
                            </div>

                            <div className="p-8">
                                <input
                                    type="file"
                                    ref={fileInputRef}
                                    onChange={handleFileChange}
                                    accept=".csv"
                                    className="hidden"
                                />

                                <div
                                    onClick={() => fileInputRef.current?.click()}
                                    className={`border-2 border-dashed rounded-2xl p-12 text-center cursor-pointer transition-all ${csvFile
                                        ? 'border-green-200 bg-green-50/30 dark:border-green-900/30 dark:bg-green-900/10'
                                        : 'border-zinc-200 hover:border-blue-400 dark:border-zinc-800 dark:hover:border-blue-500 bg-zinc-50/50 dark:bg-zinc-800/30'
                                        }`}
                                >
                                    <div className="w-16 h-16 bg-white dark:bg-zinc-800 rounded-2xl shadow-sm flex items-center justify-center mx-auto mb-4">
                                        <CloudArrowUpIcon className={`w-8 h-8 ${csvFile ? 'text-green-500' : 'text-zinc-400'}`} />
                                    </div>
                                    {csvFile ? (
                                        <div>
                                            <h4 className="text-sm font-bold text-zinc-900 dark:text-white">{csvFile.name}</h4>
                                            <p className="text-xs text-zinc-500 mt-1">{(csvFile.size / 1024).toFixed(2)} KB</p>
                                            <button
                                                onClick={(e) => {
                                                    e.stopPropagation();
                                                    setCsvFile(null);
                                                    setPreview([]);
                                                }}
                                                className="mt-4 text-xs font-semibold text-red-500 hover:text-red-600"
                                            >
                                                Remover arquivo
                                            </button>
                                        </div>
                                    ) : (
                                        <div>
                                            <h4 className="text-sm font-bold text-zinc-900 dark:text-white">Clique para selecionar ou arraste o arquivo</h4>
                                            <p className="text-xs text-zinc-500 mt-1">Apenas arquivos .csv são aceitos</p>
                                        </div>
                                    )}
                                </div>

                                <div className="mt-6 bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-100 dark:border-blue-800/30">
                                    <h5 className="text-xs font-bold text-blue-700 dark:text-blue-400 uppercase mb-2">Importação Inteligente</h5>
                                    <p className="text-xs text-blue-600 dark:text-blue-300 leading-relaxed">
                                        Nosso sistema detecta automaticamente os cabeçalhos. Você pode usar nomes como <code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">Nome</code>, <code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">E-mail</code>, <code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">Celular</code> ou <code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">Telefone</code>.
                                        Linhas de título extras no topo do arquivo também são ignoradas automaticamente.
                                    </p>
                                </div>
                            </div>

                            <div className="px-6 py-4 bg-zinc-50 dark:bg-zinc-800/50 border-t border-zinc-200 dark:border-zinc-800 flex justify-end">
                                <button
                                    onClick={handleImport}
                                    disabled={importing || !!error || !csvFile}
                                    className="inline-flex items-center gap-2 px-6 py-2.5 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-lg font-semibold text-sm hover:opacity-90 disabled:opacity-50 transition-all shadow-sm"
                                >
                                    {importing ? (
                                        <ArrowPathIcon className="w-4 h-4 animate-spin" />
                                    ) : (
                                        <ArrowUpTrayIcon className="w-4 h-4" />
                                    )}
                                    {importing ? 'Importando...' : 'Iniciar Importação'}
                                </button>
                            </div>
                        </div>
                    ) : (
                        <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-12 text-center">
                            <div className="w-16 h-16 bg-zinc-100 dark:bg-zinc-800 rounded-full flex items-center justify-center mx-auto mb-4">
                                <ArrowPathIcon className="w-8 h-8 text-zinc-400" />
                            </div>
                            <h3 className="text-lg font-bold text-zinc-900 dark:text-white">Em Desenvolvimento</h3>
                            <p className="text-zinc-500 dark:text-zinc-400 max-w-xs mx-auto mt-2">
                                Este método de importação estará disponível em breve. Por enquanto, utilize o formato JSON.
                            </p>
                        </div>
                    )}

                    {/* Preview */}
                    {(importType === 'json' || importType === 'csv') && preview.length > 0 && (
                        <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 shadow-sm">
                            <h3 className="text-sm font-semibold text-zinc-900 dark:text-white mb-4">Pré-visualização (Primeiros 5)</h3>
                            <div className="overflow-x-auto">
                                <table className="w-full text-left text-sm">
                                    <thead>
                                        <tr className="text-zinc-500 border-b border-zinc-100 dark:border-zinc-800">
                                            <th className="pb-2 font-medium">Nome</th>
                                            <th className="pb-2 font-medium">Email</th>
                                            <th className="pb-2 font-medium">Telefone</th>
                                            <th className="pb-2 font-medium">Origem</th>
                                        </tr>
                                    </thead>
                                    <tbody className="divide-y divide-zinc-50 dark:divide-zinc-800">
                                        {preview.map((lead, i) => (
                                            <tr key={i}>
                                                <td className="py-2 text-zinc-900 dark:text-zinc-100">{lead.name || '-'}</td>
                                                <td className="py-2 text-zinc-600 dark:text-zinc-400">{lead.email || '-'}</td>
                                                <td className="py-2 text-zinc-600 dark:text-zinc-400">{lead.phone || '-'}</td>
                                                <td className="py-2">
                                                    <span className="px-2 py-0.5 bg-zinc-100 dark:bg-zinc-800 rounded text-[10px] uppercase font-bold text-zinc-500">
                                                        {lead.source || 'manual'}
                                                    </span>
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}

export default function ImportLeadsPage() {
    return (
        <Suspense fallback={
            <div className="flex items-center justify-center h-screen">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
            </div>
        }>
            <ImportLeadsContent />
        </Suspense>
    );
}