const { useState, useEffect, useMemo } = React;

window.AdminSaaS = function({ activeViewTab = 'saas_clients', setActiveClientId, setTab, refreshData }) {
    const [saasData, setSaasData] = useState({ clients: [], invoices: [], masterGeminiApiKey: '' });
    const [selectedClient, setSelectedClient] = useState(null);
    const [showModuleModal, setShowModuleModal] = useState(false);
    const [showInvoiceModal, setShowInvoiceModal] = useState(false);
    
    // Modal de Nueva / Editar Empresa
    const [showCompanyModal, setShowCompanyModal] = useState(false);
    const [editingCompany, setEditingCompany] = useState(null);

    const [masterKeyInput, setMasterKeyInput] = useState('');
    const [isSaving, setIsSaving] = useState(false);
    const [showKey, setShowKey] = useState(false);
    const [saveFeedback, setSaveFeedback] = useState('');

    // Estados Pasarela WhatsApp Meta Cloud, Chatwoot & SMTP Email
    const [waToken, setWaToken] = useState('');
    const [waPhoneId, setWaPhoneId] = useState('');
    const [waWabaId, setWaWabaId] = useState('');
    const [waEnabled, setWaEnabled] = useState(true);

    // Chatwoot & AI Copilot Integración Omnicanal
    const [chatwootUrl, setChatwootUrl] = useState('');
    const [chatwootAccountId, setChatwootAccountId] = useState(1);
    const [chatwootInboxId, setChatwootInboxId] = useState(1);
    const [chatwootApiToken, setChatwootApiToken] = useState('');
    const [useChatwootForWhatsapp, setUseChatwootForWhatsapp] = useState(false);
    const [aiAutoReplyEnabled, setAiAutoReplyEnabled] = useState(true);
    const [testingChatwoot, setTestingChatwoot] = useState(false);

    const [smtpHost, setSmtpHost] = useState('');
    const [smtpPort, setSmtpPort] = useState(587);
    const [smtpUser, setSmtpUser] = useState('');
    const [smtpPass, setSmtpPass] = useState('');
    const [smtpFromEmail, setSmtpFromEmail] = useState('');
    const [smtpFromName, setSmtpFromName] = useState('Shift ERP');
    const [smtpSecure, setSmtpSecure] = useState('tls');
    const [emailEnabled, setEmailEnabled] = useState(true);

    const [gatewayFeedback, setGatewayFeedback] = useState('');

    // Búsqueda y Filtros
    const [clientSearch, setClientSearch] = useState('');
    const [clientFilter, setClientFilter] = useState('all'); // all, active, suspended, demo, paid
    const [invoiceSearch, setInvoiceSearch] = useState('');
    const [invoiceFilter, setInvoiceFilter] = useState('all'); // all, unpaid, paid, overdue

    // Estados de prueba y sincronización
    const [testPhoneInput, setTestPhoneInput] = useState('');
    const [testEmailInput, setTestEmailInput] = useState('');
    const [testingWa, setTestingWa] = useState(false);
    const [testingEmail, setTestingEmail] = useState(false);
    const [billingSyncing, setBillingSyncing] = useState(false);
    const [notifyingInvId, setNotifyingInvId] = useState(null);

    const loadMasterData = async () => {
        const res = await window.apiCall('get_master_dashboard_data', {}, 0);
        if (res && res.success) {
            setSaasData(res);
            setMasterKeyInput(res.masterGeminiApiKey || '');
            if (res.masterWhatsApp) {
                setWaToken(res.masterWhatsApp.access_token || '');
                setWaPhoneId(res.masterWhatsApp.phone_number_id || '');
                setWaWabaId(res.masterWhatsApp.waba_id || '');
                setWaEnabled(res.masterWhatsApp.enabled !== false);
            }
            if (res.masterChatwoot) {
                setChatwootUrl(res.masterChatwoot.chatwoot_url || '');
                setChatwootAccountId(res.masterChatwoot.chatwoot_account_id || 1);
                setChatwootInboxId(res.masterChatwoot.chatwoot_inbox_id || 1);
                setChatwootApiToken(res.masterChatwoot.chatwoot_api_token || '');
                setUseChatwootForWhatsapp(res.masterChatwoot.use_chatwoot_for_whatsapp !== 0);
                setAiAutoReplyEnabled(res.masterChatwoot.ai_auto_reply_enabled !== 0);
            }
            if (res.masterEmail) {
                setSmtpHost(res.masterEmail.smtp_host || '');
                setSmtpPort(res.masterEmail.smtp_port || 587);
                setSmtpUser(res.masterEmail.smtp_user || '');
                setSmtpPass(res.masterEmail.smtp_pass || '');
                setSmtpFromEmail(res.masterEmail.smtp_from_email || '');
                setSmtpFromName(res.masterEmail.smtp_from_name || 'Shift ERP');
                setSmtpSecure(res.masterEmail.smtp_secure || 'tls');
                setEmailEnabled(res.masterEmail.enabled !== false);
            }
        }
    };

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

    const metrics = useMemo(() => {
        const totalClients = saasData.clients.length;
        const activeClients = saasData.clients.filter(c => c.service_status === 'active').length;
        const suspendedClients = saasData.clients.filter(c => c.service_status === 'suspended').length;
        const demoClients = saasData.clients.filter(c => c.account_type === 'demo').length;
        const paidClients = saasData.clients.filter(c => c.account_type === 'subscription').length;
        
        let mrrUSD = 0;
        saasData.clients.forEach(c => {
            if (c.service_status === 'active') {
                mrrUSD += parseFloat(c.monthly_fee || 0);
            }
        });

        const today = new Date().toISOString().split('T')[0];
        let totalInvoicedUSD = 0;
        let totalCollectedUSD = 0;
        let totalPendingUSD = 0;

        const overdueInvoices = saasData.invoices.filter(inv => {
            const amt = parseFloat(inv.amount || 0);
            totalInvoicedUSD += amt;
            if (inv.status === 'paid') {
                totalCollectedUSD += amt;
            } else {
                totalPendingUSD += amt;
            }

            if (inv.status !== 'unpaid') return false;
            const diffDays = Math.floor((new Date(today) - new Date(inv.due_date)) / (1000 * 60 * 60 * 24));
            return diffDays >= 5;
        });

        return { 
            totalClients, 
            activeClients, 
            suspendedClients, 
            demoClients,
            paidClients,
            mrrUSD, 
            overdueInvoices, 
            totalInvoicedUSD, 
            totalCollectedUSD, 
            totalPendingUSD 
        };
    }, [saasData]);

    const filteredClients = useMemo(() => {
        return (saasData.clients || []).filter(c => {
            if (clientFilter === 'active' && c.service_status !== 'active') return false;
            if (clientFilter === 'suspended' && c.service_status !== 'suspended') return false;
            if (clientFilter === 'demo' && c.account_type !== 'demo') return false;
            if (clientFilter === 'paid' && c.account_type !== 'subscription') return false;

            if (clientSearch.trim()) {
                const q = clientSearch.toLowerCase().trim();
                const nameMatch = (c.company_name || '').toLowerCase().includes(q);
                const subMatch = (c.shift_subdomain || '').toLowerCase().includes(q);
                const contactMatch = (c.contact_name || '').toLowerCase().includes(q);
                const emailMatch = (c.contact_email || '').toLowerCase().includes(q);
                const rucMatch = (c.ruc_number || '').toLowerCase().includes(q);
                return nameMatch || subMatch || contactMatch || emailMatch || rucMatch;
            }
            return true;
        });
    }, [saasData.clients, clientFilter, clientSearch]);

    const filteredInvoices = useMemo(() => {
        const today = new Date().toISOString().split('T')[0];
        return (saasData.invoices || []).filter(inv => {
            if (invoiceFilter === 'paid' && inv.status !== 'paid') return false;
            if (invoiceFilter === 'unpaid' && inv.status !== 'unpaid') return false;
            if (invoiceFilter === 'overdue') {
                if (inv.status !== 'unpaid') return false;
                const diffDays = Math.floor((new Date(today) - new Date(inv.due_date)) / (1000 * 60 * 60 * 24));
                if (diffDays < 5) return false;
            }

            if (invoiceSearch.trim()) {
                const q = invoiceSearch.toLowerCase().trim();
                const numMatch = (inv.invoice_number || '').toLowerCase().includes(q);
                const compMatch = (inv.company_name || '').toLowerCase().includes(q);
                return numMatch || compMatch;
            }
            return true;
        });
    }, [saasData.invoices, invoiceFilter, invoiceSearch]);

    const handleEnterPortal = (client) => {
        if (setActiveClientId) {
            setActiveClientId(Number(client.id));
            if (setTab) setTab('logs');
        }
    };

    const handleExportClientsCSV = () => {
        const headers = ["ID", "Empresa", "Subdominio", "Tipo Cuenta", "Estado Servicio", "Tarifa Mensual", "Moneda", "Día Cobro", "Pagado Hasta", "Contacto", "Email", "Teléfono", "RUC"];
        const rows = (saasData.clients || []).map(c => [
            c.id,
            `"${c.company_name || ''}"`,
            `${c.shift_subdomain || ''}.shift.marcasnicaragua.com`,
            c.account_type || 'demo',
            c.service_status || 'active',
            c.monthly_fee || 0,
            c.currency || 'USD',
            c.billing_day || 1,
            c.service_paid_until || '',
            `"${c.contact_name || ''}"`,
            c.contact_email || '',
            c.contact_phone || '',
            c.ruc_number || ''
        ]);

        if (window.exportToCSV) {
            window.exportToCSV(`Directorio_SaaS_Shift_${new Date().toISOString().split('T')[0]}`, headers, rows);
        }
    };

    const handleTriggerBillingCycle = async () => {
        setBillingSyncing(true);
        try {
            const res = await window.apiCall('trigger_saas_billing_cycle', {}, 0);
            if (res && res.success) {
                alert(`✅ Ciclo de facturación sincronizado con éxito.\n• Facturas nuevas generadas: ${res.invoices_generated || 0}\n• Empresas suspendidas por mora (>5 días): ${res.clients_suspended || 0}`);
                await loadMasterData();
            } else {
                alert("Error al sincronizar ciclo: " + (res?.error || ""));
            }
        } catch (err) {
            alert("Error de conexión: " + err.message);
        } finally {
            setBillingSyncing(false);
        }
    };

    const handleSendInvoiceNotification = async (inv, channel = 'all') => {
        setNotifyingInvId(inv.id);
        try {
            const res = await window.apiCall('send_invoice_notification', { invoice_id: inv.id, channel }, 0);
            if (res && res.success) {
                let details = [];
                if (res.whatsapp) {
                    details.push(res.whatsapp.success ? '✅ WhatsApp enviado' : '⚠️ WhatsApp: ' + (res.whatsapp.error || 'Fallo'));
                }
                if (res.email) {
                    details.push(res.email.success ? '✅ Email enviado' : '⚠️ Email: ' + (res.email.error || 'Fallo'));
                }
                alert(`Notificación de factura ${inv.invoice_number}:\n` + (details.join('\n') || 'Procesado'));
            } else {
                alert("Error al enviar notificación: " + (res?.error || "Fallo"));
            }
        } catch (err) {
            alert("Error de conexión: " + err.message);
        } finally {
            setNotifyingInvId(null);
        }
    };

    const handleSaveMasterKey = async () => {
        if (!masterKeyInput.trim()) return alert("Ingresa la API Key Maestra de Google Gemini.");
        setIsSaving(true);
        setSaveFeedback('');
        try {
            const res = await window.apiCall('save_master_gemini_key', { gemini_api_key: masterKeyInput.trim() }, 0);
            if (res && res.success) {
                setSaveFeedback('API Key Maestra guardada correctamente en el servidor.');
                await loadMasterData();
            } else {
                setSaveFeedback('Error: ' + (res?.error || 'No se pudo guardar'));
            }
        } catch (err) {
            setSaveFeedback('Error de conexión: ' + err.message);
        } finally {
            setIsSaving(false);
        }
    };

    const handleSaveMasterGateways = async () => {
        setIsSaving(true);
        setGatewayFeedback('');
        try {
            const res = await window.apiCall('save_master_notification_gateways', {
                whatsapp_access_token: waToken.trim(),
                whatsapp_phone_number_id: waPhoneId.trim(),
                whatsapp_waba_id: waWabaId.trim(),
                whatsapp_enabled: waEnabled ? 1 : 0,
                chatwoot_url: chatwootUrl.trim(),
                chatwoot_account_id: parseInt(chatwootAccountId) || 1,
                chatwoot_inbox_id: parseInt(chatwootInboxId) || 1,
                chatwoot_api_token: chatwootApiToken.trim(),
                use_chatwoot_for_whatsapp: useChatwootForWhatsapp ? 1 : 0,
                ai_auto_reply_enabled: aiAutoReplyEnabled ? 1 : 0,
                smtp_host: smtpHost.trim(),
                smtp_port: parseInt(smtpPort) || 587,
                smtp_user: smtpUser.trim(),
                smtp_pass: smtpPass.trim(),
                smtp_from_email: smtpFromEmail.trim(),
                smtp_from_name: smtpFromName.trim(),
                smtp_secure: smtpSecure,
                email_enabled: emailEnabled ? 1 : 0
            }, 0);

            if (res && res.success) {
                setGatewayFeedback('Pasarelas de WhatsApp Meta Cloud, Chatwoot y Email guardadas exitosamente.');
                await loadMasterData();
                setTimeout(() => setGatewayFeedback(''), 4000);
            } else {
                setGatewayFeedback('Error: ' + (res?.error || 'No se pudo guardar'));
            }
        } catch (err) {
            setGatewayFeedback('Error de red: ' + err.message);
        } finally {
            setIsSaving(false);
        }
    };

    const handleTestChatwoot = async () => {
        const phone = testPhoneInput.trim() || '87289931';
        setTestingChatwoot(true);
        setGatewayFeedback('');
        try {
            const res = await window.apiCall('test_chatwoot_connection', {
                chatwoot_url: chatwootUrl,
                chatwoot_account_id: chatwootAccountId,
                chatwoot_inbox_id: chatwootInboxId,
                chatwoot_api_token: chatwootApiToken,
                phone: phone
            }, 0);
            if (res && res.success) {
                setGatewayFeedback(`¡Conexión con Chatwoot exitosa! Mensaje enviado al inbox (${res.via || 'Chatwoot'}).`);
            } else {
                setGatewayFeedback(`Error en Chatwoot: ${res?.error || 'Fallo de envío'}`);
            }
        } catch (err) {
            setGatewayFeedback('Error de conexión: ' + err.message);
        } finally {
            setTestingChatwoot(false);
        }
    };

    const handleTestWhatsApp = async (useTemplateMode = false) => {
        const phone = testPhoneInput.trim();
        if (!phone) return alert("Ingresa un número de teléfono (ej. 87289931) para enviar el WhatsApp de prueba.");
        setTestingWa(true);
        setGatewayFeedback('');
        try {
            const res = await window.apiCall('test_whatsapp_gateway', { phone, use_template: useTemplateMode }, 0);
            if (res && res.success) {
                setGatewayFeedback(`¡Mensaje de prueba de WhatsApp enviado con éxito a +${res.recipient || phone}! ${res.notice ? '(' + res.notice + ')' : ''}`);
            } else {
                setGatewayFeedback(`Error en prueba de WhatsApp: ${res?.error || 'Fallo de entrega'}. Detalle: ${JSON.stringify(res?.details || '')}`);
            }
        } catch (err) {
            setGatewayFeedback('Error de conexión: ' + err.message);
        } finally {
            setTestingWa(false);
        }
    };

    const handleTestEmail = async () => {
        const email = testEmailInput.trim();
        if (!email) return alert("Ingresa un correo electrónico para enviar el email de prueba.");
        setTestingEmail(true);
        setGatewayFeedback('');
        try {
            const res = await window.apiCall('test_email_gateway', { email }, 0);
            if (res && res.success) {
                setGatewayFeedback(`¡Correo electrónico de prueba enviado con éxito a ${res.recipient || email}!`);
            } else {
                setGatewayFeedback(`Error al enviar correo de prueba: ${res?.error || 'Fallo de servidor SMTP'}`);
            }
        } catch (err) {
            setGatewayFeedback('Error de conexión: ' + err.message);
        } finally {
            setTestingEmail(false);
        }
    };

    const handleOpenNewCompany = () => {
        setEditingCompany(null);
        setShowCompanyModal(true);
    };

    const handleOpenEditCompany = (cl) => {
        setEditingCompany(cl);
        setShowCompanyModal(true);
    };

    const handleSaveCompanySubmit = async (e) => {
        e.preventDefault();
        const fd = new FormData(e.target);
        const payload = {
            id: editingCompany ? editingCompany.id : null,
            company_name: fd.get('company_name'),
            shift_subdomain: fd.get('shift_subdomain'),
            contact_name: fd.get('contact_name'),
            contact_email: fd.get('contact_email'),
            contact_phone: fd.get('contact_phone'),
            admin_password: fd.get('admin_password'),
            tax_regime: fd.get('tax_regime'),
            ruc_number: fd.get('ruc_number'),
            owner_name: fd.get('owner_name'),
            legal_rep_id: fd.get('legal_rep_id'),
            business_address: fd.get('business_address'),
            municipality: fd.get('municipality'),
            module_shift: 1
        };

        setIsSaving(true);
        const res = await window.apiCall('save_master_client', payload, 0);
        setIsSaving(false);
        if (res && res.success) {
            setShowCompanyModal(false);
            await loadMasterData();
            if (refreshData) await refreshData(0);
        } else {
            alert("Error al guardar empresa: " + (res?.error || ""));
        }
    };

    const handleOpenModules = (cl) => {
        setSelectedClient(cl);
        setShowModuleModal(true);
    };

    const handleSaveModulesAndBilling = async (e) => {
        e.preventDefault();
        const fd = new FormData(e.target);
        const payload = {
            id: selectedClient.id,
            account_type: fd.get('account_type'),
            monthly_fee: fd.get('monthly_fee'),
            currency: fd.get('currency'),
            billing_day: fd.get('billing_day'),
            service_status: fd.get('service_status'),
            service_paid_until: fd.get('service_paid_until'),
            module_asistencia: fd.get('module_asistencia') ? 1 : 0,
            module_personal: fd.get('module_personal') ? 1 : 0,
            module_contratos: fd.get('module_contratos') ? 1 : 0,
            module_planilla: fd.get('module_planilla') ? 1 : 0,
            module_vacaciones: fd.get('module_vacaciones') ? 1 : 0,
            module_ausencias: fd.get('module_ausencias') ? 1 : 0,
            module_ai: fd.get('module_ai') ? 1 : 0,
            module_facial: fd.get('module_facial') ? 1 : 0,
            module_whatsapp: fd.get('module_whatsapp') ? 1 : 0,
            module_email: fd.get('module_email') ? 1 : 0
        };

        setIsSaving(true);
        const res = await window.apiCall('save_client_modules_and_billing', payload, 0);
        setIsSaving(false);
        if (res && res.success) {
            setShowModuleModal(false);
            await loadMasterData();
            if (refreshData) await refreshData(0);
        }
    };

    const handleToggleSuspension = async (client, currentStatus) => {
        const nextStatus = currentStatus === 'suspended' ? 'active' : 'suspended';
        const msg = nextStatus === 'suspended' 
            ? `¿Deseas suspender el acceso al portal de ${client.company_name}? Sus colaboradores no podrán registrar asistencia.` 
            : `¿Deseas reactivar el acceso al portal de ${client.company_name}?`;
        if (!confirm(msg)) return;

        const res = await window.apiCall('toggle_service_suspension', { client_id: client.id, status: nextStatus }, 0);
        if (res && res.success) {
            await loadMasterData();
            if (refreshData) await refreshData(0);
        }
    };

    const handleMarkPaid = async (inv) => {
        const ref = prompt("Referencia bancaria o método de pago (ej. Transferencia BAC #9482):", "Transferencia BAC");
        if (ref === null) return;

        const res = await window.apiCall('mark_invoice_paid', {
            invoice_id: inv.id,
            payment_method: 'Transferencia Bancaria',
            payment_reference: ref
        }, 0);

        if (res && res.success) {
            alert(`Factura ${inv.invoice_number} marcada como PAGADA.`);
            await loadMasterData();
        }
    };

    const handleCreateInvoice = async (e) => {
        e.preventDefault();
        const fd = new FormData(e.target);
        const clId = fd.get('client_id');
        const cl = saasData.clients.find(c => Number(c.id) === Number(clId));

        const payload = {
            client_id: clId,
            company_name: cl ? cl.company_name : 'Empresa Cliente',
            amount: fd.get('amount'),
            currency: fd.get('currency'),
            issue_date: fd.get('issue_date'),
            due_date: fd.get('due_date'),
            period_start: fd.get('period_start'),
            period_end: fd.get('period_end'),
            status: 'unpaid'
        };

        setIsSaving(true);
        const res = await window.apiCall('create_client_invoice', payload, 0);
        setIsSaving(false);
        if (res && res.success) {
            setShowInvoiceModal(false);
            await loadMasterData();
        }
    };

    return (
        <div className="space-y-6 fade-in font-sans">
            {/* ENCABEZADO PRINCIPAL */}
            <div className="bg-white p-5 sm:p-6 rounded-2xl shadow-xs border border-slate-200/80 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                    <div className="flex items-center gap-2.5">
                        <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse"></span>
                        <h2 className="text-xl font-bold text-slate-900 tracking-tight">Panel de Control SaaS</h2>
                    </div>
                    <p className="text-xs text-slate-500 font-medium mt-1">
                        Gestión centralizada de empresas, suscripciones mensuales y pasarelas de notificación
                    </p>
                </div>
                <div className="flex items-center gap-3">
                    <div className="px-3.5 py-2 bg-slate-100 border border-slate-200 rounded-xl text-xs font-bold text-slate-900 shadow-2xs">
                        MRR Activo: <strong className="font-bold text-emerald-700">${metrics.mrrUSD.toLocaleString('en-US', { minimumFractionDigits: 2 })} USD</strong>
                    </div>
                </div>
            </div>

            {/* ALERTA DE MORAS (> 5 DÍAS) */}
            {metrics.overdueInvoices.length > 0 && (
                <div className="bg-rose-50 border border-rose-200/90 text-slate-900 p-5 rounded-2xl shadow-xs space-y-3">
                    <div className="flex items-center gap-3">
                        <div className="w-9 h-9 bg-rose-600 text-white rounded-xl flex items-center justify-center font-bold flex-shrink-0 shadow-xs">
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                        </div>
                        <div className="flex-1">
                            <h3 className="font-bold text-sm text-rose-900">Atención: {metrics.overdueInvoices.length} factura(s) con más de 5 días de mora</h3>
                            <p className="text-xs text-rose-700 font-medium mt-0.5">El sistema ha aplicado suspensión preventiva. Registra el pago para reactivación inmediata.</p>
                        </div>
                    </div>
                    <div className="flex flex-wrap gap-2 pt-1">
                        {metrics.overdueInvoices.map(inv => (
                            <div key={inv.id} className="bg-white border border-rose-200 px-3.5 py-2 rounded-xl text-xs font-medium text-slate-800 flex items-center gap-3 shadow-2xs">
                                <span>{inv.company_name} ({inv.currency} ${parseFloat(inv.amount).toFixed(2)})</span>
                                <button onClick={() => handleMarkPaid(inv)} className="px-2.5 py-1 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-[10px] font-bold uppercase transition-all cursor-pointer">
                                    Marcar Pagado
                                </button>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* SECCIÓN 1: EMPRESAS & SUSCRIPCIONES */}
            {activeViewTab === 'saas_clients' && (
                <div className="space-y-6">
                    {/* TARJETAS KPI DE SUSCRIPCIÓN */}
                    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                        <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs">
                            <div className="flex items-center justify-between">
                                <span className="text-xs font-medium text-slate-400">Total Empresas</span>
                                <span className="p-1.5 bg-slate-100 rounded-lg text-slate-600"><svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></span>
                            </div>
                            <h3 className="text-2xl font-bold text-slate-900 mt-2">{metrics.totalClients}</h3>
                            <p className="text-[11px] text-slate-400 font-medium mt-0.5">{metrics.paidClients} de pago • {metrics.demoClients} demo</p>
                        </div>

                        <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs">
                            <div className="flex items-center justify-between">
                                <span className="text-xs font-medium text-slate-400">Empresas Activas</span>
                                <span className="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
                            </div>
                            <h3 className="text-2xl font-bold text-emerald-600 mt-2">{metrics.activeClients}</h3>
                            <p className="text-[11px] text-emerald-700/80 font-medium mt-0.5">Operando normalmente</p>
                        </div>

                        <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs">
                            <div className="flex items-center justify-between">
                                <span className="text-xs font-medium text-slate-400">Suspendidas</span>
                                <span className="w-2.5 h-2.5 rounded-full bg-rose-500"></span>
                            </div>
                            <h3 className="text-2xl font-bold text-rose-600 mt-2">{metrics.suspendedClients}</h3>
                            <p className="text-[11px] text-rose-700/80 font-medium mt-0.5">Por mora o solicitud</p>
                        </div>

                        <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs">
                            <div className="flex items-center justify-between">
                                <span className="text-xs font-medium text-slate-400">Facturación Proyectada</span>
                                <span className="p-1.5 bg-indigo-50 rounded-lg text-indigo-600"><svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span>
                            </div>
                            <h3 className="text-2xl font-bold text-slate-900 mt-2">${metrics.mrrUSD.toFixed(2)} <span className="text-xs font-medium text-slate-400">USD</span></h3>
                            <p className="text-[11px] text-slate-400 font-medium mt-0.5">Recurrente mensual</p>
                        </div>
                    </div>

                    {/* BARRA DE BÚSQUEDA Y ACCIONES PRINCIPALES */}
                    <div className="bg-white p-5 sm:p-6 rounded-2xl shadow-xs border border-slate-200/80 space-y-4">
                        <div className="flex flex-col lg:flex-row justify-between items-stretch lg:items-center gap-3">
                            <div className="relative flex-1">
                                <svg className="w-4 h-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                                <input 
                                    type="text"
                                    value={clientSearch}
                                    onChange={e => setClientSearch(e.target.value)}
                                    placeholder="Buscar empresa por nombre, subdominio, contacto o RUC..."
                                    className="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-800 placeholder-slate-400 outline-none focus:bg-white focus:border-indigo-400 transition-colors"
                                />
                            </div>

                            <div className="flex items-center gap-2 flex-wrap">
                                <button 
                                    onClick={handleTriggerBillingCycle}
                                    disabled={billingSyncing}
                                    className="px-3.5 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold rounded-xl text-xs tracking-normal border border-slate-200 flex items-center gap-2 active:scale-95 transition-all cursor-pointer"
                                    title="Ejecutar motor automático de facturación y control de moras"
                                >
                                    <svg className={`w-3.5 h-3.5 text-indigo-600 ${billingSyncing ? 'animate-spin' : ''}`} fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                                    <span>{billingSyncing ? "Sincronizando..." : "Sincronizar Cobros"}</span>
                                </button>

                                <button 
                                    onClick={handleExportClientsCSV}
                                    className="px-3.5 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold rounded-xl text-xs tracking-normal border border-slate-200 flex items-center gap-2 active:scale-95 transition-all cursor-pointer"
                                    title="Exportar directorio completo a CSV"
                                >
                                    <svg className="w-3.5 h-3.5 text-slate-500" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                    <span>Exportar CSV</span>
                                </button>

                                <button 
                                    onClick={handleOpenNewCompany}
                                    className="px-4 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl text-xs tracking-normal shadow-xs flex items-center gap-2 active:scale-95 transition-all cursor-pointer"
                                >
                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4"/></svg>
                                    <span>Nueva Empresa</span>
                                </button>
                            </div>
                        </div>

                        {/* PESTAÑAS DE FILTRO RÁPIDO */}
                        <div className="flex items-center gap-1.5 border-t border-slate-100 pt-3 overflow-x-auto no-scrollbar">
                            {[
                                { id: 'all', label: 'Todas las Empresas', count: metrics.totalClients },
                                { id: 'active', label: 'Activas', count: metrics.activeClients },
                                { id: 'suspended', label: 'Suspendidas', count: metrics.suspendedClients },
                                { id: 'demo', label: 'Modo Demo', count: metrics.demoClients },
                                { id: 'paid', label: 'Clientes de Pago', count: metrics.paidClients }
                            ].map(f => (
                                <button
                                    key={f.id}
                                    onClick={() => setClientFilter(f.id)}
                                    className={`px-3 py-1.5 rounded-lg text-xs font-semibold whitespace-nowrap transition-colors cursor-pointer ${
                                        clientFilter === f.id
                                            ? 'bg-slate-900 text-white shadow-2xs'
                                            : 'text-slate-500 hover:bg-slate-100 hover:text-slate-800'
                                    }`}
                                >
                                    {f.label} <span className={`text-[10px] ml-1 px-1.5 py-0.2 rounded-md ${clientFilter === f.id ? 'bg-white/20 text-white' : 'bg-slate-200/70 text-slate-600'}`}>{f.count}</span>
                                </button>
                            ))}
                        </div>

                        {/* LISTADO DE EMPRESAS REDISEÑADO */}
                        <div className="space-y-3 pt-1">
                            {filteredClients.length === 0 ? (
                                <div className="text-center py-12 bg-slate-50 rounded-xl border border-dashed border-slate-200">
                                    <p className="text-xs text-slate-500 font-medium">No se encontraron empresas con el criterio de búsqueda.</p>
                                </div>
                            ) : (
                                filteredClients.map(c => {
                                    const isSuspended = c.service_status === 'suspended';
                                    const isDemo = c.account_type === 'demo';
                                    const hasFacial = Boolean(c.module_facial);
                                    const hasWa = Boolean(c.module_whatsapp);
                                    const cleanPhone = (c.contact_phone || '').replace(/[^0-9]/g, '');

                                    return (
                                        <div 
                                            key={c.id} 
                                            className="p-5 rounded-2xl border border-slate-200/90 bg-white hover:border-slate-300 hover:shadow-xs transition-all flex flex-col xl:flex-row justify-between items-start xl:items-center gap-4"
                                        >
                                            {/* INFORMACIÓN DE LA EMPRESA */}
                                            <div className="space-y-2 flex-1 min-w-0">
                                                <div className="flex items-center gap-2 flex-wrap">
                                                    <div className="w-8 h-8 rounded-lg bg-slate-900 text-white font-bold text-xs flex items-center justify-center flex-shrink-0 shadow-2xs">
                                                        {(c.company_name || 'E')[0].toUpperCase()}
                                                    </div>
                                                    <h4 className="font-bold text-slate-900 text-sm">{c.company_name}</h4>
                                                    
                                                    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-semibold ${
                                                        isSuspended ? 'bg-rose-50 text-rose-700 border border-rose-200' : 'bg-emerald-50 text-emerald-700 border border-emerald-200'
                                                    }`}>
                                                        <span className={`w-1.5 h-1.5 rounded-full ${isSuspended ? 'bg-rose-500' : 'bg-emerald-500'}`}></span>
                                                        {isSuspended ? 'Suspendida' : 'Activa'}
                                                    </span>

                                                    <span className={`px-2 py-0.5 rounded-md text-[10px] font-medium ${
                                                        isDemo ? 'bg-purple-50 text-purple-700 border border-purple-200' : 'bg-blue-50 text-blue-700 border border-blue-200'
                                                    }`}>
                                                        {isDemo ? 'Demo' : 'Cliente Pago'}
                                                    </span>

                                                    {hasFacial && (
                                                        <span className="px-2 py-0.5 rounded-md text-[10px] font-medium bg-teal-50 text-teal-700 border border-teal-200">
                                                            Biometría Facial
                                                        </span>
                                                    )}

                                                    {hasWa && (
                                                        <span className="px-2 py-0.5 rounded-md text-[10px] font-medium bg-emerald-50 text-emerald-700 border border-emerald-200">
                                                            WhatsApp
                                                        </span>
                                                    )}
                                                </div>

                                                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-1 text-xs text-slate-500">
                                                    <div className="flex items-center gap-1.5 truncate">
                                                        <span className="text-slate-400">Subdominio:</span>
                                                        <a 
                                                            href={`https://${c.shift_subdomain}.shift.marcasnicaragua.com`} 
                                                            target="_blank" 
                                                            rel="noopener noreferrer"
                                                            className="text-indigo-600 hover:text-indigo-800 font-medium truncate"
                                                        >
                                                            {c.shift_subdomain}.shift.marcasnicaragua.com
                                                        </a>
                                                    </div>

                                                    <div className="flex items-center gap-1.5 truncate">
                                                        <span className="text-slate-400">Contacto:</span>
                                                        <span className="font-medium text-slate-700 truncate">{c.contact_name || 'Sin asignar'}</span>
                                                        <span className="text-slate-400">({c.contact_email || 'Sin correo'})</span>
                                                    </div>

                                                    <div className="flex items-center gap-1.5">
                                                        <span className="text-slate-400">Plan:</span>
                                                        <span className="font-bold text-slate-800">{c.currency} ${parseFloat(c.monthly_fee || 0).toFixed(2)}/mes</span>
                                                        <span className="text-slate-400">• Día de corte: {c.billing_day || 1}</span>
                                                    </div>

                                                    <div className="flex items-center gap-1.5">
                                                        <span className="text-slate-400">Pagado hasta:</span>
                                                        <span className={`font-medium ${c.service_paid_until ? 'text-slate-700' : 'text-amber-600'}`}>
                                                            {c.service_paid_until || 'Sin registrar'}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>

                                            {/* BOTONES DE ACCIÓN DIRECTA */}
                                            <div className="flex items-center gap-2 flex-wrap xl:flex-nowrap w-full xl:w-auto justify-end pt-2 xl:pt-0 border-t xl:border-t-0 border-slate-100">
                                                <button 
                                                    onClick={() => handleEnterPortal(c)}
                                                    className="px-3.5 py-2 bg-slate-900 hover:bg-slate-800 text-white font-semibold rounded-xl text-xs tracking-normal shadow-2xs flex items-center gap-1.5 transition-all cursor-pointer"
                                                    title="Entrar al panel de esta empresa"
                                                >
                                                    <svg className="w-3.5 h-3.5 text-indigo-400" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/></svg>
                                                    <span>Entrar al Portal</span>
                                                </button>

                                                <button 
                                                    onClick={() => handleOpenModules(c)}
                                                    className="px-3 py-2 bg-white hover:bg-slate-50 text-slate-700 font-semibold rounded-xl border border-slate-200 text-xs tracking-normal shadow-2xs flex items-center gap-1.5 transition-all cursor-pointer"
                                                    title="Configurar módulos y tarifas"
                                                >
                                                    <svg className="w-3.5 h-3.5 text-slate-500" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                                    <span>Módulos</span>
                                                </button>

                                                <button 
                                                    onClick={() => handleOpenEditCompany(c)}
                                                    className="p-2 bg-white hover:bg-slate-50 text-slate-600 rounded-xl border border-slate-200 shadow-2xs transition-all cursor-pointer"
                                                    title="Editar datos comerciales y fiscales"
                                                >
                                                    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                                </button>

                                                {cleanPhone && (
                                                    <a 
                                                        href={`https://wa.me/${cleanPhone.startsWith('505') ? cleanPhone : '505' + cleanPhone}`}
                                                        target="_blank"
                                                        rel="noopener noreferrer"
                                                        className="p-2 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 rounded-xl border border-emerald-200 shadow-2xs transition-all cursor-pointer"
                                                        title="Abrir chat de WhatsApp con el cliente"
                                                    >
                                                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                                                    </a>
                                                )}

                                                <button 
                                                    onClick={() => handleToggleSuspension(c, c.service_status)} 
                                                    className={`px-3 py-2 rounded-xl font-semibold text-xs tracking-normal transition-all cursor-pointer ${
                                                        isSuspended 
                                                            ? 'bg-emerald-50 text-emerald-700 border border-emerald-200 hover:bg-emerald-100' 
                                                            : 'bg-rose-50 text-rose-700 border border-rose-200 hover:bg-rose-100'
                                                    }`}
                                                >
                                                    {isSuspended ? 'Reactivar' : 'Suspender'}
                                                </button>
                                            </div>
                                        </div>
                                    );
                                })
                            )}
                        </div>
                    </div>
                </div>
            )}

            {/* SECCIÓN 2: FACTURACIÓN & COBROS */}
            {activeViewTab === 'saas_invoices' && (
                <div className="space-y-6">
                    {/* STAT CARDS FACTURACIÓN */}
                    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                        <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs">
                            <span className="text-xs font-medium text-slate-400">Total Facturado</span>
                            <h3 className="text-2xl font-bold text-slate-900 mt-2">${(metrics.totalInvoicedUSD || 0).toFixed(2)} <span className="text-xs font-medium text-slate-400">USD</span></h3>
                            <p className="text-[11px] text-slate-400 font-medium mt-0.5">Histórico global</p>
                        </div>
                        <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs">
                            <span className="text-xs font-medium text-slate-400">Total Recaudado</span>
                            <h3 className="text-2xl font-bold text-emerald-600 mt-2">${(metrics.totalCollectedUSD || 0).toFixed(2)} <span className="text-xs font-medium text-slate-400">USD</span></h3>
                            <p className="text-[11px] text-emerald-700/80 font-medium mt-0.5">Facturas cobradas</p>
                        </div>
                        <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs">
                            <span className="text-xs font-medium text-slate-400">Pendiente de Cobro</span>
                            <h3 className="text-2xl font-bold text-amber-600 mt-2">${(metrics.totalPendingUSD || 0).toFixed(2)} <span className="text-xs font-medium text-slate-400">USD</span></h3>
                            <p className="text-[11px] text-amber-700/80 font-medium mt-0.5">Por recaudar</p>
                        </div>
                        <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs">
                            <span className="text-xs font-medium text-slate-400">Facturas en Mora (&gt;5d)</span>
                            <h3 className="text-2xl font-bold text-rose-600 mt-2">{metrics.overdueInvoices.length}</h3>
                            <p className="text-[11px] text-rose-700/80 font-medium mt-0.5">Sujetas a suspensión</p>
                        </div>
                    </div>

                    <div className="bg-white p-5 sm:p-6 rounded-2xl shadow-xs border border-slate-200/80 space-y-4">
                        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 border-b border-slate-100 pb-4">
                            <div>
                                <h3 className="font-bold text-slate-900 text-sm">Historial de Facturación y Cobros</h3>
                                <p className="text-slate-400 text-xs font-medium">Control mensual de recibos y facturas emitidas a empresas</p>
                            </div>
                            <div className="flex items-center gap-2 flex-wrap">
                                <button 
                                    onClick={handleTriggerBillingCycle} 
                                    disabled={billingSyncing}
                                    className="px-3.5 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold rounded-xl text-xs tracking-normal border border-slate-200 flex items-center gap-1.5 active:scale-95 transition-all cursor-pointer"
                                >
                                    <svg className={`w-3.5 h-3.5 text-indigo-600 ${billingSyncing ? 'animate-spin' : ''}`} fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                                    <span>{billingSyncing ? "Sincronizando..." : "Sincronizar Ciclo"}</span>
                                </button>
                                <button 
                                    onClick={() => setShowInvoiceModal(true)} 
                                    className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl text-xs tracking-normal shadow-xs flex items-center gap-1.5 active:scale-95 transition-all cursor-pointer"
                                >
                                    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4"/></svg>
                                    <span>Emitir Factura</span>
                                </button>
                            </div>
                        </div>

                        {/* FILTROS DE FACTURACIÓN */}
                        <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between">
                            <div className="relative flex-1">
                                <svg className="w-4 h-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                                <input 
                                    type="text"
                                    value={invoiceSearch}
                                    onChange={e => setInvoiceSearch(e.target.value)}
                                    placeholder="Buscar por número de factura o empresa..."
                                    className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium outline-none focus:bg-white focus:border-indigo-400"
                                />
                            </div>

                            <div className="flex items-center gap-1.5">
                                {[
                                    { id: 'all', label: 'Todas' },
                                    { id: 'unpaid', label: 'Pendientes' },
                                    { id: 'paid', label: 'Pagadas' },
                                    { id: 'overdue', label: 'En Mora' }
                                ].map(f => (
                                    <button
                                        key={f.id}
                                        onClick={() => setInvoiceFilter(f.id)}
                                        className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-colors cursor-pointer ${
                                            invoiceFilter === f.id
                                                ? 'bg-slate-900 text-white shadow-2xs'
                                                : 'text-slate-500 hover:bg-slate-100 hover:text-slate-800'
                                        }`}
                                    >
                                        {f.label}
                                    </button>
                                ))}
                            </div>
                        </div>

                        <div className="space-y-3 pt-1">
                            {filteredInvoices.length === 0 ? (
                                <div className="text-center py-12 bg-slate-50 rounded-xl border border-dashed border-slate-200">
                                    <p className="text-xs text-slate-400 font-medium">No hay facturas registradas en este filtro.</p>
                                </div>
                            ) : (
                                filteredInvoices.map(inv => {
                                    const isPaid = inv.status === 'paid';
                                    const isNotifying = notifyingInvId === inv.id;
                                    return (
                                        <div key={inv.id} className="p-4 sm:p-5 rounded-2xl border border-slate-200/90 bg-white hover:border-slate-300 hover:shadow-xs transition-all flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
                                            <div>
                                                <div className="flex items-center gap-2 flex-wrap">
                                                    <span className="font-mono font-bold text-xs text-indigo-700 bg-indigo-50 border border-indigo-100 px-2 py-0.5 rounded-md">
                                                        {inv.invoice_number}
                                                    </span>
                                                    <h4 className="font-bold text-slate-900 text-sm">{inv.company_name}</h4>
                                                    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-semibold ${
                                                        isPaid ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-amber-50 text-amber-700 border border-amber-200'
                                                    }`}>
                                                        <span className={`w-1.5 h-1.5 rounded-full ${isPaid ? 'bg-emerald-500' : 'bg-amber-500'}`}></span>
                                                        {isPaid ? 'Pagada' : 'Pendiente'}
                                                    </span>
                                                </div>
                                                <p className="text-xs text-slate-500 font-medium mt-1">
                                                    Período: {inv.period_start} al {inv.period_end} • Vence: <strong className="text-slate-800">{inv.due_date}</strong>
                                                </p>
                                                {isPaid && (
                                                    <p className="text-[11px] text-emerald-700 font-medium mt-0.5">
                                                        Pagado con {inv.payment_method} ({inv.payment_reference || 'Confirmado'})
                                                    </p>
                                                )}
                                            </div>

                                            <div className="flex items-center gap-2 flex-wrap">
                                                <span className="text-base font-bold text-slate-900 mr-2">{inv.currency} ${parseFloat(inv.amount).toFixed(2)}</span>
                                                
                                                <button 
                                                    onClick={() => handleSendInvoiceNotification(inv, 'whatsapp')} 
                                                    disabled={isNotifying}
                                                    className="px-3 py-2 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 border border-emerald-200 rounded-xl text-xs font-semibold shadow-2xs flex items-center gap-1.5 active:scale-95 transition-all cursor-pointer"
                                                    title="Enviar cobro por WhatsApp"
                                                >
                                                    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                                                    <span>{isNotifying ? "..." : "WhatsApp"}</span>
                                                </button>

                                                <button 
                                                    onClick={() => handleSendInvoiceNotification(inv, 'email')} 
                                                    disabled={isNotifying}
                                                    className="px-3 py-2 bg-indigo-50 hover:bg-indigo-100 text-indigo-700 border border-indigo-200 rounded-xl text-xs font-semibold shadow-2xs flex items-center gap-1.5 active:scale-95 transition-all cursor-pointer"
                                                    title="Enviar factura por Email"
                                                >
                                                    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                                                    <span>Email</span>
                                                </button>

                                                {!isPaid && (
                                                    <button 
                                                        onClick={() => handleMarkPaid(inv)} 
                                                        className="px-3.5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-xs font-bold shadow-xs active:scale-95 transition-all cursor-pointer"
                                                    >
                                                        Marcar Pagado
                                                    </button>
                                                )}
                                            </div>
                                        </div>
                                    );
                                })
                            )}
                        </div>
                    </div>
                </div>
            )}

            {/* SECCIÓN 3: MOTOR IA MAESTRO & PASARELAS */}
            {activeViewTab === 'saas_ai' && (
                <div className="space-y-6 max-w-4xl">
                    {/* MOTOR GOOGLE GEMINI MAESTRO */}
                    <div className="bg-slate-900 p-6 sm:p-7 rounded-2xl shadow-lg text-white space-y-5 border border-slate-800">
                        <div className="flex items-center gap-3.5">
                            <div className="w-12 h-12 rounded-xl bg-indigo-600 flex items-center justify-center text-white shadow-md flex-shrink-0">
                                <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
                            </div>
                            <div>
                                <h3 className="text-lg font-bold text-white">API Key Central de Google Gemini</h3>
                                <p className="text-xs text-slate-300 font-medium mt-0.5">
                                    Alimenta el Copilot AI de todas las empresas con aislamiento estricto de datos
                                </p>
                            </div>
                        </div>

                        <div className="space-y-3 pt-1">
                            <label className="text-[11px] font-bold text-slate-300 uppercase tracking-wider block">Google Gemini API Key</label>
                            <div className="relative">
                                <input 
                                    type={showKey ? "text" : "password"} 
                                    value={masterKeyInput} 
                                    onChange={e => setMasterKeyInput(e.target.value)} 
                                    placeholder="AIzaSy..." 
                                    className="w-full p-3.5 bg-white/10 border border-white/20 rounded-xl text-xs font-mono text-white outline-none focus:border-indigo-400" 
                                />
                                <button type="button" onClick={() => setShowKey(!showKey)} className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 text-xs font-bold hover:text-white cursor-pointer">
                                    {showKey ? "Ocultar" : "Mostrar"}
                                </button>
                            </div>

                            {saveFeedback && (
                                <p className="text-xs font-semibold mt-1 text-emerald-300">{saveFeedback}</p>
                            )}

                            <button 
                                onClick={handleSaveMasterKey} 
                                disabled={isSaving} 
                                className="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl text-xs shadow-md active:scale-95 transition-all cursor-pointer"
                            >
                                {isSaving ? "Guardando..." : "Guardar API Key Central"}
                            </button>
                        </div>
                    </div>

                    {/* PASARELA META CLOUD WHATSAPP API */}
                    <div className="bg-white p-6 sm:p-7 rounded-2xl shadow-xs border border-slate-200/80 space-y-5">
                        <div className="flex items-center justify-between border-b border-slate-100 pb-4">
                            <div className="flex items-center gap-3">
                                <div className="w-11 h-11 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-600 flex items-center justify-center font-bold flex-shrink-0">
                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                                </div>
                                <div>
                                    <h3 className="text-base font-bold text-slate-900">Pasarela Meta Cloud WhatsApp API</h3>
                                    <p className="text-xs text-slate-400 font-medium">Número oficial registrado en Meta for Developers (+505 8728-9931)</p>
                                </div>
                            </div>
                            <label className="flex items-center gap-2 cursor-pointer bg-slate-50 border border-slate-200 px-3 py-1.5 rounded-xl text-xs font-semibold">
                                <input type="checkbox" checked={waEnabled} onChange={e => setWaEnabled(e.target.checked)} className="w-4 h-4 accent-emerald-600 rounded" />
                                <span className={waEnabled ? "text-emerald-700" : "text-slate-500"}>{waEnabled ? "Activa" : "Inactiva"}</span>
                            </label>
                        </div>

                        <div className="grid md:grid-cols-2 gap-4">
                            <div className="md:col-span-2">
                                <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Permanent User Access Token</label>
                                <input type="password" value={waToken} onChange={e => setWaToken(e.target.value)} placeholder="EAAM..." className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-mono text-xs outline-none focus:bg-white focus:border-indigo-400" />
                            </div>
                            <div>
                                <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Phone Number ID</label>
                                <input type="text" value={waPhoneId} onChange={e => setWaPhoneId(e.target.value)} placeholder="1362993856888988" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-mono text-xs outline-none focus:bg-white focus:border-indigo-400" />
                            </div>
                            <div>
                                <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">WABA ID (WhatsApp Business Account ID)</label>
                                <input type="text" value={waWabaId} onChange={e => setWaWabaId(e.target.value)} placeholder="1798705111135383" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-mono text-xs outline-none focus:bg-white focus:border-indigo-400" />
                            </div>
                        </div>

                        {/* PASARELA CHATWOOT & AI COPILOT */}
                        <div className="border-t border-slate-100 pt-5 space-y-4">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-3">
                                    <div className="w-10 h-10 rounded-xl bg-cyan-50 border border-cyan-200 text-cyan-600 flex items-center justify-center font-bold flex-shrink-0">
                                        <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H7a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/></svg>
                                    </div>
                                    <div>
                                        <h4 className="text-sm font-bold text-slate-900">Integración Chatwoot Omnicanal & Respuestas IA</h4>
                                        <p className="text-xs text-slate-400 font-medium">Permite supervisar mensajes de WhatsApp en Chatwoot y auto-responder consultas de colaboradores</p>
                                    </div>
                                </div>
                                <div className="flex items-center gap-3">
                                    <label className="flex items-center gap-2 cursor-pointer bg-slate-50 border border-slate-200 px-3 py-1.5 rounded-xl text-xs font-semibold">
                                        <input type="checkbox" checked={useChatwootForWhatsapp} onChange={e => setUseChatwootForWhatsapp(e.target.checked)} className="w-4 h-4 accent-cyan-600 rounded" />
                                        <span className={useChatwootForWhatsapp ? "text-cyan-700 font-bold" : "text-slate-500"}>{useChatwootForWhatsapp ? "Chatwoot Activo" : "Usar Meta Directo"}</span>
                                    </label>
                                    <label className="flex items-center gap-2 cursor-pointer bg-amber-50 border border-amber-200 px-3 py-1.5 rounded-xl text-xs font-semibold">
                                        <input type="checkbox" checked={aiAutoReplyEnabled} onChange={e => setAiAutoReplyEnabled(e.target.checked)} className="w-4 h-4 accent-amber-600 rounded" />
                                        <span className={aiAutoReplyEnabled ? "text-amber-800 font-bold" : "text-slate-500"}>{aiAutoReplyEnabled ? "Auto-Reply Copilot IA" : "Copilot Desactivado"}</span>
                                    </label>
                                </div>
                            </div>

                            <div className="grid md:grid-cols-4 gap-3">
                                <div className="md:col-span-2">
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">URL Instancia Chatwoot</label>
                                    <input type="text" value={chatwootUrl} onChange={e => setChatwootUrl(e.target.value)} placeholder="https://chatwoot.tudominio.com" className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:bg-white focus:border-cyan-400" />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">ID Cuenta (Account ID)</label>
                                    <input type="number" value={chatwootAccountId} onChange={e => setChatwootAccountId(e.target.value)} placeholder="1" className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:bg-white focus:border-cyan-400" />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">ID Inbox WhatsApp</label>
                                    <input type="number" value={chatwootInboxId} onChange={e => setChatwootInboxId(e.target.value)} placeholder="1" className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:bg-white focus:border-cyan-400" />
                                </div>
                                <div className="md:col-span-4">
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">API Token de Chatwoot (User Access Token)</label>
                                    <input type="password" value={chatwootApiToken} onChange={e => setChatwootApiToken(e.target.value)} placeholder="token_de_acceso_chatwoot..." className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl font-mono text-xs outline-none focus:bg-white focus:border-cyan-400" />
                                </div>
                            </div>
                        </div>

                        {/* PASARELA SMTP CORREO */}
                        <div className="border-t border-slate-100 pt-5 space-y-4">
                            <div className="flex items-center justify-between">
                                <div>
                                    <h4 className="text-sm font-bold text-slate-900">Servidor SMTP de Correo Electrónico</h4>
                                    <p className="text-xs text-slate-400 font-medium">Configuración de servidor saliente para envío de colillas y facturas</p>
                                </div>
                                <label className="flex items-center gap-2 cursor-pointer bg-slate-50 border border-slate-200 px-3 py-1.5 rounded-xl text-xs font-semibold">
                                    <input type="checkbox" checked={emailEnabled} onChange={e => setEmailEnabled(e.target.checked)} className="w-4 h-4 accent-indigo-600 rounded" />
                                    <span className={emailEnabled ? "text-indigo-700" : "text-slate-500"}>{emailEnabled ? "Activo" : "Inactivo"}</span>
                                </label>
                            </div>

                            <div className="grid md:grid-cols-3 gap-3">
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Host SMTP</label>
                                    <input type="text" value={smtpHost} onChange={e => setSmtpHost(e.target.value)} placeholder="smtp.hostinger.com" className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:bg-white" />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Puerto</label>
                                    <input type="number" value={smtpPort} onChange={e => setSmtpPort(e.target.value)} placeholder="587" className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:bg-white" />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Seguridad</label>
                                    <select value={smtpSecure} onChange={e => setSmtpSecure(e.target.value)} className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none">
                                        <option value="tls">TLS (Puerto 587)</option>
                                        <option value="ssl">SSL (Puerto 465)</option>
                                        <option value="none">Sin cifrado</option>
                                    </select>
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Usuario / Email</label>
                                    <input type="text" value={smtpUser} onChange={e => setSmtpUser(e.target.value)} placeholder="notificaciones@empresa.com" className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:bg-white" />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Contraseña</label>
                                    <input type="password" value={smtpPass} onChange={e => setSmtpPass(e.target.value)} placeholder="••••••••" className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:bg-white" />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Nombre Remitente</label>
                                    <input type="text" value={smtpFromName} onChange={e => setSmtpFromName(e.target.value)} placeholder="Shift ERP" className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs outline-none focus:bg-white" />
                                </div>
                            </div>
                        </div>

                        {gatewayFeedback && (
                            <div className="text-xs font-medium text-emerald-800 bg-emerald-50 border border-emerald-200 p-3 rounded-xl">
                                {gatewayFeedback}
                            </div>
                        )}

                        <div className="pt-2">
                            <button 
                                onClick={handleSaveMasterGateways} 
                                disabled={isSaving} 
                                className="px-6 py-2.5 bg-slate-900 hover:bg-black text-white font-bold rounded-xl text-xs shadow-xs active:scale-95 transition-all cursor-pointer"
                            >
                                {isSaving ? "Guardando Pasarelas..." : "Guardar Pasarelas de Notificación"}
                            </button>
                        </div>

                        {/* BANDEJA DE PRUEBAS EN VIVO */}
                        <div className="border-t border-slate-100 pt-5 space-y-4 bg-slate-50 p-4 sm:p-5 rounded-2xl border">
                            <h4 className="text-xs font-bold uppercase tracking-wider text-slate-700">Verificación de Entrega en Tiempo Real</h4>
                            <div className="grid md:grid-cols-3 gap-3">
                                <div className="space-y-2">
                                    <label className="text-[11px] font-bold text-slate-500 block">Probar Meta WhatsApp Directo</label>
                                    <div className="flex gap-2">
                                        <input 
                                            type="text" 
                                            value={testPhoneInput} 
                                            onChange={e => setTestPhoneInput(e.target.value)} 
                                            placeholder="87289931" 
                                            className="flex-1 p-2.5 bg-white border border-slate-200 rounded-xl text-xs font-mono font-medium outline-none" 
                                        />
                                        <button 
                                            onClick={() => handleTestWhatsApp(true)} 
                                            disabled={testingWa} 
                                            className="px-3 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl text-xs active:scale-95 transition-all flex-shrink-0 cursor-pointer"
                                        >
                                            {testingWa ? "..." : "Meta WA"}
                                        </button>
                                    </div>
                                </div>

                                <div className="space-y-2">
                                    <label className="text-[11px] font-bold text-slate-500 block">Probar Conexión Chatwoot</label>
                                    <div className="flex gap-2">
                                        <button 
                                            onClick={handleTestChatwoot} 
                                            disabled={testingChatwoot} 
                                            className="w-full py-2.5 bg-cyan-600 hover:bg-cyan-700 text-white font-bold rounded-xl text-xs active:scale-95 transition-all cursor-pointer flex items-center justify-center gap-1"
                                        >
                                            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                                            <span>{testingChatwoot ? "Conectando..." : "Probar Chatwoot"}</span>
                                        </button>
                                    </div>
                                </div>

                                <div className="space-y-2">
                                    <label className="text-[11px] font-bold text-slate-500 block">Probar Envío de Correo</label>
                                    <div className="flex gap-2">
                                        <input 
                                            type="email" 
                                            value={testEmailInput} 
                                            onChange={e => setTestEmailInput(e.target.value)} 
                                            placeholder="correo@ejemplo.com" 
                                            className="flex-1 p-2.5 bg-white border border-slate-200 rounded-xl text-xs font-medium outline-none" 
                                        />
                                        <button 
                                            onClick={handleTestEmail} 
                                            disabled={testingEmail} 
                                            className="px-3 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl text-xs active:scale-95 transition-all flex-shrink-0 cursor-pointer"
                                        >
                                            {testingEmail ? "..." : "Probar Email"}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* MODAL NUEVA / EDITAR EMPRESA */}
            {showCompanyModal && (
                <div className="fixed inset-0 bg-slate-950/60 z-[130] flex items-center justify-center p-4 fade-in" onClick={() => setShowCompanyModal(false)}>
                    <div className="bg-white rounded-2xl w-full max-w-3xl p-6 sm:p-7 shadow-2xl space-y-5 border border-slate-200/80 max-h-[92vh] overflow-y-auto" onClick={e=>e.stopPropagation()}>
                        <div className="flex justify-between items-center border-b border-slate-100 pb-3">
                            <div>
                                <h3 className="font-bold text-lg text-slate-900">{editingCompany ? "Editar Ficha de Empresa" : "Alta de Nueva Empresa SaaS"}</h3>
                                <p className="text-slate-400 text-xs font-medium">Información comercial, fiscal y credenciales de acceso administrativo</p>
                            </div>
                            <button onClick={() => setShowCompanyModal(false)} className="p-2 bg-slate-100 rounded-full text-slate-500 hover:text-slate-800 cursor-pointer"><svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
                        </div>

                        <form onSubmit={handleSaveCompanySubmit} className="space-y-4">
                            <div className="grid md:grid-cols-2 gap-3.5">
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Nombre Comercial de la Empresa</label>
                                    <input name="company_name" defaultValue={editingCompany?.company_name || ''} placeholder="Ej. CleanDent Dental" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs outline-none focus:bg-white" required />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Subdominio (Espacio de Trabajo)</label>
                                    <div className="flex items-center bg-slate-50 border border-slate-200 rounded-xl p-3">
                                        <input name="shift_subdomain" defaultValue={editingCompany?.shift_subdomain || ''} placeholder="cleandent" className="flex-1 bg-transparent font-semibold text-xs outline-none" required />
                                        <span className="text-xs font-medium text-slate-400">.shift.marcasnicaragua.com</span>
                                    </div>
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Régimen Fiscal</label>
                                    <select name="tax_regime" defaultValue={editingCompany?.tax_regime || 'cuota_fija'} className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs outline-none">
                                        <option value="cuota_fija">Cuota Fija (Persona Natural)</option>
                                        <option value="regimen_general">Régimen General (Sociedad / SA)</option>
                                    </select>
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Número RUC</label>
                                    <input name="ruc_number" defaultValue={editingCompany?.ruc_number || ''} placeholder="J0310000000001" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs outline-none focus:bg-white" />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Nombre del Propietario / Rep. Legal</label>
                                    <input name="owner_name" defaultValue={editingCompany?.owner_name || editingCompany?.contact_name || ''} placeholder="Nombre completo" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs outline-none focus:bg-white" />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Cédula del Representante</label>
                                    <input name="legal_rep_id" defaultValue={editingCompany?.legal_rep_id || ''} placeholder="001-000000-0000A" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs outline-none focus:bg-white" />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Contacto Operativo</label>
                                    <input name="contact_name" defaultValue={editingCompany?.contact_name || ''} placeholder="Responsable de cuenta" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs outline-none focus:bg-white" required />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Correo Electrónico (Login Admin)</label>
                                    <input name="contact_email" type="email" defaultValue={editingCompany?.contact_email || ''} placeholder="admin@empresa.com" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs outline-none focus:bg-white" required />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Teléfono / WhatsApp</label>
                                    <input name="contact_phone" defaultValue={editingCompany?.contact_phone || ''} placeholder="+505 8888-8888" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs outline-none focus:bg-white" />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Municipio / Departamento</label>
                                    <input name="municipality" defaultValue={editingCompany?.municipality || 'Managua'} placeholder="Managua" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs outline-none focus:bg-white" />
                                </div>
                                <div className="md:col-span-2">
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Dirección Comercial</label>
                                    <input name="business_address" defaultValue={editingCompany?.business_address || ''} placeholder="Dirección exacta de la sede..." className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs outline-none focus:bg-white" />
                                </div>
                                <div className="md:col-span-2">
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Contraseña de Administrador</label>
                                    <input name="admin_password" type="password" placeholder={editingCompany ? "Dejar en blanco para mantener la clave actual" : "Contraseña de acceso inicial"} className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs outline-none focus:bg-white" required={!editingCompany} />
                                </div>
                            </div>

                            <div className="flex gap-3 pt-3 border-t border-slate-100">
                                <button type="button" onClick={() => setShowCompanyModal(false)} className="flex-1 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-bold text-xs cursor-pointer">Cancelar</button>
                                <button type="submit" disabled={isSaving} className="flex-1 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl text-xs shadow-xs cursor-pointer">
                                    {editingCompany ? "Guardar Cambios" : "Crear Empresa"}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            )}

            {/* MODAL CONFIGURACIÓN DE MÓDULOS & TARIFA */}
            {showModuleModal && selectedClient && (
                <div className="fixed inset-0 bg-slate-950/60 z-[130] flex items-center justify-center p-4 fade-in" onClick={() => setShowModuleModal(false)}>
                    <div className="bg-white rounded-2xl w-full max-w-2xl p-6 sm:p-7 shadow-2xl space-y-5 border border-slate-200/80 max-h-[90vh] overflow-y-auto" onClick={e=>e.stopPropagation()}>
                        <div className="flex justify-between items-center border-b border-slate-100 pb-3">
                            <div>
                                <h3 className="font-bold text-lg text-slate-900">Plan & Módulos: {selectedClient.company_name}</h3>
                                <p className="text-xs text-slate-400 font-medium">Activa o desactiva las funciones según el plan contratado</p>
                            </div>
                            <button onClick={() => setShowModuleModal(false)} className="p-2 bg-slate-100 rounded-full text-slate-500 hover:text-slate-800 cursor-pointer"><svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
                        </div>

                        <form onSubmit={handleSaveModulesAndBilling} className="space-y-4">
                            <div>
                                <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Tipo de Suscripción</label>
                                <select name="account_type" defaultValue={selectedClient.account_type || 'demo'} className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-semibold text-xs text-indigo-700 outline-none">
                                    <option value="demo">Cliente Demo (Muestra módulos no contratados con candado)</option>
                                    <option value="subscription">Cliente de Pago (Oculta módulos no contratados)</option>
                                </select>
                            </div>

                            <div className="space-y-2">
                                <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block">Módulos Habilitados</label>
                                <div className="grid grid-cols-2 gap-2.5">
                                    {[
                                        { name: 'module_asistencia', label: 'Asistencia y Marcajes' },
                                        { name: 'module_personal', label: 'Gestión de Personal' },
                                        { name: 'module_contratos', label: 'Contratos Laborales' },
                                        { name: 'module_planilla', label: 'Planilla y Nómina' },
                                        { name: 'module_vacaciones', label: 'Control de Vacaciones' },
                                        { name: 'module_ausencias', label: 'Registro de Ausencias' },
                                        { name: 'module_ai', label: 'Shift Copilot AI' },
                                        { name: 'module_facial', label: 'Biometría Facial' },
                                        { name: 'module_whatsapp', label: 'WhatsApp Meta Cloud' },
                                        { name: 'module_email', label: 'Notificaciones por Email' }
                                    ].map(mod => (
                                        <label key={mod.name} className="flex items-center gap-2.5 p-2.5 bg-slate-50 border border-slate-200 rounded-xl cursor-pointer text-xs font-medium text-slate-700 hover:bg-slate-100 transition-colors">
                                            <input type="checkbox" name={mod.name} defaultChecked={Boolean(selectedClient[mod.name])} className="w-4 h-4 accent-indigo-600 rounded" />
                                            <span>{mod.label}</span>
                                        </label>
                                    ))}
                                </div>
                            </div>

                            <div className="grid md:grid-cols-3 gap-3 border-t border-slate-100 pt-4">
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Tarifa Mensual</label>
                                    <input name="monthly_fee" type="number" step="0.01" defaultValue={selectedClient.monthly_fee || 0} className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl font-bold text-xs" required />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Moneda</label>
                                    <select name="currency" defaultValue={selectedClient.currency || 'USD'} className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl font-semibold text-xs">
                                        <option value="USD">USD ($)</option>
                                        <option value="NIO">Córdobas (C$)</option>
                                    </select>
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Día de Cobro</label>
                                    <input name="billing_day" type="number" min="1" max="31" defaultValue={selectedClient.billing_day || 23} className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl font-semibold text-xs" required />
                                </div>
                            </div>

                            <div className="grid md:grid-cols-2 gap-3">
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Estado de Servicio</label>
                                    <select name="service_status" defaultValue={selectedClient.service_status || 'active'} className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl font-semibold text-xs">
                                        <option value="active">Activo / Al Día</option>
                                        <option value="past_due">En Gracia / Por Vencer</option>
                                        <option value="suspended">Suspendido</option>
                                    </select>
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Pagado Hasta</label>
                                    <input type="date" name="service_paid_until" defaultValue={selectedClient.service_paid_until || ''} className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl font-semibold text-xs" />
                                </div>
                            </div>

                            <div className="flex gap-3 pt-2">
                                <button type="button" onClick={() => setShowModuleModal(false)} className="flex-1 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-bold text-xs cursor-pointer">Cancelar</button>
                                <button type="submit" disabled={isSaving} className="flex-1 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl text-xs shadow-xs cursor-pointer">Guardar Configuración</button>
                            </div>
                        </form>
                    </div>
                </div>
            )}

            {/* MODAL EMISIÓN DE FACTURA */}
            {showInvoiceModal && (
                <div className="fixed inset-0 bg-slate-950/60 z-[130] flex items-center justify-center p-4 fade-in" onClick={() => setShowInvoiceModal(false)}>
                    <div className="bg-white rounded-2xl w-full max-w-lg p-6 sm:p-7 shadow-2xl space-y-4 border border-slate-200/80" onClick={e=>e.stopPropagation()}>
                        <h3 className="font-bold text-lg text-slate-900">Nueva Factura de Suscripción</h3>
                        <form onSubmit={handleCreateInvoice} className="space-y-3.5">
                            <div>
                                <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Empresa Cliente</label>
                                <select name="client_id" className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-semibold text-xs outline-none">
                                    {saasData.clients.map(cl => (
                                        <option key={cl.id} value={cl.id}>{cl.company_name} ({cl.currency} ${cl.monthly_fee})</option>
                                    ))}
                                </select>
                            </div>
                            <div className="grid grid-cols-2 gap-3">
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Monto a Cobrar</label>
                                    <input type="number" step="0.01" name="amount" defaultValue="50.00" className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl font-bold text-xs outline-none" required />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Moneda</label>
                                    <select name="currency" className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl font-semibold text-xs outline-none">
                                        <option value="USD">USD ($)</option>
                                        <option value="NIO">Córdobas (C$)</option>
                                    </select>
                                </div>
                            </div>
                            <div className="grid grid-cols-2 gap-3">
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Fecha de Emisión</label>
                                    <input type="date" name="issue_date" defaultValue={new Date().toISOString().split('T')[0]} className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs outline-none" required />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Fecha de Vencimiento</label>
                                    <input type="date" name="due_date" defaultValue={new Date(Date.now() + 15*24*60*60*1000).toISOString().split('T')[0]} className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs outline-none" required />
                                </div>
                            </div>
                            <div className="grid grid-cols-2 gap-3">
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Inicio de Período</label>
                                    <input type="date" name="period_start" defaultValue={new Date().toISOString().split('T')[0]} className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs outline-none" required />
                                </div>
                                <div>
                                    <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Fin de Período (1 Mes)</label>
                                    <input type="date" name="period_end" defaultValue={new Date(Date.now() + 30*24*60*60*1000).toISOString().split('T')[0]} className="w-full p-2.5 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs outline-none" required />
                                </div>
                            </div>
                            <div className="flex gap-3 pt-3 border-t border-slate-100">
                                <button type="button" onClick={() => setShowInvoiceModal(false)} className="flex-1 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-bold text-xs cursor-pointer">Cancelar</button>
                                <button type="submit" disabled={isSaving} className="flex-1 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl text-xs shadow-xs cursor-pointer">Emitir Factura</button>
                            </div>
                        </form>
                    </div>
                </div>
            )}
        </div>
    );
};