import React, { useState, useEffect } from 'react';
import { Alert, Form } from 'react-bootstrap';
import { UserCheck, Building2, Search, AlertCircle, ArrowRight } from 'lucide-react';
import { Typeahead } from 'react-bootstrap-typeahead';
import axios from 'axios';
import Swal from 'sweetalert2';
import { PuntoSuministro, Cliente } 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);

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

    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' }}>
                <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> y reasocia los contratos/propuestas en estado no tramitado pertenecientes a los CUPS de este punto.
                </div>
            </div>
        </BaseEditModal>
    );
};

export default CambioTitularModal;