import React, { useState, useEffect } from 'react';
import { Alert, Form, Button } from 'react-bootstrap';
import { UserCheck, Building2, Search, AlertCircle, ArrowRight, History, CheckCircle2, Clock } from 'lucide-react';
import { Typeahead } from 'react-bootstrap-typeahead';
import axios from 'axios';
import Swal from 'sweetalert2';
import { PuntoSuministro, Cliente, HistoricoCambioTitular } from '../../../../interfaces';
import BaseEditModal from '../Components/BaseEditModal';
import { useLoading } from '../../../../LoadingContext';
import { formatAdvertenciaPropuestasHtml } from '../../../../utils/advertenciaPropuestasFormatter';

interface CambioTitularModalProps {
    show: boolean;
    onHide: () => void;
    punto: PuntoSuministro | null;
    clienteActual: Cliente;
    onTitularCambiado: () => void;
}

const CambioTitularModal: React.FC<CambioTitularModalProps> = ({
    show,
    onHide,
    punto,
    clienteActual,
    onTitularCambiado,
}) => {
    const { showLoading, hideLoading } = useLoading();
    const [submitting, setSubmitting] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [clientesEncontrados, setClientesEncontrados] = useState<Cliente[]>([]);
    const [selectedCliente, setSelectedCliente] = useState<Cliente[]>([]);
    const [isSearching, setIsSearching] = useState(false);
    const [actualizarPropuestas, setActualizarPropuestas] = useState(true);

    // Histórico de movimientos
    const [mostrarHistorico, setMostrarHistorico] = useState(false);
    const [historico, setHistorico] = useState<HistoricoCambioTitular[]>([]);
    const [loadingHistorico, setLoadingHistorico] = useState(false);

    useEffect(() => {
        if (show) {
            setSelectedCliente([]);
            setClientesEncontrados([]);
            setError(null);
            setActualizarPropuestas(true);
            setMostrarHistorico(false);
            setHistorico([]);
        }
    }, [show, punto]);

    const cargarHistorico = async () => {
        if (!punto) return;
        setLoadingHistorico(true);
        try {
            const res = await axios.get(route('puntos-suministro.historico-titular', punto.CodPunSum));
            setHistorico(res.data?.data || []);
        } catch (err) {
            console.error('Error al cargar histórico de titular:', err);
        } finally {
            setLoadingHistorico(false);
        }
    };

    const toggleHistorico = () => {
        const nuevoEstado = !mostrarHistorico;
        setMostrarHistorico(nuevoEstado);
        if (nuevoEstado && historico.length === 0) {
            cargarHistorico();
        }
    };

    const handleSearchClientes = async (query: string) => {
        const trimmed = query.trim();
        if (trimmed.length < 3) {
            setClientesEncontrados([]);
            return;
        }

        setIsSearching(true);
        try {
            const response = await axios.get(route('clientes.buscar'), {
                params: { q: trimmed },
            });
            const results = (response.data?.data || []) as Cliente[];
            // Excluir el titular actual para no reasignar a sí mismo
            const filtrados = results.filter(c => c.CodCli !== clienteActual.CodCli);
            setClientesEncontrados(filtrados);
        } catch (err) {
            console.error('Error buscando clientes para cambio de titular:', err);
        } finally {
            setIsSearching(false);
        }
    };

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

        if (!punto) return;

        const nuevoCliente = selectedCliente[0];
        if (!nuevoCliente) {
            setError('Debes seleccionar el nuevo cliente titular.');
            return;
        }

        const confirm = await Swal.fire({
            title: '¿Confirmar cambio de titular?',
            html: `
                <div style="text-align: left; font-size: 0.875rem;">
                    <p style="margin-bottom: 8px;">Vas a transferir la titularidad del <strong>Punto #${punto.CodPunSum}</strong>:</p>
                    <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px; margin-bottom: 10px;">
                        <div style="color: #64748b; font-size: 0.75rem;">Titular actual:</div>
                        <div style="font-weight: 600; color: #1e293b;">${clienteActual.RazSocCli} (${clienteActual.NumCifCli})</div>
                        <div style="color: #64748b; font-size: 0.75rem; margin-top: 6px;">Nuevo titular:</div>
                        <div style="font-weight: 700; color: #1d4ed8;">${nuevoCliente.RazSocCli} (${nuevoCliente.NumCifCli})</div>
                    </div>
                </div>
            `,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sí, cambiar titular',
            cancelButtonText: 'Cancelar',
            confirmButtonColor: '#2563eb',
        });

        if (!confirm.isConfirmed) return;

        setSubmitting(true);
        showLoading();

        try {
            const response = await axios.post(
                route('puntos-suministro.cambio-titular', punto.CodPunSum),
                {
                    nuevo_cod_cli: nuevoCliente.CodCli,
                    actualizar_propuestas: actualizarPropuestas,
                }
            );

            hideLoading();
            setSubmitting(false);
            onHide();
            onTitularCambiado();

            const advertencia = response.data?.advertencia_propuestas;
            if (advertencia) {
                await Swal.fire({
                    title: 'Titular actualizado con aviso',
                    html: formatAdvertenciaPropuestasHtml(advertencia),
                    icon: 'warning',
                    confirmButtonText: 'Entendido',
                    confirmButtonColor: '#2563eb',
                });
            } else {
                await Swal.fire({
                    title: '¡Titular actualizado!',
                    text: response.data?.message || 'El cambio de titular se ha completado correctamente.',
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false,
                });
            }
        } catch (err: any) {
            hideLoading();
            setSubmitting(false);
            const msg = err.response?.data?.message || 'Ocurrió un error al realizar el cambio de titular.';
            setError(msg);
        }
    };

    if (!punto) return null;

    const direccionPunto = [punto.NomViaPunSum, punto.NumViaPunSum].filter(Boolean).join(' ') || `Punto #${punto.CodPunSum}`;

    return (
        <BaseEditModal
            show={show}
            onHide={onHide}
            title="Cambio de titular"
            subtitle={`Punto #${punto.CodPunSum} • ${direccionPunto}`}
            icon={<UserCheck size={18} />}
            iconVariant="indigo"
            submitLabel="Confirmar cambio"
            loading={submitting}
            onSubmit={handleSubmit}
            dialogClassName="saas-modal-dialog-md"
        >
            {error && (
                <Alert variant="danger" className="py-2 px-3 mb-3 d-flex align-items-center gap-2" style={{ fontSize: '0.8125rem' }}>
                    <AlertCircle size={16} />
                    <span>{error}</span>
                </Alert>
            )}

            {/* Comparativa Titular Actual vs Nuevo Titular */}
            <div style={{ background: '#f8fafc', border: '1px solid #e2e8f0', borderRadius: '8px', padding: '12px 14px', marginBottom: '16px' }}>
                <div className="d-flex align-items-center justify-content-between mb-2">
                    <span style={{ fontSize: '0.75rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', color: '#64748b' }}>
                        Titular actual del suministro
                    </span>
                    <span className="badge bg-light text-muted border" style={{ fontSize: '0.7rem' }}>
                        Cliente #{clienteActual.CodCli}
                    </span>
                </div>
                <div className="d-flex align-items-center gap-2" style={{ color: '#1e293b', fontWeight: 600, fontSize: '0.875rem' }}>
                    <Building2 size={16} className="text-secondary" />
                    <span>{clienteActual.RazSocCli}</span>
                    <span style={{ color: '#64748b', fontWeight: 400 }}>({clienteActual.NumCifCli})</span>
                </div>
            </div>

            {/* Buscador de nuevo titular */}
            <Form.Group className="mb-3" controlId="nuevoTitularSearch">
                <Form.Label style={{ fontSize: '0.8125rem', fontWeight: 600, color: '#334155' }}>
                    Nuevo cliente titular <span className="text-danger">*</span>
                </Form.Label>
                <Typeahead
                    id="nuevoTitularTypeahead"
                    labelKey={(o: any) => `${o.RazSocCli} (${o.NumCifCli})`}
                    options={clientesEncontrados}
                    selected={selectedCliente}
                    onChange={(selected) => {
                        setSelectedCliente(selected as Cliente[]);
                        setError(null);
                    }}
                    onInputChange={handleSearchClientes}
                    placeholder="Escribe razón social o CIF para buscar cliente..."
                    minLength={3}
                    isLoading={isSearching}
                    emptyLabel={isSearching ? 'Buscando clientes...' : 'No se encontraron clientes (mín. 3 caracteres)'}
                    filterBy={() => true}
                />
                <Form.Text className="text-muted" style={{ fontSize: '0.75rem' }}>
                    Busca por nombre, razón social o CIF. El cliente debe existir previamente en el sistema.
                </Form.Text>
            </Form.Group>

            {/* Checkbox de sincronización de contratos/propuestas */}
            <div style={{ background: '#eff6ff', border: '1px solid #bfdbfe', borderRadius: '8px', padding: '12px', marginTop: '14px', marginBottom: '16px' }}>
                <Form.Check
                    type="switch"
                    id="switch-actualizar-propuestas"
                    label={
                        <span style={{ fontWeight: 600, fontSize: '0.8125rem', color: '#1e40af' }}>
                            Marcar cambio de titular en propuestas comerciales pendientes
                        </span>
                    }
                    checked={actualizarPropuestas}
                    onChange={(e) => setActualizarPropuestas(e.target.checked)}
                />
                <div style={{ fontSize: '0.75rem', color: '#3b82f6', marginTop: '4px', marginLeft: '38px', lineHeight: 1.4 }}>
                    Activa la bandera <code>CambioTitular</code>, ajusta la fecha de activación a hoy y reasocia los contratos no tramitados de este punto (excepto representantes legales TipProCom = 3).
                </div>
            </div>

            {/* Sección Desplegable de Historial de Movimientos */}
            <div style={{ borderTop: '1px solid #e2e8f0', paddingTop: '12px' }}>
                <Button
                    variant="link"
                    size="sm"
                    className="p-0 text-decoration-none d-flex align-items-center gap-1"
                    style={{ fontSize: '0.8125rem', color: '#475569', fontWeight: 600 }}
                    onClick={toggleHistorico}
                >
                    <History size={15} />
                    <span>{mostrarHistorico ? 'Ocultar historial de traspasos' : 'Ver historial de cambios de titular'}</span>
                </Button>

                {mostrarHistorico && (
                    <div className="mt-2" style={{ background: '#f8fafc', border: '1px solid #e2e8f0', borderRadius: '6px', padding: '10px', fontSize: '0.75rem', maxHeight: '180px', overflowY: 'auto' }}>
                        {loadingHistorico ? (
                            <div className="text-muted text-center py-2">Cargando historial...</div>
                        ) : historico.length === 0 ? (
                            <div className="text-muted text-center py-2">No hay movimientos previos de cambio de titular registrados para este punto.</div>
                        ) : (
                            <div className="d-flex flex-column gap-2">
                                {historico.map((item) => (
                                    <div key={item.id} className="p-2 bg-white rounded border d-flex justify-content-between align-items-center">
                                        <div>
                                            <div className="text-muted" style={{ fontSize: '0.7rem' }}>
                                                {new Date(item.FecCambio).toLocaleString()} • Por: {item.usuario?.name || 'Sistema'}
                                            </div>
                                            <div className="d-flex align-items-center gap-2 mt-1 flex-wrap">
                                                {(() => {
                                                    const ant = item.cliente_anterior || (item as any).clienteAnterior;
                                                    const nue = item.cliente_nuevo || (item as any).clienteNuevo;
                                                    return (
                                                        <>
                                                            <div className="d-inline-flex align-items-center gap-1">
                                                                <span className="text-danger fw-semibold">
                                                                    {ant?.RazSocCli || `Cliente #${item.CodCliAnterior}`}
                                                                </span>
                                                                {ant?.NumCifCli && (
                                                                    <span className="text-muted" style={{ fontSize: '0.6875rem' }}>
                                                                        ({ant.NumCifCli})
                                                                    </span>
                                                                )}
                                                            </div>
                                                            <ArrowRight size={13} className="text-muted mx-1" />
                                                            <div className="d-inline-flex align-items-center gap-1">
                                                                <span className="text-success fw-bold">
                                                                    {nue?.RazSocCli || `Cliente #${item.CodCliNuevo}`}
                                                                </span>
                                                                {nue?.NumCifCli && (
                                                                    <span className="text-muted" style={{ fontSize: '0.6875rem' }}>
                                                                        ({nue.NumCifCli})
                                                                    </span>
                                                                )}
                                                            </div>
                                                        </>
                                                    );
                                                })()}
                                            </div>
                                        </div>
                                        <div>
                                            {item.procesado ? (
                                                <span className="badge bg-success-subtle text-success border border-success-subtle d-flex align-items-center gap-1" style={{ fontSize: '0.6875rem' }}>
                                                    <CheckCircle2 size={12} /> Procesado
                                                </span>
                                            ) : (
                                                <span className="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle d-flex align-items-center gap-1" style={{ fontSize: '0.6875rem' }}>
                                                    <Clock size={12} /> Pendiente
                                                </span>
                                            )}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                )}
            </div>
        </BaseEditModal>
    );
};

export default CambioTitularModal;