import React, { useEffect, useMemo, useState } from 'react';
import { Col, Modal, Row, Spinner } from 'react-bootstrap';
import Swal from 'sweetalert2';
import FormDateInputEs from '../../../../Components/Common/FormDateInputEs';
import { todayLocalYmd } from '../../../../utils/serverCalendarDate';
import { ESTADOS_CONTRATO } from '../../../../interfaces';
import {
    AnexoOption,
    ComercializadoraActivacion,
    CupsActivacion,
    FormularioActivacion,
    FormularioContratoRapido,
    ProductoOption,
    TarifaElectricaOption,
    TarifaGasOption,
    TipoPrecioOption,
    TIPO_ELECTRICO,
    comercializadoraNombre,
    periodosTarifa,
    potenciasDesde,
    textoValor,
} from '../types';
import TarifaPotenciasConsumo from './TarifaPotenciasConsumo';
import SipsActivacionPanel, { DatosSipsAplicables } from './SipsActivacionPanel';
import { Zap, Plus, X, ArrowLeft, ArrowRight, Check, Building2, MapPin, Calendar, Activity, Layers, Tag, Euro } from 'lucide-react';

interface Props {
    show: boolean;
    cups: CupsActivacion;
    comercializadoraBusqueda: ComercializadoraActivacion | null;
    comercializadoras: ComercializadoraActivacion[];
    productos: ProductoOption[];
    anexos: AnexoOption[];
    tiposPrecio: TipoPrecioOption[];
    tarifasElectricas: TarifaElectricaOption[];
    tarifasGas: TarifaGasOption[];
    guardando: boolean;
    onHide: () => void;
    onGenerar: (form: FormularioContratoRapido, periodos: number) => Promise<boolean>;
}

function dentroDeUnAnio(ymd: string): string {
    const [y, m, d] = ymd.split('-').map(Number);
    const fecha = new Date(y + 1, m - 1, d, 12);
    fecha.setDate(fecha.getDate() - 1);
    return `${fecha.getFullYear()}-${String(fecha.getMonth() + 1).padStart(2, '0')}-${String(fecha.getDate()).padStart(2, '0')}`;
}

function formularioInicial(cups: CupsActivacion, codCom: number | null): FormularioContratoRapido {
    const hoy = todayLocalYmd();
    return {
        CodTar: textoValor(cups.CodTar),
        CodPro: '',
        FecActCUPs: hoy,
        FecVenCUPs: dentroDeUnAnio(hoy),
        ConCup: textoValor(cups.ConCup),
        EstConCups: '1',
        ...potenciasDesde(cups.potencias),
        CodCom: textoValor(codCom),
        CodAnePro: '',
        TipPre: '',
        CorpoGo: '',
        comentarios: '',
    };
}

const CAMPOS_PASO_1: Array<[keyof FormularioContratoRapido, string]> = [
    ['CodTar', 'Tarifa'],
    ['CodCom', 'Comercializadora'],
    ['CodPro', 'Producto'],
    ['TipPre', 'Tipo de precio'],
];

const CAMPOS_PASO_2: Array<[keyof FormularioContratoRapido, string]> = [
    ['FecActCUPs', 'Fecha de activación'],
    ['FecVenCUPs', 'Fecha de vencimiento'],
    ['EstConCups', 'Estado'],
];

