import React, { useState, useRef, useEffect } from 'react';
import { Row, Col } from 'react-bootstrap';
import { 
    Building2, 
    CreditCard, 
    Edit3, 
    FileText, 
    MapPin, 
    Plus, 
    Zap, 
    Flame, 
    Users, 
    Trash2, 
    Power, 
    PauseCircle,
    MoreVertical,
    Phone,
    Mail,
    Copy,
    Check,
    FileCheck2,
    ChevronDown,
    ChevronUp,
    UserCheck
} from 'lucide-react';
import DocumentoCard from '../DocumentoCard';
import EditarClienteModal from '../Editar/EditarClienteModal';
import EditarContactoModal from '../Editar/EditarContactoModal';
import EditarCuentaBancariaModal from '../Editar/EditarCuentaBancariaModal';
import EditarPuntoSuministroModal from '../Editar/EditarPuntoSuministroModal';
import CambioTitularModal from '../Editar/CambioTitularModal';
import CrearContactoModal from '../Editar/CrearContactoModal';
import CrearCuentaBancariaModal from '../Editar/CrearCuentaBancariaModal';
import CrearPuntoSuministroModal from '../Editar/CrearPuntoSuministroModal';
import SubirDocumentoModal from '../Editar/SubirDocumentoModal';
import CardSectionStatus from './CardSectionStatus';
import { DashboardCliente } from '../types';
import axios from 'axios';
import { confirmDestructiveAction, notifyError, notifySuccess } from '../services/dashboardFeedback';

interface ClientDetailPanelProps {
    cliente: DashboardCliente;
    refreshData: () => Promise<void>;
    loading: { show: () => void; hide: () => void };
}

interface ActionItem {
    label: string;
    icon?: React.ReactNode;
    onClick: () => void;
    isDanger?: boolean;
}

// Menú de 3 puntos discreto y accesible
const ActionDropdown: React.FC<{ items: ActionItem[] }> = ({ items }) => {
    const [isOpen, setIsOpen] = useState(false);
    const menuRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
                setIsOpen(false);
            }
        };
        if (isOpen) {
            document.addEventListener('mousedown', handleClickOutside);
        }
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [isOpen]);

    return (
        <div className="saas-dropdown-wrap" ref={menuRef}>
            <button
                type="button"
                onClick={() => setIsOpen(!isOpen)}
                className="saas-action-btn"
                title="Más opciones"
            >
                <MoreVertical size={16} />
            </button>
            {isOpen && (
                <div className="saas-dropdown-menu">
                    {items.map((item, idx) => (
                        <button
                            key={idx}
                            type="button"
                            onClick={() => {
                                setIsOpen(false);
                                item.onClick();
                            }}
                            className={`saas-dropdown-btn ${item.isDanger ? 'danger' : ''}`}
                        >
                            {item.icon}
                            <span>{item.label}</span>
                        </button>
                    ))}
                </div>
            )}
        </div>
    );
};

// Componente minimalista de Clave-Valor
const KeyValueField: React.FC<{ label: string; value?: string | number | null; icon?: React.ReactNode; isMono?: boolean }> = ({ 
    label, 
    value, 
    icon, 
    isMono = false 
}) => {
    const hasValue = value !== undefined && value !== null && String(value).trim() !== '';
    return (
        <div className="saas-kv">
            <span className="saas-kv-label">{label}</span>
            <div className={`saas-kv-value ${isMono ? 'mono' : ''} ${!hasValue ? 'saas-kv-empty' : ''}`}>
                {icon && <span style={{ marginRight: '4px', display: 'inline-flex', alignItems: 'center', opacity: 0.65 }}>{icon}</span>}
                <span>{hasValue ? String(value) : '—'}</span>
            </div>
        </div>
    );
};

