import React, { useState, useRef, useMemo } from "react";
import {
    Card,
    Col,
    Container,
    Row,
    Button,
    Form,
    Modal,
    Table,
    InputGroup,
    ProgressBar,
} from "react-bootstrap";
import { Head, router, useForm, usePage } from "@inertiajs/react";
import { FileText, Pencil, Plus, X, User, MapPin, Users } from "lucide-react";
import BreadCrumb from "../../../Components/Common/BreadCrumb";
import Layout from "../../../Layouts";
import Swal from 'sweetalert2';
import axios from 'axios';
import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';
import { Cliente, Localidad } from "../Contratos/Interfaces/Interfaces";
import {
    CONTACTO_DETALLE_DOC_MAX_BYTES,
    PROPUESTA_DOC_ACCEPT,
    PROPUESTA_DOC_FORMATOS_TEXTO,
    isPropuestaDocumentFileAllowed,
} from "../../../utils/propuestaDocumentFileRules";
import estilosFoco from '../Contratos/Shared/estilosFocoAccesible.module.css';
import { EneonTabs } from '../Shared/Tabs';
import type { EneonTabDefinition } from '../Shared/Tabs';

type TabType = 'datos' | 'direccion' | 'documentos' | 'clientes';

interface Documento {
    id?: number;
    CodDetDocCon?: number;
    nombreDocumento: string;
    tipoDocumento: string;
    TipDoc?: string;
    observaciones?: string;
    obsDocumento?: string;
    creado?: string;
    ultimaActualizacion?: string;
    file_ext?: string;
    download_url?: string;
}

function apiRowToDocumento(r: Record<string, unknown>): Documento {
    const cod = r.CodDetDocCon != null && r.CodDetDocCon !== '' ? Number(r.CodDetDocCon) : undefined;
    return {
        id: cod,
        CodDetDocCon: cod,
        nombreDocumento: String(r.nombreDocumento ?? ''),
        tipoDocumento: String(r.tipoDocumento ?? r.TipDoc ?? ''),
        TipDoc: String(r.TipDoc ?? r.tipoDocumento ?? ''),
        observaciones: String(r.observaciones ?? r.obsDocumento ?? ''),
        obsDocumento: String(r.obsDocumento ?? ''),
        creado: String(r.creado ?? ''),
        ultimaActualizacion: String(r.ultimaActualizacion ?? ''),
        file_ext: String(r.file_ext ?? ''),
        download_url: r.download_url != null ? String(r.download_url) : undefined,
    };
}

interface ClienteAsociado {
    CodDetCliCont?: number;
    CodCli: number;
    NIF: string;
    RazSocCli: string;
    EsRepresentanteLegal: boolean;
    TipoRepresentacion: string;
    Firmantes: number;
    FacultadEscrituras: boolean;
    EsColaborador: boolean;
    EsPrescriptor: boolean;
}

function apiRowToClienteAsociado(r: Record<string, unknown>): ClienteAsociado {
    return {
        CodDetCliCont:
            r.CodDetCliCont != null && r.CodDetCliCont !== ''
                ? Number(r.CodDetCliCont)
                : undefined,
        CodCli: Number(r.CodCli) || 0,
        NIF: String(r.NIF ?? ''),
        RazSocCli: String(r.RazSocCli ?? ''),
        EsRepresentanteLegal: Boolean(r.EsRepLeg),
        TipoRepresentacion: String(r.TipoRepresentacion ?? r.TipRepr ?? ''),
        Firmantes: Number(r.CanMinRep ?? 1),
        FacultadEscrituras: Boolean(r.TieFacEsc),
        EsColaborador: Boolean(r.EsColaborador),
        EsPrescriptor: Boolean(r.EsPrescritor),
    };
}

/** Filtro Typeahead: razón social, nombre comercial o NIF/CIF (como en contrato multi-punto). */
function filterClienteByRazonONif(option: unknown, state: { text: string }): boolean {
    const raw = (state.text || '').toLowerCase().trim();
    if (!raw) return true;
    const c = option as Cliente;
    const razon = (c.RazSocCli || '').toLowerCase();
    const nom = (c.NomComCli || '').toLowerCase();
    const nif = (c.NumCifCli || '').toLowerCase().replace(/\s/g, '');
    const qNif = raw.replace(/\s/g, '');
    return razon.includes(raw) || nom.includes(raw) || nif.includes(qNif);
}

const defaultFormState = {
    CodConCli: '' as number | '',
    NomConCli: '',
    NumColegiado: '',
    NumComercialAudax: '',
    NumComercialAdx: '',
    NIFConCli: '',
    CarConCli: '',
    TelFijConCli: '',
    TelCelConCli: '',
    RecibeCorreoMasivo: false,
    NumIBAN: '',
    EmaConCli: '',
    TelPersonal: '',
    EmaPersonal: '',
    Observaciones: '',
    CodTipVia: '',
    NomVia: '',
    NumVia: '',
    Bloque: '',
    Escalera: '',
    Planta: '',
    Puerta: '',
    CodigoPostal: '',
    Provincia: '',
    Localidad: '',
    CodLoc: '',
    CodPro: '',
};

type ContactoFormState = typeof defaultFormState;

/** Claves Laravel / request → claves del `useForm` (mismo criterio que `getStorePayload`). */
const CONTACTO_SERVER_TO_FORM: Partial<Record<string, keyof ContactoFormState>> = {
    ObsConC: 'Observaciones',
    iban: 'NumIBAN',
    CodTipViaFis: 'CodTipVia',
    NomViaDomFis: 'NomVia',
    NumViaDomFis: 'NumVia',
    CPLocFis: 'CodigoPostal',
    CodLocFis: 'CodLoc',
    BloPunSum: 'Bloque',
    EscPunSum: 'Escalera',
    PlaPunSum: 'Planta',
    PuePunSum: 'Puerta',
    NumColeCon: 'NumColegiado',
    nrcomercialacreditado: 'NumComercialAudax',
    nrcomercialacreditadoadx: 'NumComercialAdx',
};

const CONTACTO_DATOS_FIELD_LIST: (keyof ContactoFormState)[] = [
    'NomConCli',
    'NumColegiado',
    'NumComercialAudax',
    'NumComercialAdx',
    'NIFConCli',
    'CarConCli',
    'TelFijConCli',
    'TelCelConCli',
    'TelPersonal',
    'RecibeCorreoMasivo',
    'NumIBAN',
    'EmaConCli',
    'EmaPersonal',
    'Observaciones',
];

function contactoFirstServerMessage(val: unknown): string {
    if (val == null) return '';
    if (Array.isArray(val)) return String(val[0] ?? '');
    return String(val);
}

function normalizeContactoServerErrors(raw: Record<string, unknown>): Partial<Record<keyof ContactoFormState, string>> {
    const formKeys = new Set(Object.keys(defaultFormState) as (keyof ContactoFormState)[]);
    const out: Partial<Record<keyof ContactoFormState, string>> = {};
    for (const [serverKey, val] of Object.entries(raw)) {
        const mapped =
            CONTACTO_SERVER_TO_FORM[serverKey] ??
            (formKeys.has(serverKey as keyof ContactoFormState) ? (serverKey as keyof ContactoFormState) : null);
        if (!mapped) continue;
        const msg = contactoFirstServerMessage(val).trim();
        if (!msg) continue;
        const prev = out[mapped];
        out[mapped] = prev ? `${prev} ${msg}` : msg;
    }
    return out;
}

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function normalizeIbanInput(val: string): string {
    return (val || '').replace(/\s/g, '');
}

/** Alineado con `StoreContactoRequest` / `UpdateContactoRequest` (obligatorios y reglas básicas). */
function validateContactoClient(d: ContactoFormState): Partial<Record<keyof ContactoFormState, string>> {
    const e: Partial<Record<keyof ContactoFormState, string>> = {};
    if (!(d.NomConCli || '').trim()) e.NomConCli = 'El nombre del contacto es obligatorio.';
    if (!(d.CarConCli || '').trim()) e.CarConCli = 'El cargo es obligatorio.';
    if (!(d.TelFijConCli || '').trim()) e.TelFijConCli = 'El teléfono fijo es obligatorio.';
    if (!(d.TelCelConCli || '').trim()) e.TelCelConCli = 'El teléfono móvil es obligatorio.';
    if (!(d.TelPersonal || '').trim()) e.TelPersonal = 'El teléfono personal es obligatorio.';
    const em = (d.EmaConCli || '').trim();
    if (!em) e.EmaConCli = 'El email es obligatorio.';
    else if (!EMAIL_RE.test(em)) e.EmaConCli = 'El correo electrónico no es válido.';
    const emp = (d.EmaPersonal || '').trim();
    if (emp && !EMAIL_RE.test(emp)) e.EmaPersonal = 'El correo electrónico no es válido.';
    if ((d.Observaciones || '').length > 200) e.Observaciones = 'Las observaciones no pueden superar 200 caracteres.';
    const iban = normalizeIbanInput(d.NumIBAN || '');
    if (iban.length > 34) e.NumIBAN = 'El IBAN no puede superar 34 caracteres.';
    if (!String(d.CodTipVia ?? '').trim()) e.CodTipVia = 'El tipo de vía es obligatorio.';
    if (!(d.NomVia || '').trim()) e.NomVia = 'El nombre de la vía es obligatorio.';
    if (!(d.NumVia || '').trim()) e.NumVia = 'El número de la vía es obligatorio.';
    if (!(d.CodigoPostal || '').trim()) e.CodigoPostal = 'El código postal es obligatorio.';
    const codLocN = d.CodLoc !== '' && d.CodLoc != null ? Number(d.CodLoc) : NaN;
    if (!d.CodLoc || Number.isNaN(codLocN)) e.CodLoc = 'La localidad es obligatoria.';
    return e;
}

