import React from 'react';
import { Spinner } from 'react-bootstrap';
import Swal from 'sweetalert2';
import { Can } from '../../../../Components/Auth/Can';
import { useSipsConsulta } from '../../Sips/hooks/useSipsConsulta';
import { SipsResumenLecturas, SipsTablaConsumo } from '../../Sips/components/shared/SipsConsumoResults';
import { isElectricityTipo, isGasTipo, isLuzResponse, SipsResponse, toNumber } from '../../Sips/types';
import { ComercializadoraActivacion, comercializadoraNombre, Potencias, TIPO_ELECTRICO } from '../types';
import { Database, Download, Search, AlertCircle, AlertTriangle } from 'lucide-react';

export interface DatosSipsAplicables {
    consumo: number | null;
    potencias: Potencias;
}

interface Props {
    cups: string;
    tipCups: number;
    comercializadora: ComercializadoraActivacion | null;
    onAplicar?: (datos: DatosSipsAplicables) => void;
}

function datosAplicables(result: SipsResponse): DatosSipsAplicables {
    const consumo = isLuzResponse(result) ? result.lecturas.LastTotalYearkWh : result.lecturas.kWhAnual;
    const suministro = result.suministros?.[0];
    const potencias: Potencias = {};

    if (suministro && isLuzResponse(result)) {
        for (let p = 1; p <= 6; p++) {
            const valor = suministro[`Pot_Cont_P${p}`];
            if (valor !== undefined && valor !== null && String(valor) !== '') {
                potencias[`PotEleConP${p}` as keyof Potencias] = String(valor);
            }
        }
    }

    return { consumo: consumo === undefined ? null : toNumber(consumo), potencias };
}

const SipsActivacionPanel: React.FC<Props> = ({ cups, tipCups, comercializadora, onAplicar }) => {
    const { consultar, isSubmitting, errorMessage, warningMessage, result } = useSipsConsulta();
    const provider = comercializadora?.sips_provider ?? null;
    const tipo = provider?.tipo_servicio_options.find((opcion) => (
        tipCups === TIPO_ELECTRICO ? isElectricityTipo(opcion.value) : isGasTipo(opcion.value)
    ))?.value;

    const lanzarConsulta = async () => {
        if (!comercializadora) {
            await Swal.fire({ icon: 'warning', title: 'SIPS', text: 'No hay comercializadora para consultar SIPS.' });
            return;
        }

        if (!provider || !tipo) {
            await Swal.fire({
                icon: 'warning',
                title: 'SIPS',
                text: `${comercializadoraNombre(comercializadora)} no tiene API SIPS para este tipo de suministro.`,
            });
            return;
        }

        await consultar({ codCom: comercializadora.CodCom, cups, tipo });
    };

    return (
        <div
            className="saas-section-box mb-3"
            style={{
                backgroundColor: '#ffffff',
                border: '1px solid #cbd5e1',
                boxShadow: '0 1px 2px rgba(15, 23, 42, 0.04)',
            }}
        >
            <div className="d-flex flex-wrap align-items-center justify-content-between gap-2 pb-2 mb-2 border-bottom border-slate-200">
                <div className="d-flex align-items-center gap-2">
                    <span className="saas-icon-badge indigo" style={{ width: '26px', height: '26px' }}>
                        <Database size={14} />
                    </span>
                    <div>
                        <span className="saas-title" style={{ fontSize: '0.85rem' }}>
                            Consulta Técnica SIPS
                        </span>
                        {provider && (
                            <span className="text-muted small ms-2">
                                ({provider.label})
                            </span>
                        )}
                    </div>
                </div>

                <div className="d-flex align-items-center gap-2">
                    {result && onAplicar && !result.sin_datos && (
                        <button
                            type="button"
                            className="saas-btn-outline"
                            style={{ padding: '0.35rem 0.75rem', fontSize: '0.75rem' }}
                            onClick={() => onAplicar(datosAplicables(result))}
                        >
                            <Download size={13} className="text-primary" />
                            <span>Usar datos SIPS</span>
                        </button>
                    )}
                    <Can permission="sips.query">
                        <button
                            type="button"
                            className="saas-btn-primary"
                            style={{ padding: '0.35rem 0.85rem', fontSize: '0.75rem' }}
                            disabled={isSubmitting}
                            onClick={lanzarConsulta}
                        >
                            {isSubmitting ? (
                                <>
                                    <Spinner size="sm" animation="border" className="me-1" style={{ width: '12px', height: '12px' }} />
                                    <span>Consultando SIPS…</span>
                                </>
                            ) : (
                                <>
                                    <Search size={13} />
                                    <span>Consultar SIPS</span>
                                </>
                            )}
                        </button>
                    </Can>
                </div>
            </div>

            {errorMessage && (
                <div
                    className="d-flex align-items-center gap-2 p-2 mb-2 rounded-2"
                    style={{ backgroundColor: '#fef2f2', border: '1px solid #fecaca', color: '#991b1b', fontSize: '0.8rem' }}
                >
                    <AlertCircle size={15} className="flex-shrink-0" />
                    <div>{errorMessage}</div>
                </div>
            )}

            {warningMessage && (
                <div
                    className="d-flex align-items-center gap-2 p-2 mb-2 rounded-2"
                    style={{ backgroundColor: '#fffbeb', border: '1px solid #fde68a', color: '#92400e', fontSize: '0.8rem' }}
                >
                    <AlertTriangle size={15} className="flex-shrink-0" />
                    <div>{warningMessage}</div>
                </div>
            )}

            {result && !result.sin_datos && (
                <div className="d-grid gap-3 pt-1">
                    <SipsResumenLecturas result={result} />
                    <SipsTablaConsumo result={result} tipoServicio={tipo ?? ''} />
                </div>
            )}
        </div>
    );
};

export default SipsActivacionPanel;