const ClientDetailPanel: React.FC<ClientDetailPanelProps> = ({ cliente, refreshData, loading }) => {
    // Modal states
    const [showEditarModal, setShowEditarModal] = useState(false);
    const [showEditarContactoModal, setShowEditarContactoModal] = useState(false);
    const [showEditarCuentaModal, setShowEditarCuentaModal] = useState(false);
    const [showEditarPuntoModal, setShowEditarPuntoModal] = useState(false);
    const [showCambioTitularModal, setShowCambioTitularModal] = useState(false);
    const [showCrearContactoModal, setShowCrearContactoModal] = useState(false);
    const [showCrearCuentaModal, setShowCrearCuentaModal] = useState(false);
    const [showCrearPuntoModal, setShowCrearPuntoModal] = useState(false);
    const [showSubirDocumentoModal, setShowSubirDocumentoModal] = useState(false);
    const [cuentaEdit, setCuentaEdit] = useState<any>(null);
    const [puntoEdit, setPuntoEdit] = useState<any>(null);
    const [puntoCambioTitular, setPuntoCambioTitular] = useState<any>(null);
    const [contactoEdit, setContactoEdit] = useState<any>(null);
    const [copiedKey, setCopiedKey] = useState<string | null>(null);
    const [showAllPuntos, setShowAllPuntos] = useState(false);

    const detallesContacto = Array.isArray(cliente.contacto_detalle_cliente)
        ? cliente.contacto_detalle_cliente
        : (cliente as any).contacto_detalle_cliente
            ? [(cliente as any).contacto_detalle_cliente]
            : [];
    
    const contactos = detallesContacto
        .filter((detalle: any) => !!detalle?.contacto)
        .map((detalle: any) => ({ ...detalle.contacto, CodDetCliCont: detalle.CodDetCliCont }));

    const handleCopy = (text: string) => {
        if (!text) return;
        navigator.clipboard.writeText(text);
        setCopiedKey(text);
        setTimeout(() => setCopiedKey(null), 2000);
    };

    const requestWithInertia = async (
        method: 'post' | 'put',
        url: string,
        payload: any,
        extraOptions: Record<string, any> = {}
    ): Promise<void> => {
        if (method === 'post' && extraOptions.forceFormData) {
            await axios.post(url, payload, {
                headers: { 'Content-Type': 'multipart/form-data' },
            });
        } else if (method === 'post') {
            await axios.post(url, payload);
        } else if (method === 'put') {
            await axios.put(url, payload);
        }
    };

    const handleDeleteCuenta = async (cuenta: any) => {
        const confirmed = await confirmDestructiveAction({
            title: '¿Eliminar cuenta bancaria?',
            text: `Se eliminará la cuenta ${cuenta.NumIBan || ''}.`,
        });
        if (!confirmed) return;

        loading.show();
        try {
            await axios.delete(route('clientes.cuenta-bancaria.destroy', cuenta.CodCueBan));
            await refreshData();
            notifySuccess('Cuenta bancaria eliminada correctamente.');
        } catch (e: any) {
            notifyError(e?.response?.data?.message || 'No se pudo eliminar la cuenta bancaria.');
        } finally {
            loading.hide();
        }
    };

    const handleDeleteContacto = async (contacto: any) => {
        if (!contacto?.CodDetCliCont) {
            notifyError('No se pudo identificar el vínculo del contacto con este cliente.');
            return;
        }
        const confirmed = await confirmDestructiveAction({
            title: '¿Quitar contacto?',
            text: `Se desvinculará a "${contacto.NomConCli}" de este cliente.`,
        });
        if (!confirmed) return;

        loading.show();
        try {
            await axios.delete(route('contactos.detalle-clientes.destroy', { id: contacto.CodConCli, codDet: contacto.CodDetCliCont }));
            await refreshData();
            notifySuccess('Contacto desvinculado correctamente.');
        } catch (e: any) {
            notifyError(e?.response?.data?.message || 'No se pudo desvincular el contacto.');
        } finally {
            loading.hide();
        }
    };

    const handleActivarPunto = async (punto: any) => {
        loading.show();
        try {
            await axios.post(route('puntos-suministro.activar', punto.CodPunSum));
            await refreshData();
            notifySuccess('Punto de suministro activado correctamente.');
        } catch (e: any) {
            notifyError(e?.response?.data?.message || 'No se pudo activar el punto de suministro.');
        } finally {
            loading.hide();
        }
    };

    const handleSuspenderPunto = async (punto: any) => {
        const confirmed = await confirmDestructiveAction({
            title: '¿Suspender punto de suministro?',
            text: 'El punto quedará marcado como suspendido.',
            confirmButtonText: 'Sí, suspender',
        });
        if (!confirmed) return;

        loading.show();
        try {
            await axios.post(route('puntos-suministro.suspender', punto.CodPunSum));
            await refreshData();
            notifySuccess('Punto de suministro suspendido correctamente.');
        } catch (e: any) {
            notifyError(e?.response?.data?.message || 'No se pudo suspender el punto de suministro.');
        } finally {
            loading.hide();
        }
    };

    const handleDeletePunto = async (punto: any) => {
        const confirmed = await confirmDestructiveAction({
            title: '¿Eliminar punto de suministro?',
            text: 'Esta acción no se puede deshacer. Si tiene CUPS o contratos asociados, la eliminación puede ser rechazada.',
        });
        if (!confirmed) return;

        loading.show();
        try {
            await axios.delete(route('puntos-suministro.destroy', punto.CodPunSum));
            await refreshData();
            notifySuccess('Punto de suministro eliminado correctamente.');
        } catch (e: any) {
            notifyError(e?.response?.data?.message || 'No se pudo eliminar el punto de suministro.');
        } finally {
            loading.hide();
        }
    };

    const isActivo = Number(cliente.EstCli) === 1;

    return (
        <div className="client-detail-panel">
            {/* 1. Header Hero Bar del Cliente */}
            <div className="saas-hero-card">
                <div className="d-flex align-items-center gap-3">
                    <div className="saas-icon-badge primary" style={{ width: '44px', height: '44px', borderRadius: '12px' }}>
                        <Building2 size={22} />
                    </div>
                    <div>
                        <div className="d-flex align-items-center gap-2 flex-wrap">
                            <h2 className="saas-hero-title">
                                {cliente.RazSocCli}
                            </h2>
                            <span className="saas-cif-badge">
                                {cliente.NumCifCli}
                            </span>
                            <span className={`saas-badge-status ${isActivo ? 'active' : 'suspended'}`}>
                                <span style={{ width: '6px', height: '6px', borderRadius: '50%', backgroundColor: isActivo ? '#10b981' : '#f59e0b', display: 'inline-block' }}></span>
                                {isActivo ? 'Activo' : 'Inactivo'}
                            </span>
                        </div>
                        <div className="d-flex align-items-center gap-3 mt-1" style={{ fontSize: '0.8rem', color: '#64748b' }}>
                            {cliente.localidad?.DesLoc && (
                                <span className="d-flex align-items-center gap-1">
                                    <MapPin size={13} style={{ color: '#94a3b8' }} />
                                    {cliente.localidad?.DesLoc}{cliente.localidad?.provincia?.DesPro ? `, ${cliente.localidad.provincia.DesPro}` : ''}
                                </span>
                            )}
                            {cliente.EmaCli && (
                                <span className="d-flex align-items-center gap-1">
                                    <Mail size={13} style={{ color: '#94a3b8' }} />
                                    {cliente.EmaCli}
                                </span>
                            )}
                        </div>
                    </div>
                </div>

                <div className="d-flex align-items-center gap-2 flex-wrap">
                    <button
                        type="button"
                        className="saas-btn-primary"
                        onClick={() => setShowEditarModal(true)}
                    >
                        <Edit3 size={14} />
                        <span>Editar Datos</span>
                    </button>
                    <button
                        type="button"
                        className="saas-btn-outline"
                        onClick={() => setShowCrearPuntoModal(true)}
                    >
                        <Plus size={13} />
                        <span>Nuevo Punto</span>
                    </button>
                    <button
                        type="button"
                        className="saas-btn-outline"
                        onClick={() => setShowSubirDocumentoModal(true)}
                    >
                        <FileCheck2 size={13} />
                        <span>Subir Documento</span>
                    </button>
                </div>
            </div>

            {/* 2. Fila Principal: Datos del Cliente (Left) & Puntos de Suministro (Right) */}
            <Row className="g-3 mb-3">
                {/* Datos del Cliente y Domicilio */}
                <Col lg={7}>
                    <div className="saas-card h-100 d-flex flex-column">
                        <div className="saas-card-header">
                            <div className="d-flex align-items-center gap-2">
                                <div className="saas-icon-badge primary">
                                    <Building2 size={16} />
                                </div>
                                <h3 className="saas-title m-0" style={{ fontSize: '0.95rem' }}>
                                    Datos Fiscales y Domicilio
                                </h3>
                            </div>
                            <button
                                type="button"
                                className="saas-btn-outline"
                                onClick={() => setShowEditarModal(true)}
                            >
                                <Edit3 size={13} />
                                <span>Modificar</span>
                            </button>
                        </div>

                        <div className="saas-card-body flex-grow-1">
                            {/* Sección: Identificación */}
                            <div className="saas-section-box">
                                <div className="saas-section-title">Identificación</div>
                                <div className="saas-grid-2">
                                    <KeyValueField label="Razón Social / Titular" value={cliente.RazSocCli} />
                                    <KeyValueField label="NIF / CIF" value={cliente.NumCifCli} isMono />
                                </div>
                            </div>

                            {/* Sección: Domicilio Fiscal */}
                            <div className="saas-section-box">
                                <div className="saas-section-title">Domicilio Fiscal</div>
                                <div className="saas-grid-3">
                                    <div className="saas-grid-span-2">
                                        <KeyValueField 
                                            label="Dirección" 
                                            value={`${(cliente as any).NomViaDomFis || ''} ${(cliente as any).NumViaDomFis || ''}`.trim()} 
                                        />
                                    </div>
                                    <KeyValueField 
                                        label="Escalera / Planta / Puerta" 
                                        value={[(cliente as any).EscDomFis, (cliente as any).PlaDomFis, (cliente as any).PueDomFis].filter(Boolean).join(' / ')} 
                                    />
                                    <KeyValueField label="Localidad" value={(cliente as any).localidad?.DesLoc} />
                                    <KeyValueField label="Provincia" value={(cliente as any).localidad?.provincia?.DesPro} />
                                    <KeyValueField label="Código Postal" value={(cliente as any).localidad?.CPLoc} isMono />
                                </div>
                            </div>

                            {/* Sección: Canales de Comunicación */}
                            <div className="saas-section-box" style={{ marginBottom: cliente.ObsCli ? '0.85rem' : '0' }}>
                                <div className="saas-section-title">Canales de Comunicación</div>
                                <div className="saas-grid-2">
                                    <KeyValueField 
                                        label="Teléfono Fijo" 
                                        value={cliente.TelFijCli} 
                                        icon={<Phone size={12} />} 
                                    />
                                    <KeyValueField 
                                        label="Teléfono Móvil" 
                                        value={cliente.TelMovCli} 
                                        icon={<Phone size={12} />} 
                                    />
                                    <KeyValueField 
                                        label="Email Principal" 
                                        value={cliente.EmaCli} 
                                        icon={<Mail size={12} />} 
                                    />
                                    <KeyValueField 
                                        label="Email Secundario" 
                                        value={(cliente as any).EmaCliOpc} 
                                        icon={<Mail size={12} />} 
                                    />
                                </div>
                            </div>

                            {/* Notas y Observaciones */}
                            {cliente.ObsCli && (
                                <div className="saas-note-box">
                                    <strong>Observaciones:</strong> {cliente.ObsCli}
                                </div>
                            )}
                        </div>
                    </div>
                </Col>

                {/* Puntos de Suministro */}
                <Col lg={5}>
                    <div className="saas-card h-100 d-flex flex-column">
                        <div className="saas-card-header">
                            <div className="d-flex align-items-center gap-2">
                                <div className="saas-icon-badge indigo">
                                    <MapPin size={16} />
                                </div>
                                <div className="d-flex align-items-center gap-2">
                                    <h3 className="saas-title m-0" style={{ fontSize: '0.95rem' }}>
                                        Puntos de Suministro
                                    </h3>
                                    <span className="badge bg-light text-secondary border" style={{ fontSize: '0.7rem' }}>
                                        {(cliente.puntos_suministro || []).length}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div className="saas-card-body flex-grow-1">
                            <CardSectionStatus
                                isEmpty={(cliente.puntos_suministro || []).length === 0}
                                emptyIcon={<MapPin size={28} />}
                                emptyMessage="No hay puntos de suministro registrados para este cliente."
                                emptyAction={{ label: 'Añadir primer punto de suministro', onClick: () => setShowCrearPuntoModal(true) }}
                            >
                                <div>
                                    {(() => {
                                        const puntos = cliente.puntos_suministro || [];
                                        const visiblePuntos = showAllPuntos ? puntos : puntos.slice(0, 3);

                                        return (
                                            <>
                                                {visiblePuntos.map((punto: any, idx: number) => {
                                                    const activo = Number(punto.EstPunSum ?? 1) === 1;
                                                    const cupsElectrico = punto.cups_electrico || punto.cupsElectrico || [];
                                                    const cupsGas = punto.cups_gas || punto.cupsGas || [];

                                                    const puntoDropdownItems: ActionItem[] = [
                                                        {
                                                            label: 'Editar punto',
                                                            icon: <Edit3 size={13} />,
                                                            onClick: () => {
                                                                setPuntoEdit(punto);
                                                                setShowEditarPuntoModal(true);
                                                            }
                                                        },
                                                        {
                                                            label: 'Cambio de titular',
                                                            icon: <UserCheck size={13} />,
                                                            onClick: () => {
                                                                setPuntoCambioTitular(punto);
                                                                setShowCambioTitularModal(true);
                                                            }
                                                        },
                                                        activo ? {
                                                            label: 'Suspender punto',
                                                            icon: <PauseCircle size={13} />,
                                                            onClick: () => handleSuspenderPunto(punto)
                                                        } : {
                                                            label: 'Activar punto',
                                                            icon: <Power size={13} />,
                                                            onClick: () => handleActivarPunto(punto)
                                                        },
                                                        {
                                                            label: 'Eliminar punto',
                                                            icon: <Trash2 size={13} />,
                                                            onClick: () => handleDeletePunto(punto),
                                                            isDanger: true
                                                        }
                                                    ];

                                                    return (
                                                        <div key={idx} className="saas-supply-item">
                                                            <div className="d-flex justify-content-between align-items-center mb-2">
                                                                <div className="d-flex align-items-center gap-2">
                                                                    <span className={`saas-badge-status ${activo ? 'active' : 'suspended'}`}>
                                                                        {activo ? 'Activo' : 'Suspendido'}
                                                                    </span>
                                                                    <span style={{ fontSize: '0.8125rem', fontWeight: 700, color: '#1e293b' }}>
                                                                        Punto #{punto.CodPunSum}
                                                                    </span>
                                                                </div>

                                                                <div className="d-flex align-items-center gap-1.5">
                                                                    <button
                                                                        type="button"
                                                                        onClick={() => {
                                                                            setPuntoEdit(punto);
                                                                            setShowEditarPuntoModal(true);
                                                                        }}
                                                                        className="saas-action-btn"
                                                                        title="Editar punto"
                                                                    >
                                                                        <Edit3 size={14} />
                                                                    </button>
                                                                    <ActionDropdown items={puntoDropdownItems} />
                                                                </div>
                                                            </div>

                                                            {/* Dirección del punto */}
                                                            <div className="d-flex align-items-start gap-1" style={{ fontSize: '0.78rem', color: '#475569', marginBottom: '0.5rem' }}>
                                                                <MapPin size={13} style={{ color: '#94a3b8', marginTop: '2px', flexShrink: 0 }} />
                                                                <span style={{ lineHeight: 1.4 }}>
                                                                    {[
                                                                        punto.NomViaPunSum,
                                                                        punto.NumViaPunSum,
                                                                        punto.BloPunSum ? `Bloque ${punto.BloPunSum}` : null,
                                                                        punto.EscPunSum ? `Esc. ${punto.EscPunSum}` : null,
                                                                        punto.PlaPunSum ? `Pl. ${punto.PlaPunSum}` : null,
                                                                        punto.PuePunSum ? `Pta. ${punto.PuePunSum}` : null,
                                                                        punto.CPLocSoc,
                                                                        punto.localidad?.DesLoc,
                                                                        punto.localidad?.provincia?.DesPro
                                                                    ].filter(Boolean).join(', ')}
                                                                </span>
                                                            </div>

                                                            {/* CUPS Asociados */}
                                                            <div>
                                                                {cupsElectrico.map((e: any, cIdx: number) => {
                                                                    const val = e.CUPsEle || e.CupsEle || e.cups;
                                                                    const isCopied = copiedKey === val;
                                                                    return (
                                                                        <div key={e.CodCupsEle || `ele-${cIdx}`} className="saas-cups-pill electric">
                                                                            <div className="d-flex align-items-center gap-1 text-truncate">
                                                                                <Zap size={12} style={{ color: '#d97706', flexShrink: 0 }} />
                                                                                <span className="text-truncate">{val}</span>
                                                                            </div>
                                                                            <button
                                                                                type="button"
                                                                                onClick={() => handleCopy(val)}
                                                                                className="saas-copy-btn"
                                                                                title="Copiar CUPS"
                                                                            >
                                                                                {isCopied ? <Check size={12} color="#059669" /> : <Copy size={12} />}
                                                                            </button>
                                                                        </div>
                                                                    );
                                                                })}

                                                                {cupsGas.map((g: any, gIdx: number) => {
                                                                    const val = g.CupsGas || g.CUPsGas || g.cups;
                                                                    const isCopied = copiedKey === val;
                                                                    return (
                                                                        <div key={g.CodCupGas || g.CodCupsGas || `gas-${gIdx}`} className="saas-cups-pill gas">
                                                                            <div className="d-flex align-items-center gap-1 text-truncate">
                                                                                <Flame size={12} style={{ color: '#e11d48', flexShrink: 0 }} />
                                                                                <span className="text-truncate">{val}</span>
                                                                            </div>
                                                                            <button
                                                                                type="button"
                                                                                onClick={() => handleCopy(val)}
                                                                                className="saas-copy-btn"
                                                                                title="Copiar CUPS"
                                                                            >
                                                                                {isCopied ? <Check size={12} color="#059669" /> : <Copy size={12} />}
                                                                            </button>
                                                                        </div>
                                                                    );
                                                                })}

                                                                {!cupsElectrico.length && !cupsGas.length && (
                                                                    <div style={{ fontSize: '0.75rem', color: '#94a3b8', fontStyle: 'italic', paddingTop: '0.25rem' }}>
                                                                        Sin códigos CUPS vinculados
                                                                    </div>
                                                                )}
                                                            </div>
                                                        </div>
                                                    );
                                                })}

                                                {puntos.length > 3 && (
                                                    <button
                                                        type="button"
                                                        className="saas-toggle-more-btn"
                                                        onClick={() => setShowAllPuntos(!showAllPuntos)}
                                                    >
                                                        {showAllPuntos ? (
                                                            <>
                                                                <ChevronUp size={14} /> Mostrar menos puntos
                                                            </>
                                                        ) : (
                                                            <>
                                                                <ChevronDown size={14} /> Ver los {puntos.length} puntos de suministro
                                                            </>
                                                        )}
                                                    </button>
                                                )}

                                                <button
                                                    type="button"
                                                    className="saas-add-item-btn"
                                                    onClick={() => setShowCrearPuntoModal(true)}
                                                >
                                                    <Plus size={15} />
                                                    <span>Añadir Punto de Suministro</span>
                                                </button>
                                            </>
                                        );
                                    })()}
                                </div>
                            </CardSectionStatus>
                        </div>
                    </div>
                </Col>
            </Row>

            {/* 3. Fila Secundaria: Contactos, Bancos, Documentos */}
            <Row className="g-3">
                {/* Contactos */}
                <Col md={6} lg={4}>
                    <div className="saas-card h-100 d-flex flex-column">
                        <div className="saas-card-header">
                            <div className="d-flex align-items-center gap-2">
                                <div className="saas-icon-badge primary">
                                    <Users size={16} />
                                </div>
                                <div className="d-flex align-items-center gap-2">
                                    <h3 className="saas-title m-0" style={{ fontSize: '0.95rem' }}>Contactos</h3>
                                    <span className="badge bg-light text-secondary border" style={{ fontSize: '0.7rem' }}>
                                        {contactos.length}
                                    </span>
                                </div>
                            </div>
                            <button
                                type="button"
                                className="saas-btn-outline"
                                onClick={() => setShowCrearContactoModal(true)}
                            >
                                <Plus size={13} />
                                <span>Añadir</span>
                            </button>
                        </div>

                        <div className="saas-card-body flex-grow-1">
                            <CardSectionStatus
                                isEmpty={contactos.length === 0}
                                emptyIcon={<Users size={28} />}
                                emptyMessage="No hay personas de contacto asociadas."
                                emptyAction={{ label: 'Añadir contacto', onClick: () => setShowCrearContactoModal(true) }}
                            >
                                <div>
                                    {contactos.map((contacto: any) => {
                                        const contactoActions: ActionItem[] = [
                                            {
                                                label: 'Editar contacto',
                                                icon: <Edit3 size={13} />,
                                                onClick: () => {
                                                    setContactoEdit(contacto);
                                                    setShowEditarContactoModal(true);
                                                }
                                            },
                                            {
                                                label: 'Desvincular',
                                                icon: <Trash2 size={13} />,
                                                onClick: () => handleDeleteContacto(contacto),
                                                isDanger: true
                                            }
                                        ];

                                        return (
                                            <div key={contacto.CodConCli} className="saas-contact-card">
                                                <div className="d-flex justify-content-between align-items-start gap-2">
                                                    <div>
                                                        <div style={{ fontSize: '0.875rem', fontWeight: 700, color: '#0f172a' }}>
                                                            {contacto.NomConCli}
                                                        </div>
                                                        <div style={{ fontSize: '0.75rem', fontWeight: 600, color: '#2563eb', marginBottom: '0.35rem' }}>
                                                            {contacto.CarConCli || 'Contacto General'}
                                                        </div>
                                                    </div>
                                                    <div className="d-flex align-items-center gap-1.5">
                                                        <button
                                                            type="button"
                                                            onClick={() => {
                                                                setContactoEdit(contacto);
                                                                setShowEditarContactoModal(true);
                                                            }}
                                                            className="saas-action-btn"
                                                            title="Editar contacto"
                                                        >
                                                            <Edit3 size={14} />
                                                        </button>
                                                        <ActionDropdown items={contactoActions} />
                                                    </div>
                                                </div>

                                                <div style={{ fontSize: '0.75rem', color: '#475569', display: 'flex', flexDirection: 'column', gap: '0.2rem' }}>
                                                    {contacto.EmaConCli && (
                                                        <div className="d-flex align-items-center gap-1 text-truncate">
                                                            <Mail size={12} style={{ color: '#94a3b8', flexShrink: 0 }} />
                                                            <a href={`mailto:${contacto.EmaConCli}`} style={{ color: 'inherit', textDecoration: 'none' }}>
                                                                {contacto.EmaConCli}
                                                            </a>
                                                        </div>
                                                    )}
                                                    {(contacto.TelCelConCli || contacto.TelFijConCli) && (
                                                        <div className="d-flex align-items-center gap-1">
                                                            <Phone size={12} style={{ color: '#94a3b8', flexShrink: 0 }} />
                                                            <span>
                                                                {[contacto.TelCelConCli, contacto.TelFijConCli].filter(Boolean).join(' • ')}
                                                            </span>
                                                        </div>
                                                    )}
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            </CardSectionStatus>
                        </div>
                    </div>
                </Col>

                {/* Cuentas Bancarias */}
                <Col md={6} lg={4}>
                    <div className="saas-card h-100 d-flex flex-column">
                        <div className="saas-card-header">
                            <div className="d-flex align-items-center gap-2">
                                <div className="saas-icon-badge emerald">
                                    <CreditCard size={16} />
                                </div>
                                <div className="d-flex align-items-center gap-2">
                                    <h3 className="saas-title m-0" style={{ fontSize: '0.95rem' }}>Cuentas Bancarias</h3>
                                    <span className="badge bg-light text-secondary border" style={{ fontSize: '0.7rem' }}>
                                        {(cliente.cuentas_bancarias_activas || []).length}
                                    </span>
                                </div>
                            </div>
                            <button
                                type="button"
                                className="saas-btn-outline"
                                onClick={() => setShowCrearCuentaModal(true)}
                            >
                                <Plus size={13} />
                                <span>Nuevo Banco</span>
                            </button>
                        </div>

                        <div className="saas-card-body flex-grow-1">
                            <CardSectionStatus
                                isEmpty={(cliente.cuentas_bancarias_activas || []).length === 0}
                                emptyIcon={<CreditCard size={28} />}
                                emptyMessage="No hay cuentas bancarias activas registradas."
                                emptyAction={{ label: 'Añadir cuenta bancaria', onClick: () => setShowCrearCuentaModal(true) }}
                            >
                                <div>
                                    {(cliente.cuentas_bancarias_activas || []).map((cue: any, idx: number) => {
                                        const isCopied = copiedKey === cue.NumIBan;
                                        const cuentaActions: ActionItem[] = [
                                            {
                                                label: 'Editar cuenta',
                                                icon: <Edit3 size={13} />,
                                                onClick: () => {
                                                    setCuentaEdit(cue);
                                                    setShowEditarCuentaModal(true);
                                                }
                                            },
                                            {
                                                label: 'Eliminar cuenta',
                                                icon: <Trash2 size={13} />,
                                                onClick: () => handleDeleteCuenta(cue),
                                                isDanger: true
                                            }
                                        ];

                                        return (
                                            <div key={idx} className="saas-bank-card">
                                                <div className="d-flex justify-content-between align-items-start gap-2">
                                                    <div>
                                                        <div className="d-flex align-items-center gap-1">
                                                            <span style={{ fontFamily: 'monospace', fontSize: '0.8125rem', fontWeight: 700, color: '#0f172a' }}>
                                                                {cue.NumIBan}
                                                            </span>
                                                            <button
                                                                type="button"
                                                                onClick={() => handleCopy(cue.NumIBan)}
                                                                className="saas-copy-btn"
                                                                title={isCopied ? '¡Copiado!' : 'Copiar IBAN'}
                                                            >
                                                                {isCopied ? <Check size={12} color="#059669" /> : <Copy size={12} />}
                                                            </button>
                                                        </div>
                                                        <div style={{ fontSize: '0.75rem', color: '#64748b', marginTop: '0.2rem' }}>
                                                            {cue?.ObserCuenBan || 'Sin observaciones'}
                                                        </div>
                                                    </div>

                                                    <div className="d-flex align-items-center gap-1.5">
                                                        <button
                                                            type="button"
                                                            onClick={() => {
                                                                setCuentaEdit(cue);
                                                                setShowEditarCuentaModal(true);
                                                            }}
                                                            className="saas-action-btn"
                                                            title="Editar cuenta"
                                                        >
                                                            <Edit3 size={14} />
                                                        </button>
                                                        <ActionDropdown items={cuentaActions} />
                                                    </div>
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            </CardSectionStatus>
                        </div>
                    </div>
                </Col>

                {/* Documentos */}
                <Col md={12} lg={4}>
                    <div className="saas-card h-100 d-flex flex-column">
                        <div className="saas-card-header">
                            <div className="d-flex align-items-center gap-2">
                                <div className="saas-icon-badge rose">
                                    <FileText size={16} />
                                </div>
                                <div className="d-flex align-items-center gap-2">
                                    <h3 className="saas-title m-0" style={{ fontSize: '0.95rem' }}>Documentación</h3>
                                    <span className="badge bg-light text-secondary border" style={{ fontSize: '0.7rem' }}>
                                        {(cliente.documentos_clientes || []).length}
                                    </span>
                                </div>
                            </div>
                            <button
                                type="button"
                                className="saas-btn-outline"
                                onClick={() => setShowSubirDocumentoModal(true)}
                            >
                                <Plus size={13} />
                                <span>Subir</span>
                            </button>
                        </div>

                        <div className="saas-card-body flex-grow-1">
                            <CardSectionStatus
                                isEmpty={(cliente.documentos_clientes || []).length === 0}
                                emptyIcon={<FileText size={28} />}
                                emptyMessage="No hay archivos ni documentación adjunta."
                                emptyAction={{ label: 'Subir primer documento', onClick: () => setShowSubirDocumentoModal(true) }}
                            >
                                <div>
                                    {(cliente.documentos_clientes || []).map((doc: any) => (
                                        <DocumentoCard
                                            key={doc.id || doc.uuid}
                                            doc={doc}
                                            onDelete={async (uuid) => {
                                                const confirmed = await confirmDestructiveAction({
                                                    title: '¿Eliminar documento?',
                                                    text: 'Esta acción no se puede deshacer.',
                                                    confirmButtonText: 'Sí, eliminar',
                                                });
                                                if (!confirmed) return;
                                                loading.show();
                                                try {
                                                    await axios.delete(route('clientes.documento.destroy', uuid));
                                                    await refreshData();
                                                    notifySuccess('Documento eliminado correctamente.');
                                                } catch (e: any) {
                                                    notifyError(e?.response?.data?.message || 'Error al eliminar el documento.');
                                                } finally {
                                                    loading.hide();
                                                }
                                            }}
                                        />
                                    ))}
                                </div>
                            </CardSectionStatus>
                        </div>
                    </div>
                </Col>
            </Row>

            {/* Modals de Edición y Creación */}
            {showEditarModal && (
                <EditarClienteModal
                    show={showEditarModal}
                    onHide={() => setShowEditarModal(false)}
                    cliente={cliente}
                    onUpdated={async () => {
                        await refreshData();
                    }}
                />
            )}

            {showEditarContactoModal && contactoEdit && (
                <EditarContactoModal
                    show={showEditarContactoModal}
                    onHide={() => setShowEditarContactoModal(false)}
                    contacto={contactoEdit}
                    onUpdated={async (updated) => {
                        loading.show();
                        try {
                            await requestWithInertia('put', route('clientes.contacto.update', updated.CodConCli), updated);
                            await refreshData();
                            setShowEditarContactoModal(false);
                            notifySuccess('Contacto actualizado correctamente.');
                        } catch (e: any) {
                            notifyError(e?.response?.data?.message);
                        } finally {
                            loading.hide();
                        }
                    }}
                />
            )}

            {showEditarCuentaModal && cuentaEdit && (
                <EditarCuentaBancariaModal
                    show={showEditarCuentaModal}
                    onHide={() => setShowEditarCuentaModal(false)}
                    cuenta={cuentaEdit}
                    onUpdated={async (updated) => {
                        loading.show();
                        try {
                            const payload = {
                                NumIBan: updated.NumIBan,
                                ObserCuenBan: updated.ObserCuenBan,
                            };
                            await requestWithInertia('put', route('clientes.cuenta-bancaria.update', updated.CodCueBan), payload);
                            await refreshData();
                            setShowEditarCuentaModal(false);
                            notifySuccess('Cuenta bancaria actualizada correctamente.');
                        } catch (e: any) {
                            notifyError(e?.response?.data?.message);
                        } finally {
                            loading.hide();
                        }
                    }}
                />
            )}

            {showEditarPuntoModal && puntoEdit && (
                <EditarPuntoSuministroModal
                    show={showEditarPuntoModal}
                    onHide={() => setShowEditarPuntoModal(false)}
                    punto={puntoEdit}
                    onUpdated={async () => {
                        loading.show();
                        try {
                            await refreshData();
                            setShowEditarPuntoModal(false);
                        } finally {
                            loading.hide();
                        }
                    }}
                />
            )}

            {showCrearContactoModal && (
                <CrearContactoModal
                    show={showCrearContactoModal}
                    onHide={() => setShowCrearContactoModal(false)}
                    codCli={cliente.CodCli}
                    onCreate={async (payload) => {
                        loading.show();
                        try {
                            await requestWithInertia('post', route('clientes.contacto.store'), payload);
                            await refreshData();
                            setShowCrearContactoModal(false);
                            notifySuccess('Contacto creado correctamente.');
                        } catch (e: any) {
                            notifyError(e?.response?.data?.message || 'Error al crear el contacto.');
                        } finally {
                            loading.hide();
                        }
                    }}
                />
            )}

            {showCrearCuentaModal && (
                <CrearCuentaBancariaModal
                    show={showCrearCuentaModal}
                    onHide={() => setShowCrearCuentaModal(false)}
                    codCli={cliente.CodCli}
                    onCreate={async (payload) => {
                        loading.show();
                        try {
                            await requestWithInertia('post', route('clientes.cuenta-bancaria.store'), payload);
                            await refreshData();
                            setShowCrearCuentaModal(false);
                            notifySuccess('Cuenta bancaria creada correctamente.');
                        } catch (e: any) {
                            notifyError(e?.response?.data?.message || 'Error al crear la cuenta bancaria.');
                        } finally {
                            loading.hide();
                        }
                    }}
                />
            )}

            {showCrearPuntoModal && (
                <CrearPuntoSuministroModal
                    show={showCrearPuntoModal}
                    onHide={() => setShowCrearPuntoModal(false)}
                    codCli={cliente.CodCli}
                    onCreate={async (payload) => {
                        loading.show();
                        try {
                            await requestWithInertia('post', route('puntos-suministro.store'), payload);
                            await refreshData();
                            setShowCrearPuntoModal(false);
                            notifySuccess('Punto de suministro creado correctamente.');
                        } catch (e: any) {
                            notifyError(e?.response?.data?.message || 'Error al crear el punto de suministro.');
                        } finally {
                            loading.hide();
                        }
                    }}
                />
            )}

            {showSubirDocumentoModal && (
                <SubirDocumentoModal
                    show={showSubirDocumentoModal}
                    onHide={() => setShowSubirDocumentoModal(false)}
                    codCli={cliente.CodCli}
                    onUpload={async (formData) => {
                        loading.show();
                        try {
                            await axios.post(route('clientes.documento.store'), formData, {
                                headers: { 'Content-Type': 'multipart/form-data' },
                            });
                            await refreshData();
                            setShowSubirDocumentoModal(false);
                            notifySuccess('Documento subido correctamente.');
                        } catch (e: any) {
                            notifyError(e?.response?.data?.message || 'Error al subir el documento.');
                        } finally {
                            loading.hide();
                        }
                    }}
                />
            )}

            {showCambioTitularModal && puntoCambioTitular && (
                <CambioTitularModal
                    show={showCambioTitularModal}
                    onHide={() => {
                        setShowCambioTitularModal(false);
                        setPuntoCambioTitular(null);
                    }}
                    punto={puntoCambioTitular}
                    clienteActual={cliente as any}
                    onTitularCambiado={async () => {
                        await refreshData();
                    }}
                />
            )}
        </div>
    );
};

export default ClientDetailPanel;