const ContratoRapidoModal: React.FC<Props> = ({
    show,
    cups,
    comercializadoraBusqueda,
    comercializadoras,
    productos,
    anexos,
    tiposPrecio,
    tarifasElectricas,
    tarifasGas,
    guardando,
    onHide,
    onGenerar,
}) => {
    const [paso, setPaso] = useState<1 | 2>(1);
    const [form, setForm] = useState<FormularioContratoRapido>(() => formularioInicial(cups, comercializadoraBusqueda?.CodCom ?? null));

    useEffect(() => {
        if (show) {
            setPaso(1);
            setForm(formularioInicial(cups, comercializadoraBusqueda?.CodCom ?? null));
        }
    }, [show, cups, comercializadoraBusqueda]);

    const electrico = cups.TipCups === TIPO_ELECTRICO;
    const productosFiltrados = useMemo(
        () => productos.filter((p) => String(p.CodCom) === form.CodCom),
        [productos, form.CodCom],
    );
    const anexosFiltrados = useMemo(
        () => anexos.filter((a) => String(a.CodPro) === form.CodPro),
        [anexos, form.CodPro],
    );
    const comercializadoraSips = comercializadoras.find((c) => String(c.CodCom) === form.CodCom) ?? comercializadoraBusqueda;

    const cambiar = (campo: keyof FormularioContratoRapido, valor: string) => {
        setForm((actual) => {
            const siguiente = { ...actual, [campo]: valor };
            if (campo === 'CodCom') {
                siguiente.CodPro = '';
                siguiente.CodAnePro = '';
            }
            if (campo === 'CodPro') {
                siguiente.CodAnePro = '';
            }
            return siguiente;
        });
    };

    const aplicarSips = ({ consumo, potencias }: DatosSipsAplicables) => {
        setForm((actual) => ({
            ...actual,
            ...potencias,
            ConCup: consumo === null ? actual.ConCup : String(consumo),
        }));
    };

    const faltantes = (campos: Array<[keyof FormularioContratoRapido, string]>) =>
        campos.filter(([campo]) => String(form[campo] ?? '').trim() === '').map(([, etiqueta]) => etiqueta);

    const validar = async (campos: Array<[keyof FormularioContratoRapido, string]>): Promise<boolean> => {
        const pendientes = faltantes(campos);
        if (pendientes.length === 0) {
            return true;
        }
        await Swal.fire({ icon: 'warning', title: 'Validación', text: `Complete: ${pendientes.join(', ')}.` });
        return false;
    };

    const siguiente = async () => {
        if (await validar(CAMPOS_PASO_1)) {
            setPaso(2);
        }
    };

    const generar = async () => {
        if (!(await validar(CAMPOS_PASO_2))) {
            return;
        }
        if (form.FecVenCUPs < form.FecActCUPs) {
            await Swal.fire({ icon: 'warning', title: 'Validación', text: 'La fecha de vencimiento no puede ser anterior a la de activación.' });
            return;
        }
        const periodos = electrico ? periodosTarifa(tarifasElectricas, form.CodTar) : 0;
        if (await onGenerar(form, periodos)) {
            onHide();
        }
    };

    return (
        <Modal
            show={show}
            onHide={onHide}
            size="xl"
            centered
            scrollable
            backdrop="static"
            contentClassName="saas-modal-content"
        >
            <div className="saas-modal-header">
                <div className="d-flex align-items-center gap-2">
                    <span className="saas-icon-badge primary">
                        <Plus size={16} />
                    </span>
                    <div>
                        <div className="saas-modal-title">Contrato Rápido</div>
                        <span className="saas-modal-subtitle font-monospace">
                            {cups.CUPs} · {electrico ? 'Electricidad' : 'Gas'}
                        </span>
                    </div>
                </div>

                <div className="d-flex align-items-center gap-3">
                    {/* Stepper estilo Apple Segmented */}
                    <div className="saas-modal-tabs mb-0" style={{ padding: '3px' }}>
                        <button
                            type="button"
                            className={`saas-modal-tab ${paso === 1 ? 'active' : ''}`}
                            onClick={() => setPaso(1)}
                            style={{ padding: '0.3rem 0.75rem', fontSize: '0.75rem' }}
                        >
                            <span className="saas-modal-tab-badge">1</span>
                            <span>Datos y Producto</span>
                        </button>
                        <button
                            type="button"
                            className={`saas-modal-tab ${paso === 2 ? 'active' : ''}`}
                            onClick={async () => {
                                if (await validar(CAMPOS_PASO_1)) {
                                    setPaso(2);
                                }
                            }}
                            style={{ padding: '0.3rem 0.75rem', fontSize: '0.75rem' }}
                        >
                            <span className="saas-modal-tab-badge">2</span>
                            <span>Fechas y Estado</span>
                        </button>
                    </div>

                    <button
                        type="button"
                        onClick={onHide}
                        className="saas-modal-close-btn"
                        aria-label="Cerrar modal"
                        disabled={guardando}
                    >
                        <X size={16} />
                    </button>
                </div>
            </div>

            <div className="saas-modal-body saas-custom-scrollbar">
                {paso === 1 ? (
                    <div className="d-grid gap-3">
                        {/* Resumen Titular */}
                        <div className="saas-section-box">
                            <Row className="g-3">
                                <Col md={5}>
                                    <div className="saas-kv">
                                        <div className="saas-kv-label d-flex align-items-center gap-1">
                                            <Building2 size={13} />
                                            <span>Razón Social</span>
                                        </div>
                                        <div className="saas-kv-value text-truncate fw-semibold text-slate-800">
                                            {cups.RazSocCli ?? 'Sin titular'}
                                        </div>
                                    </div>
                                </Col>
                                <Col md={3}>
                                    <div className="saas-kv">
                                        <div className="saas-kv-label">CIF / NIF</div>
                                        <div className="saas-kv-value">
                                            {cups.NumCifCli ? <span className="saas-cif-badge">{cups.NumCifCli}</span> : '—'}
                                        </div>
                                    </div>
                                </Col>
                                <Col md={4}>
                                    <div className="saas-kv">
                                        <div className="saas-kv-label d-flex align-items-center gap-1">
                                            <MapPin size={13} />
                                            <span>Dirección de Suministro</span>
                                        </div>
                                        <div className="saas-kv-value text-truncate small text-secondary">
                                            {cups.direccion ?? '—'}
                                        </div>
                                    </div>
                                </Col>
                            </Row>
                        </div>

                        {/* Panel SIPS */}
                        <SipsActivacionPanel
                            cups={cups.CUPs}
                            tipCups={cups.TipCups}
                            comercializadora={comercializadoraSips}
                            onAplicar={aplicarSips}
                        />

                        {/* Tarifa y Potencias */}
                        <TarifaPotenciasConsumo
                            prefijoId="contrato-rapido"
                            tipCups={cups.TipCups}
                            form={form}
                            tarifasElectricas={tarifasElectricas}
                            tarifasGas={tarifasGas}
                            onChange={(campo: keyof FormularioActivacion, valor) => cambiar(campo, valor)}
                        />

                        {/* Configuración Comercial */}
                        <div className="saas-section-box">
                            <div className="saas-kv-label mb-2 pb-1 border-bottom border-slate-200 text-slate-700" style={{ letterSpacing: '0.04em' }}>
                                Datos Comerciales de Contratación
                            </div>
                            <Row className="g-3">
                                <Col md={3}>
                                    <div className="saas-form-group mb-0">
                                        <label htmlFor="contrato-rapido-com" className="saas-form-label">
                                            <span>Comercializadora</span>
                                        </label>
                                        <select
                                            id="contrato-rapido-com"
                                            className="saas-form-select"
                                            value={form.CodCom}
                                            onChange={(e) => cambiar('CodCom', e.target.value)}
                                        >
                                            <option value="">Seleccione comercializadora</option>
                                            {comercializadoras.map((c) => (
                                                <option key={c.CodCom} value={c.CodCom}>
                                                    {comercializadoraNombre(c)}
                                                </option>
                                            ))}
                                        </select>
                                    </div>
                                </Col>

                                <Col md={3}>
                                    <div className="saas-form-group mb-0">
                                        <label htmlFor="contrato-rapido-producto" className="saas-form-label">
                                            <Layers size={13} />
                                            <span>Producto</span>
                                        </label>
                                        <select
                                            id="contrato-rapido-producto"
                                            className="saas-form-select"
                                            value={form.CodPro}
                                            disabled={!form.CodCom}
                                            onChange={(e) => cambiar('CodPro', e.target.value)}
                                        >
                                            <option value="">Seleccione un producto</option>
                                            {productosFiltrados.map((p) => (
                                                <option key={p.CodPro} value={p.CodPro}>
                                                    {p.DesPro}
                                                </option>
                                            ))}
                                        </select>
                                    </div>
                                </Col>

                                <Col md={2}>
                                    <div className="saas-form-group mb-0">
                                        <label htmlFor="contrato-rapido-anexo" className="saas-form-label">
                                            <Tag size={13} />
                                            <span>Anexo</span>
                                        </label>
                                        <select
                                            id="contrato-rapido-anexo"
                                            className="saas-form-select"
                                            value={form.CodAnePro}
                                            disabled={!form.CodPro}
                                            onChange={(e) => cambiar('CodAnePro', e.target.value)}
                                        >
                                            <option value="">Sin anexo</option>
                                            {anexosFiltrados.map((a) => (
                                                <option key={a.CodAnePro} value={a.CodAnePro}>
                                                    {a.DesAnePro}
                                                </option>
                                            ))}
                                        </select>
                                    </div>
                                </Col>

                                <Col md={2}>
                                    <div className="saas-form-group mb-0">
                                        <label htmlFor="contrato-rapido-tipo-precio" className="saas-form-label">
                                            <span>Tipo Precio</span>
                                        </label>
                                        <select
                                            id="contrato-rapido-tipo-precio"
                                            className="saas-form-select"
                                            value={form.TipPre}
                                            onChange={(e) => cambiar('TipPre', e.target.value)}
                                        >
                                            <option value="">Seleccione</option>
                                            {tiposPrecio.map((t) => (
                                                <option key={t.id} value={t.id}>
                                                    {t.descripcion}
                                                </option>
                                            ))}
                                        </select>
                                    </div>
                                </Col>

                                <Col md={2}>
                                    <div className="saas-form-group mb-0">
                                        <label htmlFor="contrato-rapido-corpogo" className="saas-form-label">
                                            <Euro size={13} />
                                            <span>Gasto Op. (c€/kWh)</span>
                                        </label>
                                        <input
                                            id="contrato-rapido-corpogo"
                                            type="text"
                                            className="saas-form-control"
                                            inputMode="decimal"
                                            value={form.CorpoGo}
                                            placeholder="0.00"
                                            onChange={(e) => cambiar('CorpoGo', e.target.value)}
                                        />
                                    </div>
                                </Col>

                                <Col xs={12}>
                                    <div className="saas-form-group mb-0">
                                        <label htmlFor="contrato-rapido-comentarios" className="saas-form-label">
                                            <span>Comentarios u Observaciones</span>
                                        </label>
                                        <textarea
                                            id="contrato-rapido-comentarios"
                                            className="saas-form-control"
                                            rows={2}
                                            maxLength={1000}
                                            value={form.comentarios}
                                            placeholder="Notas internas sobre este contrato..."
                                            onChange={(e) => cambiar('comentarios', e.target.value)}
                                        />
                                    </div>
                                </Col>
                            </Row>
                        </div>
                    </div>
                ) : (
                    <div className="saas-section-box p-4">
                        <div className="saas-kv-label mb-3 pb-2 border-bottom border-slate-200 text-slate-700" style={{ letterSpacing: '0.04em' }}>
                            Vigencia y Estado del Contrato
                        </div>
                        <Row className="g-4">
                            <Col md={4}>
                                <div className="saas-form-group mb-0">
                                    <label htmlFor="contrato-rapido-activacion" className="saas-form-label">
                                        <Calendar size={14} className="text-primary" />
                                        <span>Fecha de Activación</span>
                                    </label>
                                    <FormDateInputEs
                                        id="contrato-rapido-activacion"
                                        bsSize="sm"
                                        value={form.FecActCUPs}
                                        onChange={(v) => cambiar('FecActCUPs', v)}
                                    />
                                </div>
                            </Col>

                            <Col md={4}>
                                <div className="saas-form-group mb-0">
                                    <label htmlFor="contrato-rapido-vencimiento" className="saas-form-label">
                                        <Calendar size={14} className="text-primary" />
                                        <span>Fecha de Vencimiento</span>
                                    </label>
                                    <FormDateInputEs
                                        id="contrato-rapido-vencimiento"
                                        bsSize="sm"
                                        value={form.FecVenCUPs}
                                        onChange={(v) => cambiar('FecVenCUPs', v)}
                                    />
                                </div>
                            </Col>

                            <Col md={4}>
                                <div className="saas-form-group mb-0">
                                    <label htmlFor="contrato-rapido-estado" className="saas-form-label">
                                        <Activity size={14} className="text-primary" />
                                        <span>Estado Inicial</span>
                                    </label>
                                    <select
                                        id="contrato-rapido-estado"
                                        className="saas-form-select"
                                        value={form.EstConCups}
                                        onChange={(e) => cambiar('EstConCups', e.target.value)}
                                    >
                                        {ESTADOS_CONTRATO.map((estado) => (
                                            <option key={estado.key} value={estado.key}>
                                                {estado.valor}
                                            </option>
                                        ))}
                                    </select>
                                </div>
                            </Col>
                        </Row>
                    </div>
                )}
            </div>

            <div className="saas-modal-footer">
                {paso === 2 && (
                    <button
                        type="button"
                        className="saas-btn-outline"
                        onClick={() => setPaso(1)}
                        disabled={guardando}
                    >
                        <ArrowLeft size={14} />
                        <span>Atrás</span>
                    </button>
                )}
                {paso === 1 ? (
                    <button
                        type="button"
                        className="saas-btn-primary"
                        onClick={siguiente}
                    >
                        <span>Siguiente</span>
                        <ArrowRight size={14} />
                    </button>
                ) : (
                    <button
                        type="button"
                        className="saas-btn-primary"
                        onClick={generar}
                        disabled={guardando}
                    >
                        {guardando ? (
                            <>
                                <Spinner size="sm" animation="border" className="me-1" style={{ width: '13px', height: '13px' }} />
                                <span>Generando Contrato…</span>
                            </>
                        ) : (
                            <>
                                <Check size={14} />
                                <span>Generar Contrato</span>
                            </>
                        )}
                    </button>
                )}
            </div>
        </Modal>
    );
};

export default ContratoRapidoModal;