function firstContactoTabWithErrors(err: Partial<Record<keyof ContactoFormState, string>>): TabType {
    const keys = Object.keys(err) as (keyof ContactoFormState)[];
    const datos = new Set(CONTACTO_DATOS_FIELD_LIST as readonly string[]);
    if (keys.some((k) => datos.has(k as string))) return 'datos';
    return 'direccion';
}

interface CrearContactoProps {
    /** En crear: solo se muestran Datos y Dirección. En editar: también Documentos y Clientes. */
    isEditMode?: boolean;
    /** Datos iniciales para edición (contacto cargado por CodConCli). */
    initialData?: typeof defaultFormState;
    /** Localidades para el formulario (override cuando se usa desde EditarContacto). */
    localidadesOverride?: Localidad[];
    /** Clientes activos para el modal Asignar (override en edición, mismo origen que crear). */
    clientesOverride?: Cliente[];
    /** Localidad preseleccionada (join CodLocFis + provincia al editar). */
    initialLocalidad?: Localidad;
    /** Filas iniciales T_ContactoDetalleCliente (pantalla editar). */
    contactoDetalleClientesOverride?: Record<string, unknown>[];
    /** Filas iniciales T_DetalleDocumentosContactos (pantalla editar). */
    contactoDetalleDocumentosOverride?: Record<string, unknown>[];
}

const CrearContacto = ({
    isEditMode = false,
    initialData,
    localidadesOverride,
    clientesOverride,
    contactoDetalleClientesOverride,
    contactoDetalleDocumentosOverride,
    initialLocalidad,
}: CrearContactoProps) => {
    const pageProps = usePage().props as any;
    const flash = pageProps?.flash as { error?: string; message?: string; type?: string } | undefined;
    const localidadesProp = localidadesOverride ?? pageProps?.localidades ?? [];
    const [activeTab, setActiveTab] = useState<TabType>('datos');
    const [showDocumentoModal, setShowDocumentoModal] = useState(false);
    const [showClienteModal, setShowClienteModal] = useState(false);
    const [documentos, setDocumentos] = useState<Documento[]>(() => {
        const raw = contactoDetalleDocumentosOverride ?? pageProps?.contactoDetalleDocumentos;
        return Array.isArray(raw)
            ? raw.map((x) => apiRowToDocumento(x as Record<string, unknown>))
            : [];
    });
    const [filtroDocumentos, setFiltroDocumentos] = useState('');
    const [modalDocumentoModo, setModalDocumentoModo] = useState<'crear' | 'editar'>('crear');
    const [editingDocId, setEditingDocId] = useState<number | null>(null);
    const [uploadProgress, setUploadProgress] = useState<number | null>(null);
    const [documentoUploading, setDocumentoUploading] = useState(false);
    const [clientesAsociados, setClientesAsociados] = useState<ClienteAsociado[]>(() => {
        const raw = contactoDetalleClientesOverride ?? pageProps?.contactoDetalleClientes;
        return Array.isArray(raw)
            ? raw.map((x) => apiRowToClienteAsociado(x as Record<string, unknown>))
            : [];
    });
    const [filtroClientes, setFiltroClientes] = useState('');
    const [modalClienteModo, setModalClienteModo] = useState<'crear' | 'editar'>('crear');
    const disparadorModalDocumentoRef = useRef<HTMLElement | null>(null);
    const disparadorModalClienteRef = useRef<HTMLElement | null>(null);

    const restaurarFocoModal = (elemento: HTMLElement | null): void => {
        if (elemento && typeof elemento.focus === 'function') {
            requestAnimationFrame(() => elemento.focus());
        }
    };

    const [editingCodDet, setEditingCodDet] = useState<number | null>(null);
    const [editingRowSnapshot, setEditingRowSnapshot] = useState<ClienteAsociado | null>(null);
    const [tiposVia, setTiposVia] = useState<{ CodTipVia: number; DesTipVia: string; IniTipVia: string }[]>([]);
    const localidades = Array.isArray(localidadesProp) ? localidadesProp : [];
    const [selectedLocalidad, setSelectedLocalidad] = useState<Localidad[]>([]);
    const fileInputRef = useRef<HTMLInputElement>(null);

    // Form data para Datos Contactos (inicializado con initialData en edición)
    const { data, setData, errors, clearErrors, setError } = useForm({
        ...defaultFormState,
        ...(initialData || {}),
    });

    // Mostrar error del servidor cuando redirige de vuelta (ej. tenant no disponible, error de BD)
    React.useEffect(() => {
        if (flash?.error || (flash?.type === 'error' && flash?.message)) {
            Swal.fire({
                title: 'Error',
                text: flash.error || flash.message || 'No se pudo guardar el contacto.',
                icon: 'error',
                showConfirmButton: true,
            });
        }
    }, [flash?.error, flash?.message, flash?.type]);

    // Form data para modal de documento
    const [documentoForm, setDocumentoForm] = useState({
        tipoDocumento: '',
        nombreDocumento: '',
        archivo: null as File | null,
        observaciones: '',
    });

    /** Catálogo de clientes activos (override en edición o props de la página en crear). */
    const clientesProp = clientesOverride ?? pageProps?.clientes ?? [];
    const clientesCatalogo: Cliente[] = Array.isArray(clientesProp) ? clientesProp : [];
    /** Selección en el modal "Asignar Cliente" (Typeahead). */
    const [selectedClienteModal, setSelectedClienteModal] = useState<Cliente[]>([]);

    // Form data para modal de cliente
    const [clienteForm, setClienteForm] = useState({
        esRepresentanteLegal: '',
        tipoRepresentacion: '',
        firmantes: '1',
        facultadEscrituras: '',
        esColaborador: '',
        esPrescriptor: '',
    });

    const codConCliActual = Number((data as any).CodConCli ?? initialData?.CodConCli ?? 0);

    const reloadDetalleClientes = React.useCallback(async () => {
        if (!codConCliActual) return;
        try {
            const url = (route as (n: string, p: object) => string)('contactos.detalle-clientes.index', {
                id: codConCliActual,
            });
            const { data: body } = await axios.get<{ success?: boolean; data?: Record<string, unknown>[] }>(url);
            if (body?.success && Array.isArray(body.data)) {
                setClientesAsociados(body.data.map((x) => apiRowToClienteAsociado(x)));
            }
        } catch (e) {
            console.error(e);
        }
    }, [codConCliActual]);

    React.useEffect(() => {
        if (!(isEditMode || Boolean(initialData?.CodConCli)) || activeTab !== 'clientes') return;
        if (codConCliActual) {
            void reloadDetalleClientes();
        }
    }, [activeTab, isEditMode, initialData?.CodConCli, codConCliActual, reloadDetalleClientes]);

    const reloadDetalleDocumentos = React.useCallback(async () => {
        if (!codConCliActual) return;
        try {
            const url = (route as (n: string, p: object) => string)('contactos.detalle-documentos.index', {
                id: codConCliActual,
            });
            const { data: body } = await axios.get<{ success?: boolean; data?: Record<string, unknown>[] }>(url);
            if (body?.success && Array.isArray(body.data)) {
                setDocumentos(body.data.map((x) => apiRowToDocumento(x)));
            }
        } catch (e) {
            console.error(e);
        }
    }, [codConCliActual]);

    React.useEffect(() => {
        if (!(isEditMode || Boolean(initialData?.CodConCli)) || activeTab !== 'documentos') return;
        if (codConCliActual) {
            void reloadDetalleDocumentos();
        }
    }, [activeTab, isEditMode, initialData?.CodConCli, codConCliActual, reloadDetalleDocumentos]);

    // Edición: Typeahead de localidad desde CodLocFis + provincia o desde la lista
    React.useEffect(() => {
        if (initialLocalidad?.CodLoc != null) {
            setSelectedLocalidad([initialLocalidad]);
            return;
        }
        const cod = initialData?.CodLoc;
        if (!cod || !localidades.length) return;
        const n = Number(cod);
        const found = localidades.find((l: Localidad) => Number(l.CodLoc) === n);
        if (found) {
            setSelectedLocalidad([found]);
        }
    }, [initialLocalidad?.CodLoc, initialData?.CodLoc, localidades]);

    // Cargar tipos de vía
    React.useEffect(() => {
        axios.get(route('tipo-via.listar') as unknown as string)
            .then(res => {
                const data = res.data?.data || [];
                const uniqueTiposVia = data.filter((tv: any, index: number, self: any[]) =>
                    index === self.findIndex((t) => t.CodTipVia === tv.CodTipVia)
                );
                setTiposVia(uniqueTiposVia);
            })
            .catch(() => {});
    }, []);

    // Las localidades vienen desde props, no necesitamos cargarlas

    const handleTextChange = (field: string) => (
        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
    ) => {
        setData(field, e.target.value);
        if ((errors as any)?.[field]) {
            clearErrors(field);
        }
        const dirErrMap: Record<string, string> = {
            Bloque: 'BloPunSum',
            Escalera: 'EscPunSum',
            Planta: 'PlaPunSum',
            Puerta: 'PuePunSum',
        };
        const backendKey = dirErrMap[field];
        if (backendKey && (errors as any)?.[backendKey]) {
            clearErrors(backendKey as keyof typeof data);
        }
    };

    const handleSelectChange = (field: string) => (
        e: React.ChangeEvent<HTMLSelectElement>
    ) => {
        setData(field, e.target.value);
        if ((errors as any)?.[field]) {
            clearErrors(field);
        }
    };

    const handleCheckboxChange = (field: string) => (
        e: React.ChangeEvent<HTMLInputElement>
    ) => {
        setData(field, e.target.checked);
    };

    // Manejo de dirección con Typeahead
    const handleLocalidadChange = (selected: Localidad[]) => {
        setSelectedLocalidad(selected);
        if (selected.length > 0) {
            const loc = selected[0];
            setData({
                ...data,
                CodigoPostal: loc.CPLoc,
                Localidad: loc.DesLoc,
                Provincia: loc.provincia?.DesPro || '',
                CodLoc: loc.CodLoc,
                CodPro: loc.CodPro,
            });
        } else {
            setData({
                ...data,
                CodigoPostal: '',
                Localidad: '',
                Provincia: '',
                CodLoc: '',
                CodPro: '',
            });
        }
        clearErrors('CodigoPostal', 'CodLoc', 'Localidad', 'Provincia');
    };

    // Modal de Documentos (T_DetalleDocumentosContactos)
    const handleAgregarDocumento = () => {
        setModalDocumentoModo('crear');
        setEditingDocId(null);
        setDocumentoForm({
            tipoDocumento: '',
            nombreDocumento: '',
            archivo: null,
            observaciones: '',
        });
        setUploadProgress(null);
        setShowDocumentoModal(true);
    };

    const handleEditarDocumento = (doc: Documento) => {
        const id = doc.CodDetDocCon ?? doc.id;
        if (id == null) return;
        setModalDocumentoModo('editar');
        setEditingDocId(id);
        setDocumentoForm({
            tipoDocumento: doc.TipDoc || doc.tipoDocumento || '',
            nombreDocumento: doc.nombreDocumento || '',
            archivo: null,
            observaciones: doc.observaciones || doc.obsDocumento || '',
        });
        setUploadProgress(null);
        setShowDocumentoModal(true);
        if (fileInputRef.current) fileInputRef.current.value = '';
    };

    const handleEliminarDocumento = (doc: Documento) => {
        const id = doc.CodDetDocCon ?? doc.id;
        if (id == null || !codConCliActual) return;
        void Swal.fire({
            title: '¿Eliminar documento?',
            text: 'Se borrará el registro y el archivo asociado.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar',
        }).then(async (r) => {
            if (!r.isConfirmed) return;
            try {
                const url = (route as (n: string, p: object) => string)('contactos.detalle-documentos.destroy', {
                    id: codConCliActual,
                    codDet: id,
                });
                const { data: body } = await axios.delete<{ success?: boolean; message?: string }>(url);
                if (body?.success) {
                    await reloadDetalleDocumentos();
                    Swal.fire({ title: 'Eliminado', icon: 'success', timer: 1500, showConfirmButton: false });
                } else {
                    Swal.fire({ title: 'Error', text: body?.message || 'No se pudo eliminar', icon: 'error' });
                }
            } catch (e: unknown) {
                const msg = axios.isAxiosError(e) ? String(e.response?.data?.message ?? e.message) : 'Error de red';
                Swal.fire({ title: 'Error', text: msg, icon: 'error' });
            }
        });
    };

    /** Descarga con sesión (blob); evita abrir pestaña vacía si el servidor envía el fichero con Content-Disposition. */
    const descargarDocumentoContacto = async (doc: Documento) => {
        if (!doc.download_url) return;
        const nombreBase =
            (doc.nombreDocumento && doc.nombreDocumento.trim()) ||
            `documento${doc.file_ext ? '.' + String(doc.file_ext).replace(/^\./, '') : ''}`;
        try {
            const res = await axios.get(doc.download_url, {
                responseType: 'blob',
                withCredentials: true,
            });
            const disposition = res.headers['content-disposition'] as string | undefined;
            let filename = nombreBase;
            const quoted = disposition?.match(/filename\*=UTF-8''([^;\s]+)/i);
            const plain = disposition?.match(/filename="?([^";\n]+)"?/i);
            if (quoted?.[1]) {
                try {
                    filename = decodeURIComponent(quoted[1]);
                } catch {
                    filename = nombreBase;
                }
            } else if (plain?.[1]) {
                filename = plain[1].trim();
            }
            const blobUrl = window.URL.createObjectURL(res.data);
            const a = document.createElement('a');
            a.href = blobUrl;
            a.download = filename;
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            window.URL.revokeObjectURL(blobUrl);
        } catch {
            window.location.assign(doc.download_url);
        }
    };

    const handleGuardarDocumento = async () => {
        if (!codConCliActual) {
            Swal.fire({
                title: 'Atención',
                text: 'Guarde el contacto primero para poder adjuntar documentos.',
                icon: 'info',
            });
            return;
        }

        if (!documentoForm.tipoDocumento) {
            Swal.fire({
                title: 'Error',
                text: 'El tipo de documento es requerido',
                icon: 'error',
                timer: 2000,
                showConfirmButton: false,
            });
            return;
        }

        if (modalDocumentoModo === 'crear' && !documentoForm.archivo) {
            Swal.fire({
                title: 'Error',
                text: 'Debe seleccionar un archivo',
                icon: 'error',
                timer: 2000,
                showConfirmButton: false,
            });
            return;
        }

        if (modalDocumentoModo === 'editar' && editingDocId == null) {
            return;
        }

        const formData = new FormData();
        formData.append('TipDoc', documentoForm.tipoDocumento);
        formData.append('obsDocumento', documentoForm.observaciones || '');
        if (documentoForm.nombreDocumento.trim()) {
            formData.append('nombreDocumento', documentoForm.nombreDocumento.trim());
        }
        if (documentoForm.archivo) {
            formData.append('file', documentoForm.archivo);
        }

        setDocumentoUploading(true);
        setUploadProgress(0);

        try {
            if (modalDocumentoModo === 'crear') {
                const storeUrl = (route as (n: string, p: object) => string)('contactos.detalle-documentos.store', {
                    id: codConCliActual,
                });
                const { data: body } = await axios.post<{ success?: boolean; message?: string }>(storeUrl, formData, {
                    onUploadProgress: (ev) => {
                        if (ev.total) {
                            setUploadProgress(Math.round((ev.loaded * 100) / ev.total));
                        }
                    },
                });
                if (body?.success) {
                    await reloadDetalleDocumentos();
                    setShowDocumentoModal(false);
                    setDocumentoForm({
                        tipoDocumento: '',
                        nombreDocumento: '',
                        archivo: null,
                        observaciones: '',
                    });
                    if (fileInputRef.current) fileInputRef.current.value = '';
                    Swal.fire({ title: 'Documento registrado', icon: 'success', timer: 1500, showConfirmButton: false });
                } else {
                    Swal.fire({ title: 'Error', text: body?.message || 'No se pudo guardar', icon: 'error' });
                }
            } else if (editingDocId != null) {
                const updateUrl = (route as (n: string, p: object) => string)('contactos.detalle-documentos.update', {
                    id: codConCliActual,
                    codDet: editingDocId,
                });
                const { data: body } = await axios.post<{ success?: boolean; message?: string }>(updateUrl, formData, {
                    onUploadProgress: (ev) => {
                        if (documentoForm.archivo && ev.total) {
                            setUploadProgress(Math.round((ev.loaded * 100) / ev.total));
                        } else {
                            setUploadProgress(100);
                        }
                    },
                });
                if (body?.success) {
                    await reloadDetalleDocumentos();
                    setShowDocumentoModal(false);
                    setEditingDocId(null);
                    setDocumentoForm({
                        tipoDocumento: '',
                        nombreDocumento: '',
                        archivo: null,
                        observaciones: '',
                    });
                    if (fileInputRef.current) fileInputRef.current.value = '';
                    Swal.fire({ title: 'Documento actualizado', icon: 'success', timer: 1500, showConfirmButton: false });
                } else {
                    Swal.fire({ title: 'Error', text: body?.message || 'No se pudo actualizar', icon: 'error' });
                }
            }
        } catch (e: unknown) {
            const err = axios.isAxiosError(e);
            const data = err ? (e.response?.data as { message?: string; errors?: Record<string, string[]> }) : undefined;
            const firstVal =
                data?.errors && typeof data.errors === 'object'
                    ? Object.values(data.errors).flat()[0]
                    : undefined;
            const msg = firstVal || data?.message || (err ? e.message : 'Error de red');
            Swal.fire({ title: 'Error', text: String(msg), icon: 'error' });
        } finally {
            setDocumentoUploading(false);
            setUploadProgress(null);
        }
    };

    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const f = e.target.files?.[0];
        if (!f) return;
        if (!isPropuestaDocumentFileAllowed(f)) {
            Swal.fire({
                title: 'Tipo de archivo no permitido',
                text: `Formatos permitidos: ${PROPUESTA_DOC_FORMATOS_TEXTO}`,
                icon: 'warning',
            });
            e.target.value = '';
            return;
        }
        if (f.size > CONTACTO_DETALLE_DOC_MAX_BYTES) {
            Swal.fire({
                title: 'Archivo demasiado grande',
                text: 'El tamaño máximo permitido es 20 MB.',
                icon: 'warning',
            });
            e.target.value = '';
            return;
        }
        setDocumentoForm((prev) => ({
            ...prev,
            archivo: f,
        }));
    };

    // Modal de Clientes (T_ContactoDetalleCliente)
    const buildPayloadDetalleCliente = () => ({
        EsRepLeg: clienteForm.esRepresentanteLegal === 'Si',
        TipRepr: clienteForm.tipoRepresentacion,
        CanMinRep: Math.max(1, parseInt(clienteForm.firmantes, 10) || 1),
        TieFacEsc: clienteForm.facultadEscrituras === 'Si',
        EsColaborador: clienteForm.esColaborador === 'Si',
        EsPrescritor: clienteForm.esPrescriptor === 'Si',
    });

    const handleAsociarCliente = () => {
        if (!codConCliActual) {
            Swal.fire({
                title: 'Atención',
                text: 'Guarde el contacto primero para poder asociar clientes.',
                icon: 'info',
            });
            return;
        }
        setModalClienteModo('crear');
        setEditingCodDet(null);
        setEditingRowSnapshot(null);
        setSelectedClienteModal([]);
        setClienteForm({
            esRepresentanteLegal: '',
            tipoRepresentacion: '',
            firmantes: '1',
            facultadEscrituras: '',
            esColaborador: '',
            esPrescriptor: '',
        });
        setShowClienteModal(true);
    };

    const handleEditarClienteAsociado = (row: ClienteAsociado) => {
        if (!row.CodDetCliCont) return;
        setModalClienteModo('editar');
        setEditingRowSnapshot(row);
        setEditingCodDet(row.CodDetCliCont);
        setClienteForm({
            esRepresentanteLegal: row.EsRepresentanteLegal ? 'Si' : 'No',
            tipoRepresentacion: row.TipoRepresentacion || '',
            firmantes: String(row.Firmantes ?? 1),
            facultadEscrituras: row.FacultadEscrituras ? 'Si' : 'No',
            esColaborador: row.EsColaborador ? 'Si' : 'No',
            esPrescriptor: row.EsPrescriptor ? 'Si' : 'No',
        });
        const c = clientesCatalogo.find((x) => Number(x.CodCli) === Number(row.CodCli));
        setSelectedClienteModal(c ? [c] : []);
        setShowClienteModal(true);
    };

    const handleEliminarClienteAsociado = (row: ClienteAsociado) => {
        if (!row.CodDetCliCont || !codConCliActual) return;
        Swal.fire({
            title: '¿Desvincular cliente?',
            text: 'Se eliminará la relación entre este contacto y el cliente.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, desvincular',
            cancelButtonText: 'Cancelar',
        }).then(async (result) => {
            if (!result.isConfirmed) return;
            try {
                const url = (route as (n: string, p: object) => string)('contactos.detalle-clientes.destroy', {
                    id: codConCliActual,
                    codDet: row.CodDetCliCont,
                });
                await axios.delete(url);
                await reloadDetalleClientes();
                Swal.fire({ title: 'Desvinculado', icon: 'success', timer: 1500, showConfirmButton: false });
            } catch (e: any) {
                const msg = e?.response?.data?.message || 'No se pudo desvincular';
                Swal.fire({ title: 'Error', text: msg, icon: 'error' });
            }
        });
    };

    const handleGuardarCliente = async () => {
        const idContacto = Number((data as any).CodConCli ?? initialData?.CodConCli);
        if (!idContacto) {
            Swal.fire({
                title: 'Error',
                text: 'No hay contacto guardado. Guarde el contacto antes de asociar clientes.',
                icon: 'error',
            });
            return;
        }

        if (modalClienteModo === 'crear') {
            const sel = selectedClienteModal[0];
            if (!sel) {
                Swal.fire({
                    title: 'Error',
                    text: 'Debe seleccionar un cliente (razón social o NIF/CIF)',
                    icon: 'error',
                    timer: 2000,
                    showConfirmButton: false,
                });
                return;
            }
        }

        if (!clienteForm.esRepresentanteLegal) {
            Swal.fire({
                title: 'Error',
                text: 'Debe indicar si es representante legal',
                icon: 'error',
                timer: 2000,
                showConfirmButton: false,
            });
            return;
        }

        if (!clienteForm.tipoRepresentacion) {
            Swal.fire({
                title: 'Error',
                text: 'El tipo de representación es requerido',
                icon: 'error',
                timer: 2000,
                showConfirmButton: false,
            });
            return;
        }

        const payload = buildPayloadDetalleCliente();

        try {
            if (modalClienteModo === 'crear') {
                const sel = selectedClienteModal[0]!;
                const url = (route as (n: string, p: object) => string)('contactos.detalle-clientes.store', {
                    id: idContacto,
                });
                await axios.post(url, {
                    CodCli: sel.CodCli,
                    ...payload,
                });
            } else if (modalClienteModo === 'editar' && editingCodDet) {
                const url = (route as (n: string, p: object) => string)('contactos.detalle-clientes.update', {
                    id: idContacto,
                    codDet: editingCodDet,
                });
                await axios.put(url, payload);
            }
            await reloadDetalleClientes();
            setShowClienteModal(false);
            setSelectedClienteModal([]);
            setEditingCodDet(null);
            setEditingRowSnapshot(null);
            setModalClienteModo('crear');
            setClienteForm({
                esRepresentanteLegal: '',
                tipoRepresentacion: '',
                firmantes: '1',
                facultadEscrituras: '',
                esColaborador: '',
                esPrescriptor: '',
            });
            Swal.fire({
                title: 'Guardado',
                icon: 'success',
                timer: 1500,
                showConfirmButton: false,
            });
        } catch (e: any) {
            const msg =
                e?.response?.data?.message ||
                (e?.response?.data?.errors && JSON.stringify(e.response.data.errors)) ||
                'No se pudo guardar';
            Swal.fire({ title: 'Error', text: msg, icon: 'error' });
        }
    };

    const handleVolver = () => {
        router.visit(route('contactos.index'));
    };

    /** Normaliza IBAN quitando espacios. */
    const normalizeIban = (val: string) => (val || '').replace(/\s/g, '');

    /** Payload para StoreContactoRequest (datos básicos + dirección). */
    const getStorePayload = () => ({
        NomConCli: data.NomConCli || '',
        NumColeCon: (data.NumColegiado || '').trim() || null,
        nrcomercialacreditado: (data.NumComercialAudax || '').trim() || null,
        nrcomercialacreditadoadx: (data.NumComercialAdx || '').trim() || null,
        recibe_correo_masivo: Boolean(data.RecibeCorreoMasivo),
        NIFConCli: data.NIFConCli || '',
        CarConCli: data.CarConCli || '',
        TelFijConCli: data.TelFijConCli || '',
        TelCelConCli: data.TelCelConCli || '',
        TelPersonal: data.TelPersonal || '',
        EmaConCli: data.EmaConCli || '',
        EmaPersonal: (data.EmaPersonal || '').trim() || null,
        ObsConC: (() => {
            const t = (data.Observaciones || '').trim().slice(0, 200);
            return t === '' ? null : t;
        })(),
        iban: normalizeIban(data.NumIBAN || '') || null,
        CodTipViaFis: data.CodTipVia ? Number(data.CodTipVia) : null,
        NomViaDomFis: data.NomVia || '',
        NumViaDomFis: data.NumVia || '',
        BloPunSum: data.Bloque || '',
        EscPunSum: data.Escalera || '',
        PlaPunSum: data.Planta || '',
        PuePunSum: data.Puerta || '',
        CodLocFis: data.CodLoc ? Number(data.CodLoc) : null,
        CPLocFis: data.CodigoPostal || '',
    });

    const isEdit = Boolean(initialData && (initialData.CodConCli || (data as any).CodConCli));
    const contactoId = (data as any).CodConCli || initialData?.CodConCli;

    const handleGuardar = () => {
        clearErrors();
        const clientErrs = validateContactoClient(data as ContactoFormState);
        if (Object.keys(clientErrs).length > 0) {
            setError(clientErrs as Record<string, string>);
            setActiveTab(firstContactoTabWithErrors(clientErrs));
            Swal.fire({
                title: 'Faltan datos obligatorios',
                text: Object.values(clientErrs).join('\n'),
                icon: 'warning',
                confirmButtonText: 'Entendido',
            });
            return;
        }
        const payload = getStorePayload();
        const onError = (serverErrors: Record<string, string | string[]>) => {
            const mapped = normalizeContactoServerErrors(serverErrors as Record<string, unknown>);
            clearErrors();
            if (Object.keys(mapped).length > 0) {
                setError(mapped as Record<string, string>);
                setActiveTab(firstContactoTabWithErrors(mapped));
            }
            Swal.fire({
                title: 'No se pudo guardar',
                text: 'Revise los campos marcados en rojo.',
                icon: 'error',
                showConfirmButton: true,
            });
        };
        if (isEdit && contactoId) {
            const updateUrl = (() => { try { return (route as (n: string, p?: object) => string)('contactos.update', { id: contactoId }); } catch { return `/contactos/${contactoId}`; } })();
            router.put(updateUrl, payload, { preserveScroll: true, onError });
        } else {
            const storeUrl = (() => { try { return (route as (n: string) => string)('contactos.store'); } catch { return '/contactos'; } })();
            router.post(storeUrl, payload, { preserveScroll: true, onError });
        }
    };

    const qFiltroCli = filtroClientes.toLowerCase().trim();
    const clientesFiltrados = clientesAsociados.filter((cliente) => {
        if (!qFiltroCli) return true;
        const blob = [
            String(cliente.CodCli),
            cliente.NIF,
            cliente.RazSocCli,
            cliente.TipoRepresentacion,
            String(cliente.Firmantes),
            cliente.EsRepresentanteLegal ? 'sí si representante' : 'no',
            cliente.FacultadEscrituras ? 'escrituras' : '',
            cliente.EsColaborador ? 'colaborador' : '',
            cliente.EsPrescriptor ? 'prescriptor' : '',
        ]
            .join(' ')
            .toLowerCase();
        return blob.includes(qFiltroCli);
    });

    const qFiltroDoc = filtroDocumentos.toLowerCase().trim();
    const documentosFiltrados = documentos.filter((doc) => {
        if (!qFiltroDoc) return true;
        const blob = [
            doc.nombreDocumento,
            doc.tipoDocumento,
            doc.TipDoc,
            doc.observaciones,
            doc.obsDocumento,
            doc.file_ext,
            doc.creado,
            doc.ultimaActualizacion,
        ]
            .join(' ')
            .toLowerCase();
        return blob.includes(qFiltroDoc);
    });

    const editMode = isEditMode || Boolean(initialData?.CodConCli);

    // Marcar en rojo obligatorios vacíos cuando hay errores de validación (422) O cuando el servidor devuelve error (flash)
    const hasValidationErrors =
        Object.keys(errors || {}).length > 0 || !!(flash?.error || (flash?.type === 'error' && flash?.message));
    const invalidIfEmpty = (key: keyof typeof data, empty: boolean) =>
        (!!(errors as any)?.[key] || (hasValidationErrors && empty));

    const tabsContacto = useMemo((): EneonTabDefinition[] => {
        const tabs: EneonTabDefinition[] = [
            {
                id: 'datos',
                label: 'Datos Contactos',
                icon: <User size={20} />,
                variant: 'default',
                panelId: 'panel-contacto-datos',
            },
            {
                id: 'direccion',
                label: 'Dirección',
                icon: <MapPin size={20} />,
                variant: 'default',
                panelId: 'panel-contacto-direccion',
            },
        ];

        if (editMode) {
            tabs.push(
                {
                    id: 'documentos',
                    label: 'Documentos',
                    icon: <FileText size={20} />,
                    count: documentos.length,
                    variant: 'documentos',
                    panelId: 'panel-contacto-documentos',
                },
                {
                    id: 'clientes',
                    label: 'Clientes',
                    icon: <Users size={20} />,
                    count: clientesAsociados.length,
                    variant: 'default',
                    panelId: 'panel-contacto-clientes',
                },
            );
        }

        return tabs;
    }, [editMode, documentos.length, clientesAsociados.length]);

    return (
        <React.Fragment>
            <Head title={editMode ? "Editar Contacto" : "Crear Contacto"} />
            <div className="page-content">
                <Container fluid>
                    <BreadCrumb title="Crear" pageTitle="Contacto" />
                    <Row>
                        <Col xl={12}>
                            <Card>
                                <Card.Header className="d-flex justify-content-between align-items-center bg-light">
                                    <h4 className="card-title mb-0">{editMode ? 'Editar Contacto' : 'Nuevo Contacto'}</h4>
                                    <div className="d-flex gap-2">
                                        <Button
                                            variant="success"
                                            size="sm"
                                            onClick={handleGuardar}
                                        >
                                            <i className="fas fa-save me-2"></i>
                                            {editMode ? 'Actualizar' : 'Registrar'}
                                        </Button>
                                        <Button
                                            variant="secondary"
                                            size="sm"
                                            onClick={handleVolver}
                                        >
                                            <FileText size={14} className="me-1" />
                                            Volver
                                        </Button>
                                    </div>
                                </Card.Header>
                                <Card.Body>
                                    <div className={`${estilosFoco.contenedorAccesibleContratos} formularioContacto`}>
                                    <Form>
                                        <EneonTabs
                                            tabs={tabsContacto}
                                            activeTabId={activeTab}
                                            onTabChange={(tabId) => setActiveTab(tabId as TabType)}
                                            ariaLabel="Secciones del contacto"
                                            className="mb-3"
                                        />

                                        {/* TAB 1: Datos Contactos */}
                                        {activeTab === 'datos' && (
                                            <Row className="g-4" id="panel-contacto-datos" role="tabpanel" aria-labelledby="tab-contacto-datos">
                                                <Col xs={12}><h5 className="mb-2">Datos del Contacto</h5></Col>
                                                
                                                <Col md={4}>
                                                    <Form.Group controlId="NomConCli">
                                                        <Form.Label>Nombre (*)</Form.Label>
                                                        <Form.Control
                                                            value={data.NomConCli || ''}
                                                            onChange={handleTextChange('NomConCli')}
                                                            isInvalid={invalidIfEmpty('NomConCli', !(data.NomConCli || '').trim())}
                                                        />
                                                        <Form.Control.Feedback type="invalid">
                                                            {(errors as any).NomConCli as any}
                                                        </Form.Control.Feedback>
                                                    </Form.Group>
                                                </Col>

                                                <Col md={4}>
                                                    <Form.Group controlId="NumColegiado">
                                                        <Form.Label>Número de Colegiado</Form.Label>
                                                        <Form.Control
                                                            value={data.NumColegiado || ''}
                                                            onChange={handleTextChange('NumColegiado')}
                                                        />
                                                    </Form.Group>
                                                </Col>

                                                <Col md={4}>
                                                    <Form.Group controlId="NumComercialAudax">
                                                        <Form.Label>Nº Comercial AUDAX</Form.Label>
                                                        <Form.Control
                                                            value={data.NumComercialAudax || ''}
                                                            onChange={handleTextChange('NumComercialAudax')}
                                                            placeholder="* N° Comercial AUDAX"
                                                        />
                                                    </Form.Group>
                                                </Col>

                                                <Col md={4}>
                                                    <Form.Group controlId="NumComercialAdx">
                                                        <Form.Label>Nº Comercial ADX</Form.Label>
                                                        <Form.Control
                                                            value={data.NumComercialAdx || ''}
                                                            onChange={handleTextChange('NumComercialAdx')}
                                                            placeholder="* N° Comercial ADX"
                                                        />
                                                    </Form.Group>
                                                </Col>

                                                <Col md={4}>
                                                    <Form.Group controlId="NIFConCli">
                                                        <Form.Label>Número de Documento</Form.Label>
                                                        <Form.Control
                                                            value={data.NIFConCli || ''}
                                                            onChange={handleTextChange('NIFConCli')}
                                                        />
                                                    </Form.Group>
                                                </Col>

                                                <Col md={4}>
                                                    <Form.Group controlId="CarConCli">
                                                        <Form.Label>Cargo (*)</Form.Label>
                                                        <Form.Control
                                                            value={data.CarConCli || ''}
                                                            onChange={handleTextChange('CarConCli')}
                                                            isInvalid={invalidIfEmpty('CarConCli', !(data.CarConCli || '').trim())}
                                                        />
                                                        <Form.Control.Feedback type="invalid">
                                                            {(errors as any).CarConCli as any}
                                                        </Form.Control.Feedback>
                                                    </Form.Group>
                                                </Col>

                                                <Col md={4}>
                                                    <Form.Group controlId="TelFijConCli">
                                                        <Form.Label>Teléfono Fijo (*)</Form.Label>
                                                        <Form.Control
                                                            value={data.TelFijConCli || ''}
                                                            onChange={handleTextChange('TelFijConCli')}
                                                            isInvalid={invalidIfEmpty('TelFijConCli', !(data.TelFijConCli || '').trim())}
                                                        />
                                                        <Form.Control.Feedback type="invalid">
                                                            {(errors as any).TelFijConCli as any}
                                                        </Form.Control.Feedback>
                                                    </Form.Group>
                                                </Col>

                                                <Col md={4}>
                                                    <Form.Group controlId="TelCelConCli">
                                                        <Form.Label>Teléfono Móvil (*)</Form.Label>
                                                        <Form.Control
                                                            value={data.TelCelConCli || ''}
                                                            onChange={handleTextChange('TelCelConCli')}
                                                            isInvalid={invalidIfEmpty('TelCelConCli', !(data.TelCelConCli || '').trim())}
                                                        />
                                                        <Form.Control.Feedback type="invalid">
                                                            {(errors as any).TelCelConCli as any}
                                                        </Form.Control.Feedback>
                                                    </Form.Group>
                                                </Col>

                                                <Col md={4}>
                                                    <Form.Group controlId="RecibeCorreoMasivo">
                                                        <Form.Label>Recibe Correo Masivo</Form.Label>
                                                        <div className="mt-2">
                                                            <Form.Check
                                                                type="checkbox"
                                                                checked={data.RecibeCorreoMasivo || false}
                                                                onChange={handleCheckboxChange('RecibeCorreoMasivo')}
                                                            />
                                                        </div>
                                                    </Form.Group>
                                                </Col>

                                                <Col md={6}>
                                                    <Form.Group controlId="NumIBAN">
                                                        <Form.Label>Número IBAN</Form.Label>
                                                        <Form.Control
                                                            value={data.NumIBAN || ''}
                                                            onChange={(e) => {
                                                                const v = (e.target.value || '').replace(/\s/g, '');
                                                                setData('NumIBAN', v);
                                                                if ((errors as any)?.NumIBAN) clearErrors('NumIBAN');
                                                            }}
                                                            onPaste={(e) => {
                                                                e.preventDefault();
                                                                const pasted = (e.clipboardData?.getData('text') || '').replace(/\s/g, '');
                                                                setData('NumIBAN', pasted);
                                                                if ((errors as any)?.NumIBAN) clearErrors('NumIBAN');
                                                            }}
                                                            placeholder="ES6412366573864383529302"
                                                        />
                                                    </Form.Group>
                                                </Col>

                                                <Col md={6}>
                                                    <Form.Group controlId="EmaConCli">
                                                        <Form.Label>Email (*)</Form.Label>
                                                        <Form.Control
                                                            type="email"
                                                            value={data.EmaConCli || ''}
                                                            onChange={handleTextChange('EmaConCli')}
                                                            isInvalid={invalidIfEmpty('EmaConCli', !(data.EmaConCli || '').trim())}
                                                        />
                                                        <Form.Control.Feedback type="invalid">
                                                            {(errors as any).EmaConCli as any}
                                                        </Form.Control.Feedback>
                                                    </Form.Group>
                                                </Col>

                                                <Col md={6}>
                                                    <Form.Group controlId="TelPersonal">
                                                        <Form.Label>Teléfono Personal (*)</Form.Label>
                                                        <Form.Control
                                                            value={data.TelPersonal || ''}
                                                            onChange={handleTextChange('TelPersonal')}
                                                            isInvalid={invalidIfEmpty('TelPersonal', !(data.TelPersonal || '').trim())}
                                                        />
                                                        <Form.Control.Feedback type="invalid">
                                                            {(errors as any).TelPersonal as any}
                                                        </Form.Control.Feedback>
                                                    </Form.Group>
                                                </Col>

                                                <Col md={6}>
                                                    <Form.Group controlId="EmaPersonal">
                                                        <Form.Label>Email Personal</Form.Label>
                                                        <Form.Control
                                                            type="email"
                                                            value={data.EmaPersonal || ''}
                                                            onChange={handleTextChange('EmaPersonal')}
                                                        />
                                                    </Form.Group>
                                                </Col>

                                                <Col xs={12}>
                                                    <Form.Group controlId="Observaciones">
                                                        <Form.Label>Observaciones</Form.Label>
                                                        <Form.Control
                                                            as="textarea"
                                                            rows={4}
                                                            maxLength={200}
                                                            value={data.Observaciones || ''}
                                                            onChange={handleTextChange('Observaciones')}
                                                            placeholder="Observaciones adicionales sobre el contacto..."
                                                            isInvalid={!!(errors as any)?.ObsConC}
                                                        />
                                                        <Form.Text className="text-muted">
                                                            {(data.Observaciones || '').length}/200
                                                        </Form.Text>
                                                        <Form.Control.Feedback type="invalid">
                                                            {(errors as any)?.ObsConC}
                                                        </Form.Control.Feedback>
                                                    </Form.Group>
                                                </Col>
                                            </Row>
                                        )}

                                        {/* TAB 2: Dirección */}
                                        {activeTab === 'direccion' && (
                                            <Row className="g-4" id="panel-contacto-direccion" role="tabpanel" aria-labelledby="tab-contacto-direccion">
                                                <Col xs={12}><h5 className="mb-2">Datos Envío de facturas</h5></Col>
                                                
                                                <Col md={4}>
                                                    <Form.Group controlId="CodTipVia">
                                                        <Form.Label>Tipo de Via (*)</Form.Label>
                                                        <Form.Select
                                                            value={data.CodTipVia || ''}
                                                            onChange={handleSelectChange('CodTipVia')}
                                                            isInvalid={!!(errors as any).CodTipViaFis || !!(errors as any).CodTipVia || (hasValidationErrors && !data.CodTipVia)}
                                                        >
                                                            <option value="">Seleccione…</option>
                                                            {tiposVia.map(tv => (
                                                                <option key={tv.CodTipVia} value={tv.CodTipVia}>
                                                                    {tv.IniTipVia} - {tv.DesTipVia}
                                                                </option>
                                                            ))}
                                                        </Form.Select>
                                                        <Form.Control.Feedback type="invalid">
                                                            {((errors as any).CodTipViaFis || (errors as any).CodTipVia) as any}
                                                        </Form.Control.Feedback>
                                                    </Form.Group>
                                                </Col>

                                                <Col md={5}>
                                                    <Form.Group controlId="NomVia">
                                                        <Form.Label>Nombre de la Vía (*)</Form.Label>
                                                        <Form.Control
                                                            value={data.NomVia || ''}
                                                            onChange={handleTextChange('NomVia')}
                                                            placeholder="* Nombre de la Via del Domicilio del Cliente"
                                                            isInvalid={!!(errors as any).NomViaDomFis || !!(errors as any).NomVia || (hasValidationErrors && !(data.NomVia || '').trim())}
                                                        />
                                                        <Form.Control.Feedback type="invalid">
                                                            {((errors as any).NomViaDomFis || (errors as any).NomVia) as any}
                                                        </Form.Control.Feedback>
                                                    </Form.Group>
                                                </Col>

                                                <Col md={3}>
                                                    <Form.Group controlId="NumVia">
                                                        <Form.Label>Número de la Vía (*)</Form.Label>
                                                        <Form.Control
                                                            value={data.NumVia || ''}
                                                            onChange={handleTextChange('NumVia')}
                                                            placeholder="* Numero del Domicilio"
                                                            isInvalid={!!(errors as any).NumViaDomFis || !!(errors as any).NumVia || (hasValidationErrors && !(data.NumVia || '').trim())}
                                                        />
                                                        <Form.Control.Feedback type="invalid">
                                                            {((errors as any).NumViaDomFis || (errors as any).NumVia) as any}
                                                        </Form.Control.Feedback>
                                                    </Form.Group>
                                                </Col>

                                                <Col md={3}>
                                                    <Form.Group controlId="Bloque">
                                                        <Form.Label>Bloque</Form.Label>
                                                        <Form.Control
                                                            value={data.Bloque || ''}
                                                            onChange={handleTextChange('Bloque')}
                                                            placeholder="Bloque del Dirección de Suministro"
                                                            isInvalid={!!(errors as any).BloPunSum}
                                                        />
                                                        <Form.Control.Feedback type="invalid">
                                                            {(errors as any).BloPunSum as any}
                                                        </Form.Control.Feedback>
                                                    </Form.Group>
                                                </Col>

                                                <Col md={3}>
                                                    <Form.Group controlId="Escalera">
                                                        <Form.Label>Escalera</Form.Label>
                                                        <Form.Control
                                                            value={data.Escalera || ''}
                                                            onChange={handleTextChange('Escalera')}
                                                            placeholder="Escalera del Dirección de Suministro"
                                                            isInvalid={!!(errors as any).EscPunSum}
                                                        />
                                                        <Form.Control.Feedback type="invalid">
                                                            {(errors as any).EscPunSum as any}
                                                        </Form.Control.Feedback>
                                                    </Form.Group>
                                                </Col>

                                                <Col md={3}>
                                                    <Form.Group controlId="Planta">
                                                        <Form.Label>Planta</Form.Label>
                                                        <Form.Control
                                                            value={data.Planta || ''}
                                                            onChange={handleTextChange('Planta')}
                                                            placeholder="Planta del Dirección de Suministro"
                                                            isInvalid={!!(errors as any).PlaPunSum}
                                                        />
                                                        <Form.Control.Feedback type="invalid">
                                                            {(errors as any).PlaPunSum as any}
                                                        </Form.Control.Feedback>
                                                    </Form.Group>
                                                </Col>

                                                <Col md={3}>
                                                    <Form.Group controlId="Puerta">
                                                        <Form.Label>Puerta</Form.Label>
                                                        <Form.Control
                                                            value={data.Puerta || ''}
                                                            onChange={handleTextChange('Puerta')}
                                                            placeholder="Puerta del Dirección de Suministro"
                                                            isInvalid={!!(errors as any).PuePunSum}
                                                        />
                                                        <Form.Control.Feedback type="invalid">
                                                            {(errors as any).PuePunSum as any}
                                                        </Form.Control.Feedback>
                                                    </Form.Group>
                                                </Col>

                                                <Col lg={3} md={6} sm={12}>
                                                    <Form.Label htmlFor="codigoPostal">Código Postal (*)</Form.Label>
                                                    <InputGroup hasValidation>
                                                        <Typeahead
                                                            labelKey={(option: Localidad) => `${option.DesLoc} (${option.CPLoc})`}
                                                            id="codigoPostal"
                                                            options={localidades}
                                                            selected={selectedLocalidad}
                                                            onChange={handleLocalidadChange}
                                                            placeholder="Buscar por Código Postal.."
                                                            isLoading={false}
                                                            minLength={1}
                                                            isInvalid={!!(errors as any).CPLocFis || !!(errors as any).CodigoPostal || (hasValidationErrors && !(data.CodigoPostal || '').trim())}
                                                        />
                                                        <Form.Control.Feedback type="invalid">
                                                            {((errors as any).CPLocFis || (errors as any).CodigoPostal) as any}
                                                        </Form.Control.Feedback>
                                                    </InputGroup>
                                                </Col>

                                                <Col lg={4} md={6} sm={12}>
                                                    <Form.Label htmlFor="provincia">Provincia (*)</Form.Label>
                                                    <Form.Control
                                                        type="text"
                                                        id="provincia"
                                                        value={data.Provincia || ''}
                                                        disabled
                                                        placeholder="Provincia"
                                                        isInvalid={!!(errors as any).CPLocFis || !!(errors as any).Provincia || (hasValidationErrors && !(data.Provincia || '').trim())}
                                                    />
                                                    <Form.Control.Feedback type="invalid">
                                                        {((errors as any).CPLocFis || (errors as any).Provincia) as any}
                                                    </Form.Control.Feedback>
                                                </Col>

                                                <Col lg={5} md={12} sm={12}>
                                                    <Form.Label htmlFor="localidad">Localidad (*)</Form.Label>
                                                    <Form.Control
                                                        type="text"
                                                        id="localidad"
                                                        value={data.Localidad || ''}
                                                        disabled
                                                        placeholder="Localidad"
                                                        isInvalid={!!(errors as any).CodLocFis || !!(errors as any).Localidad || (hasValidationErrors && !data.CodLoc)}
                                                    />
                                                    <Form.Control.Feedback type="invalid">
                                                        {((errors as any).CodLocFis || (errors as any).Localidad) as any}
                                                    </Form.Control.Feedback>
                                                </Col>
                                            </Row>
                                        )}

                                        {/* TAB 3: Documentos */}
                                        {editMode && activeTab === 'documentos' && (
                                            <Row id="panel-contacto-documentos" role="tabpanel" aria-labelledby="tab-contacto-documentos">
                                                <Col xs={12}>
                                                    <div className="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                                                        <h5 className="mb-0">Listado de Documentos</h5>
                                                        <div className="d-flex gap-2 flex-wrap">
                                                            <Form.Control
                                                                type="text"
                                                                placeholder="Buscar en documentos..."
                                                                value={filtroDocumentos}
                                                                onChange={(e) => setFiltroDocumentos(e.target.value)}
                                                                style={{ maxWidth: '280px' }}
                                                            />
                                                            <Button
                                                                variant="primary"
                                                                size="sm"
                                                                onClick={(e) => {
                                                                    disparadorModalDocumentoRef.current = e.currentTarget;
                                                                    handleAgregarDocumento();
                                                                }}
                                                                aria-label="Agregar documento al contacto"
                                                            >
                                                                <Plus size={16} className="me-1" />
                                                                Agregar Documento
                                                            </Button>
                                                        </div>
                                                    </div>
                                                    <Table striped bordered hover responsive>
                                                        <thead>
                                                            <tr>
                                                                <th>Nombre Documento</th>
                                                                <th>Tipo Documento</th>
                                                                <th>Observaciones</th>
                                                                <th>Creado</th>
                                                                <th>Última actualización</th>
                                                                <th>Acción</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            {documentosFiltrados.length === 0 ? (
                                                                <tr>
                                                                    <td colSpan={6} className="text-center">
                                                                        {documentos.length === 0
                                                                            ? 'No hay documentos adjuntos a este contacto'
                                                                            : 'No hay documentos que coincidan con el filtro'}
                                                                    </td>
                                                                </tr>
                                                            ) : (
                                                                documentosFiltrados.map((doc) => (
                                                                    <tr key={doc.CodDetDocCon ?? doc.id ?? doc.nombreDocumento}>
                                                                        <td>
                                                                            {doc.download_url ? (
                                                                                <Button
                                                                                    variant="link"
                                                                                    className="p-0 text-start text-primary text-decoration-underline"
                                                                                    title="Descargar"
                                                                                    onClick={() => void descargarDocumentoContacto(doc)}
                                                                                >
                                                                                    <FileText size={14} className="me-1" />
                                                                                    {doc.nombreDocumento || '—'}
                                                                                </Button>
                                                                            ) : (
                                                                                doc.nombreDocumento || '—'
                                                                            )}
                                                                        </td>
                                                                        <td>{doc.tipoDocumento || doc.TipDoc || '—'}</td>
                                                                        <td>{doc.observaciones || doc.obsDocumento || '—'}</td>
                                                                        <td>{doc.creado || '—'}</td>
                                                                        <td>{doc.ultimaActualizacion || '—'}</td>
                                                                        <td>
                                                                            <div className="d-flex gap-1">
                                                                                <Button
                                                                                    variant="outline-primary"
                                                                                    size="sm"
                                                                                    title="Editar"
                                                                                    aria-label={`Editar documento ${doc.nombreDocumento || doc.NomDoc || ''}`.trim()}
                                                                                    onClick={() => handleEditarDocumento(doc)}
                                                                                >
                                                                                    <Pencil size={14} aria-hidden="true" />
                                                                                </Button>
                                                                                <Button
                                                                                    variant="danger"
                                                                                    size="sm"
                                                                                    title="Eliminar"
                                                                                    aria-label={`Eliminar documento ${doc.nombreDocumento || doc.NomDoc || ''}`.trim()}
                                                                                    onClick={() => handleEliminarDocumento(doc)}
                                                                                >
                                                                                    <X size={14} aria-hidden="true" />
                                                                                </Button>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                ))
                                                            )}
                                                        </tbody>
                                                    </Table>
                                                </Col>
                                            </Row>
                                        )}

                                        {/* TAB 4: Clientes */}
                                        {editMode && activeTab === 'clientes' && (
                                            <Row id="panel-contacto-clientes" role="tabpanel" aria-labelledby="tab-contacto-clientes">
                                                <Col xs={12}>
                                                    <div className="d-flex justify-content-between align-items-center mb-3">
                                                        <h5 className="mb-0">Datos del Cliente</h5>
                                                        <div className="d-flex gap-2">
                                                            <Form.Control
                                                                type="text"
                                                                placeholder="CIF / DNI - Escribe para filtrar..."
                                                                value={filtroClientes}
                                                                onChange={(e) => setFiltroClientes(e.target.value)}
                                                                style={{ maxWidth: '300px' }}
                                                            />
                                                            <Button
                                                                variant="primary"
                                                                size="sm"
                                                                onClick={(e) => {
                                                                    disparadorModalClienteRef.current = e.currentTarget;
                                                                    handleAsociarCliente();
                                                                }}
                                                                aria-label="Asociar cliente al contacto"
                                                            >
                                                                <Plus size={16} className="me-1" />
                                                                Asociar Cliente
                                                            </Button>
                                                        </div>
                                                    </div>
                                                    <Table striped bordered hover>
                                                        <thead>
                                                            <tr>
                                                                <th>CodCli</th>
                                                                <th>NIF</th>
                                                                <th>Razón Social</th>
                                                                <th>Es Representante Legal</th>
                                                                <th>Tipo Representación</th>
                                                                <th>Firmantes</th>
                                                                <th>Facultad de Escrituras</th>
                                                                <th>Es Colaborador</th>
                                                                <th>Es Prescriptor</th>
                                                                <th>Acción</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            {clientesFiltrados.length === 0 ? (
                                                                <tr>
                                                                    <td colSpan={10} className="text-center">
                                                                        {clientesAsociados.length === 0
                                                                            ? 'No hay clientes asignados a este contacto'
                                                                            : 'No se encontraron clientes con el filtro aplicado'}
                                                                    </td>
                                                                </tr>
                                                            ) : (
                                                                clientesFiltrados.map((cliente, index) => (
                                                                    <tr key={cliente.CodDetCliCont ?? `row-${cliente.CodCli}-${index}`}>
                                                                        <td>{cliente.CodCli || '-'}</td>
                                                                        <td>{cliente.NIF}</td>
                                                                        <td>{cliente.RazSocCli || '-'}</td>
                                                                        <td>{cliente.EsRepresentanteLegal ? 'Si' : 'No'}</td>
                                                                        <td>{cliente.TipoRepresentacion}</td>
                                                                        <td>{cliente.Firmantes}</td>
                                                                        <td>{cliente.FacultadEscrituras ? 'Si' : 'No'}</td>
                                                                        <td>{cliente.EsColaborador ? 'Si' : 'No'}</td>
                                                                        <td>{cliente.EsPrescriptor ? 'Si' : 'No'}</td>
                                                                        <td>
                                                                            <div className="d-flex gap-1">
                                                                                <Button
                                                                                    variant="outline-primary"
                                                                                    size="sm"
                                                                                    title="Editar"
                                                                                    aria-label={`Editar cliente asociado ${cliente.RazSocCli || cliente.NIF || ''}`.trim()}
                                                                                    onClick={() => handleEditarClienteAsociado(cliente)}
                                                                                >
                                                                                    <Pencil size={14} aria-hidden="true" />
                                                                                </Button>
                                                                                <Button
                                                                                    variant="danger"
                                                                                    size="sm"
                                                                                    title="Desvincular"
                                                                                    aria-label={`Desvincular cliente ${cliente.RazSocCli || cliente.NIF || ''}`.trim()}
                                                                                    onClick={() => handleEliminarClienteAsociado(cliente)}
                                                                                >
                                                                                    <X size={14} aria-hidden="true" />
                                                                                </Button>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                ))
                                                            )}
                                                        </tbody>
                                                    </Table>
                                                </Col>
                                            </Row>
                                        )}
                                    </Form>
                                    </div>
                                </Card.Body>
                            </Card>
                        </Col>
                    </Row>
                </Container>
            </div>

            {/* Modal Agregar / Editar Documento */}
            <Modal
                show={showDocumentoModal}
                onHide={() => {
                    if (!documentoUploading) setShowDocumentoModal(false);
                }}
                onExited={() => restaurarFocoModal(disparadorModalDocumentoRef.current)}
                restoreFocus
                size="lg"
            >
                <Modal.Header closeButton>
                    <Modal.Title>
                        {modalDocumentoModo === 'editar' ? 'Editar documento' : 'Agregar documento'}
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form>
                        <Form.Group className="mb-3">
                            <Form.Label>Tipo Documento (*)</Form.Label>
                                                            <Form.Select
                                                                value={documentoForm.tipoDocumento}
                                                                onChange={(e) => setDocumentoForm({ ...documentoForm, tipoDocumento: e.target.value })}
                                                                isInvalid={!documentoForm.tipoDocumento && showDocumentoModal}
                                                                disabled={documentoUploading}
                                                            >
                                                                <option value="">Seleccione un tipo...</option>
                                                                <option value="DNI">DNI</option>
                                                                <option value="NIE">NIE</option>
                                                                <option value="Pasaporte">Pasaporte</option>
                                                                <option value="Contrato">Contrato</option>
                                                                <option value="Otro">Otro</option>
                                                            </Form.Select>
                                                        </Form.Group>

                                                        <Form.Group className="mb-3">
                                                            <Form.Label>Nombre del documento (opcional)</Form.Label>
                                                            <Form.Control
                                                                type="text"
                                                                value={documentoForm.nombreDocumento}
                                                                onChange={(e) =>
                                                                    setDocumentoForm({ ...documentoForm, nombreDocumento: e.target.value })
                                                                }
                                                                placeholder="Si no indica, se usa el nombre del archivo"
                                                                disabled={documentoUploading}
                                                            />
                                                        </Form.Group>

                                                        <Form.Group className="mb-3">
                                                            <Form.Label>
                                                                {modalDocumentoModo === 'editar'
                                                                    ? 'Reemplazar archivo (opcional)'
                                                                    : 'Agregar Documento (*)'}
                                                            </Form.Label>
                                                            <div
                                                                style={{
                                                                    border: '2px dashed #ccc',
                                                                    borderRadius: '8px',
                                                                    padding: '40px',
                                                                    textAlign: 'center',
                                                                    cursor: 'pointer',
                                                                    backgroundColor: '#f8f9fa'
                                                                }}
                                                                onClick={() => !documentoUploading && fileInputRef.current?.click()}
                                                            >
                                                                <input
                                                                    ref={fileInputRef}
                                                                    type="file"
                                                                    style={{ display: 'none' }}
                                                                    onChange={handleFileChange}
                                                                    accept={PROPUESTA_DOC_ACCEPT}
                                                                    disabled={documentoUploading}
                                                                />
                                                                {documentoForm.archivo ? (
                                                                    <div>
                                                                        <i className="fas fa-file me-2"></i>
                                                                        {documentoForm.archivo.name}
                                                                    </div>
                                                                ) : (
                                                                    <div>
                                                                        <i className="fas fa-cloud-upload-alt me-2" style={{ fontSize: '2rem', color: '#6c757d' }}></i>
                                                                        <p className="mb-0 mt-2">
                                                                            Presione para adjuntar el fichero o arrastrar el fichero y soltar aquí
                                                                        </p>
                                                                        <p className="small text-muted mb-0 mt-2">
                                                                            {PROPUESTA_DOC_FORMATOS_TEXTO} · máx. 20 MB
                                                                        </p>
                                                                    </div>
                                                                )}
                                                            </div>
                                                        </Form.Group>

                                                        <Form.Group className="mb-3">
                                                            <Form.Label>Observaciones</Form.Label>
                                                            <Form.Control
                                                                as="textarea"
                                                                rows={3}
                                                                value={documentoForm.observaciones}
                                                                onChange={(e) => setDocumentoForm({ ...documentoForm, observaciones: e.target.value })}
                                                                placeholder="Observaciones opcionales..."
                                                                disabled={documentoUploading}
                                                            />
                                                        </Form.Group>

                                                        {documentoUploading &&
                                                            uploadProgress !== null &&
                                                            (modalDocumentoModo === 'crear' || !!documentoForm.archivo) && (
                                                            <div className="mb-2">
                                                                <div className="small text-muted mb-1">Subiendo archivo…</div>
                                                                <ProgressBar
                                                                    now={uploadProgress}
                                                                    label={`${uploadProgress}%`}
                                                                    animated
                                                                />
                                                            </div>
                                                        )}
                                                        {documentoUploading &&
                                                            modalDocumentoModo === 'editar' &&
                                                            !documentoForm.archivo && (
                                                                <div className="small text-muted mb-2">Guardando cambios…</div>
                                                            )}
                                                    </Form>
                                                </Modal.Body>
                                                <Modal.Footer>
                                                    <Button
                                                        variant="secondary"
                                                        onClick={() => setShowDocumentoModal(false)}
                                                        disabled={documentoUploading}
                                                    >
                                                        Cancelar
                                                    </Button>
                                                    <Button
                                                        variant="success"
                                                        onClick={() => void handleGuardarDocumento()}
                                                        disabled={documentoUploading}
                                                    >
                                                        {modalDocumentoModo === 'editar' ? 'GUARDAR CAMBIOS' : 'REGISTRAR'}
                                                    </Button>
                                                </Modal.Footer>
                                            </Modal>

                                            {/* Modal Asociar Cliente */}
                                            <Modal
                                                show={showClienteModal}
                                                onHide={() => {
                                                    setShowClienteModal(false);
                                                    setEditingCodDet(null);
                                                    setEditingRowSnapshot(null);
                                                    setModalClienteModo('crear');
                                                }}
                                                onExited={() => restaurarFocoModal(disparadorModalClienteRef.current)}
                                                restoreFocus
                                                size="lg"
                                            >
                                                <Modal.Header closeButton>
                                                    <Modal.Title>
                                                        {modalClienteModo === 'editar'
                                                            ? 'Editar asociación cliente'
                                                            : 'Asignar Cliente a Contacto'}
                                                    </Modal.Title>
                                                </Modal.Header>
                                                <Modal.Body>
                                                    <Form>
                                                        <Form.Group className="mb-3">
                                                            <Form.Label>Cliente (*)</Form.Label>
                                                            {modalClienteModo === 'editar' ? (
                                                                <div className="rounded border bg-light p-2 small">
                                                                    {selectedClienteModal[0]
                                                                        ? `${selectedClienteModal[0].RazSocCli} — ${selectedClienteModal[0].NumCifCli}`
                                                                        : editingRowSnapshot
                                                                          ? `${editingRowSnapshot.RazSocCli} — ${editingRowSnapshot.NIF}`
                                                                          : '—'}
                                                                </div>
                                                            ) : (
                                                                <>
                                                                    <Form.Text className="text-muted d-block mb-1">
                                                                        Busque por razón social, nombre comercial o NIF/CIF (catálogo de clientes activos).
                                                                    </Form.Text>
                                                                    <Typeahead
                                                                        id="contacto-modal-cliente-typeahead"
                                                                        placeholder="Escriba para buscar..."
                                                                        options={clientesCatalogo}
                                                                        labelKey={(c: Cliente) =>
                                                                            `${c.RazSocCli || ''} — ${c.NumCifCli || ''}`
                                                                        }
                                                                        filterBy={filterClienteByRazonONif}
                                                                        selected={selectedClienteModal}
                                                                        onChange={(sel) => setSelectedClienteModal(sel as Cliente[])}
                                                                        minLength={1}
                                                                        clearButton
                                                                        positionFixed
                                                                        emptyLabel="No hay clientes que coincidan"
                                                                    />
                                                                </>
                                                            )}
                                                        </Form.Group>

                                                        <Form.Group className="mb-3">
                                                            <Form.Label>Representante Legal (*)</Form.Label>
                                                            <div>
                                                                <Form.Check
                                                                    inline
                                                                    type="radio"
                                                                    label="Si"
                                                                    name="esRepresentanteLegal"
                                                                    value="Si"
                                                                    checked={clienteForm.esRepresentanteLegal === 'Si'}
                                                                    onChange={(e) => setClienteForm({ ...clienteForm, esRepresentanteLegal: e.target.value })}
                                                                />
                                                                <Form.Check
                                                                    inline
                                                                    type="radio"
                                                                    label="No"
                                                                    name="esRepresentanteLegal"
                                                                    value="No"
                                                                    checked={clienteForm.esRepresentanteLegal === 'No'}
                                                                    onChange={(e) => setClienteForm({ ...clienteForm, esRepresentanteLegal: e.target.value })}
                                                                />
                                                            </div>
                                                        </Form.Group>

                                                        <Form.Group className="mb-3">
                                                            <Form.Label>Tipo Representación (*)</Form.Label>
                                                            <Form.Select
                                                                value={clienteForm.tipoRepresentacion}
                                                                onChange={(e) => setClienteForm({ ...clienteForm, tipoRepresentacion: e.target.value })}
                                                            >
                                                                <option value="">Seleccione...</option>
                                                                <option value="INDEPENDIENTE">INDEPENDIENTE</option>
                                                                <option value="SOLIDARIO">SOLIDARIO</option>
                                                                <option value="MANCOMUNADO">MANCOMUNADO</option>
                                                            </Form.Select>
                                                        </Form.Group>

                                                        <Form.Group className="mb-3">
                                                            <Form.Label>Firmantes (*)</Form.Label>
                                                            <Form.Control
                                                                type="number"
                                                                min="1"
                                                                value={clienteForm.firmantes}
                                                                onChange={(e) => setClienteForm({ ...clienteForm, firmantes: e.target.value })}
                                                            />
                                                        </Form.Group>

                                                        <Form.Group className="mb-3">
                                                            <Form.Label>Facultad de Escrituras</Form.Label>
                                                            <div>
                                                                <Form.Check
                                                                    inline
                                                                    type="radio"
                                                                    label="Si"
                                                                    name="facultadEscrituras"
                                                                    value="Si"
                                                                    checked={clienteForm.facultadEscrituras === 'Si'}
                                                                    onChange={(e) => setClienteForm({ ...clienteForm, facultadEscrituras: e.target.value })}
                                                                />
                                                                <Form.Check
                                                                    inline
                                                                    type="radio"
                                                                    label="No"
                                                                    name="facultadEscrituras"
                                                                    value="No"
                                                                    checked={clienteForm.facultadEscrituras === 'No'}
                                                                    onChange={(e) => setClienteForm({ ...clienteForm, facultadEscrituras: e.target.value })}
                                                                />
                                                            </div>
                                                        </Form.Group>

                                                        <Form.Group className="mb-3">
                                                            <Form.Label>Es Colaborador</Form.Label>
                                                            <div>
                                                                <Form.Check
                                                                    inline
                                                                    type="radio"
                                                                    label="Si"
                                                                    name="esColaborador"
                                                                    value="Si"
                                                                    checked={clienteForm.esColaborador === 'Si'}
                                                                    onChange={(e) => setClienteForm({ ...clienteForm, esColaborador: e.target.value })}
                                                                />
                                                                <Form.Check
                                                                    inline
                                                                    type="radio"
                                                                    label="No"
                                                                    name="esColaborador"
                                                                    value="No"
                                                                    checked={clienteForm.esColaborador === 'No'}
                                                                    onChange={(e) => setClienteForm({ ...clienteForm, esColaborador: e.target.value })}
                                                                />
                                                            </div>
                                                        </Form.Group>

                                                        <Form.Group className="mb-3">
                                                            <Form.Label>Es Prescriptor</Form.Label>
                                                            <div>
                                                                <Form.Check
                                                                    inline
                                                                    type="radio"
                                                                    label="Si"
                                                                    name="esPrescriptor"
                                                                    value="Si"
                                                                    checked={clienteForm.esPrescriptor === 'Si'}
                                                                    onChange={(e) => setClienteForm({ ...clienteForm, esPrescriptor: e.target.value })}
                                                                />
                                                                <Form.Check
                                                                    inline
                                                                    type="radio"
                                                                    label="No"
                                                                    name="esPrescriptor"
                                                                    value="No"
                                                                    checked={clienteForm.esPrescriptor === 'No'}
                                                                    onChange={(e) => setClienteForm({ ...clienteForm, esPrescriptor: e.target.value })}
                                                                />
                                                            </div>
                                                        </Form.Group>
                                                    </Form>
                                                </Modal.Body>
                                                <Modal.Footer>
                                                    <Button variant="secondary" onClick={() => setShowClienteModal(false)}>
                                                        Cancelar
                                                    </Button>
                                                    <Button variant="success" onClick={handleGuardarCliente}>
                                                        Asignar Cliente
                                                    </Button>
                                                </Modal.Footer>
                                            </Modal>
                                        </React.Fragment>
                                    );
                                };

                                CrearContacto.layout = (page: any) => <Layout children={page} />;
                                export default CrearContacto;