import React, { useEffect, useState } from "react";
import { Card, Col, Container, Nav, Row, Tab } from "react-bootstrap";
import { Head, router } from "@inertiajs/react";
import BreadCrumb from "../../../../Components/Common/BreadCrumb";
import Layout from "../../../../Layouts";
import { Cliente } from "../Interfaces/Interfaces";
import { ContratoFormData } from "../../../../interfaces";
import axios from 'axios';
import { useContratoUniClienteUniPunto } from "./hooks";
import { ClienteSection, CupsToggleButton, CompletionMessage } from "./components";
import CupsElectricSectionUniPunto from "./CupsElectricSectionUnipunto";
import CupsGasSectionUnipunto from "./CupsGasSectionUnipunto";
import ActionButtons from "../UniClienteMultiPunto/components/ActionButtons";
import { isArrayWithRecords } from "../../Utils";
import { useLoading } from '../../../../LoadingContext';
import { getCupsElectricosByClient, getCupsGasByClient, getLocalidades, getTarifasElectricas, getTarifasGas } from '../../../../services/dataService';
import styles from './css/UniClienteUniPunto.module.css';
import estilosFoco from '../Shared/estilosFocoAccesible.module.css';
import {
    EVENTO_ACTIVAR_PESTANA_SUMINISTRO,
    type SeccionSuministroContrato,
} from '../utils/validacionFormulario';

interface ContratoProps {
    comercializadoras: any;
    productos: Array<any>;
    anexos: any;
    tipoprecio: any[];
}

const FormWizard = ({
    comercializadoras,
    productos,
    anexos,
    tipoprecio
}: ContratoProps) => {

    const [cupsElectricos, setCupsElectricos] = useState<any[]>([]);
    const [cupsGas, setCupsGas] = useState<any[]>([]);
    const [localidades, setLocalidades] = useState<any[]>([]);
    const [tarifasElectricas, setTarifasElectricas] = useState<any[]>([]);
    const [tarifasGas, setTarifasGas] = useState<any[]>([]);

    const [localidadesLoaded, setLocalidadesLoaded] = useState(false);
    const [pestañaSuministroActiva, setPestañaSuministroActiva] = useState<'electrico' | 'gas'>('electrico');

    const [clientesData, setClientesData] = useState<Cliente[]>([]);
    const [isFetchingClientes, setIsFetchingClientes] = useState(true);

    useEffect(() => {
        const fetchClientes = async () => {
            try {
                const response = await axios.get('/api/data/catalogo/clientes');
                setClientesData(response.data || []);
            } catch (error) {
                console.error("Error cargando clientes asincronamente:", error);
                setClientesData([]);
            } finally {
                setIsFetchingClientes(false);
            }
        };
        fetchClientes();
    }, []);

    // T026 — Centralizar la carga de tarifas al mount con dataService
    // Esto previene que useCupsElectrico y useCupsGas realicen peticiones
    // HTTP independientes, reduciendo las peticiones de tarifas en el mount.
    useEffect(() => {
        getTarifasElectricas().then(r => r?.success && setTarifasElectricas(r.data ?? []));
        getTarifasGas().then(r => r?.success && setTarifasGas(r.data ?? []));
    }, []);

    const {
        data,
        setData,
        errors,
        processing,
        formHijoElectrico,
        formHijoGas,
        selectedCliente,
        clientesOptions,
        showCupsElectric,
        showCupsGas,
        erroresCliente,
        mostrarErroresCliente,
        limpiarErroresCliente,
        handleClienteChange,
        handleChangeElectrico,
        handleChangeGas,
        saveContrato,
        toggleCupsElectric,
        toggleCupsGas,
    } = useContratoUniClienteUniPunto({ clientes: clientesData });

    const suministroDualActivo = showCupsElectric && showCupsGas;
    const { showLoading, hideLoading } = useLoading();

    // T009 — Acepta AbortSignal para cancelar la petición si el cliente cambia antes
    // de que responda la petición anterior (race condition).
    const fetchCupsElectricosIfNeeded = async (signal?: AbortSignal) => {
        try {
            const response = await getCupsElectricosByClient(
                selectedCliente[0]?.CodCli || 0,
                signal
            );
            if (response?.success) {
                setCupsElectricos(response.data || []);
            }
        } catch (e: any) {
            // T011 — Silenciar AbortError: ocurre intencionalmente cuando el usuario
            // cambia de cliente antes de que termine la petición anterior.
            if (e?.name === 'AbortError' || e?.name === 'CanceledError') return;
            console.error('Error cargando CUPS eléctricos:', e);
        }
    };

    // T010 — Acepta AbortSignal para el mismo propósito que fetchCupsElectricosIfNeeded.
    const fetchCupsGasIfNeeded = async (signal?: AbortSignal) => {
        try {
            const response = await getCupsGasByClient(
                selectedCliente[0]?.CodCli || 0,
                signal
            );
            if (response?.success) {
                setCupsGas(response.data || []);
            }
        } catch (e: any) {
            // T011 — Silenciar AbortError intencional.
            if (e?.name === 'AbortError' || e?.name === 'CanceledError') return;
            console.error('Error cargando CUPS gas:', e);
        }
    };

    // Cargar datos pesados bajo demanda (vía API) para evitar props enormes en Inertia
    const fetchLocalidadesIfNeeded = async () => {
        if (localidadesLoaded) return;
        try {
            const response = await getLocalidades();
            if (response?.success) {
                setLocalidades(response.data || []);
                setLocalidadesLoaded(true);
            }
        } catch (e) {
            console.error('Error cargando localidades:', e);
        }
    };

    // T007 — AbortController para CUPS eléctricos.
    // Si selectedCliente cambia mientras la petición está en vuelo, el cleanup
    // llama a abort() descartando la respuesta obsoleta antes de que llegue.
    useEffect(() => {
        const controller = new AbortController();
        fetchCupsElectricosIfNeeded(controller.signal);
        if (!localidadesLoaded) {
            fetchLocalidadesIfNeeded();
        }
        return () => controller.abort();
    }, [showCupsElectric, selectedCliente]);

    // T008 — AbortController para CUPS gas. Mismo patrón que el eléctrico.
    useEffect(() => {
        const controller = new AbortController();
        fetchCupsGasIfNeeded(controller.signal);
        if (!localidadesLoaded) {
            fetchLocalidadesIfNeeded();
        }
        return () => controller.abort();
    }, [showCupsGas, selectedCliente]);

    // Wrapper to show loading UI while saveContrato runs (saveContrato triggers post via hook)
    const handleGuardarContrato = async () => {
        try {
            await Promise.resolve(saveContrato());
        } catch (err) {
            console.error('Error en handleGuardarContrato:', err);
            throw err;
        }
    };

    // When processing changes to false, ensure the loading indicator is hidden
    useEffect(() => {
        if (!processing) {
            hideLoading();
        }
    }, [processing]);

    useEffect(() => {
        if (!showCupsElectric && showCupsGas) {
            setPestañaSuministroActiva('gas');
        } else if (showCupsElectric && !showCupsGas) {
            setPestañaSuministroActiva('electrico');
        }
    }, [showCupsElectric, showCupsGas]);

    useEffect(() => {
        const activarPestañaPorValidacion = (evento: Event): void => {
            const seccion = (evento as CustomEvent<{ seccion: SeccionSuministroContrato }>).detail?.seccion;

            if (seccion === 'electrico' || seccion === 'gas') {
                setPestañaSuministroActiva(seccion);
            }
        };

        window.addEventListener(EVENTO_ACTIVAR_PESTANA_SUMINISTRO, activarPestañaPorValidacion);

        return () => {
            window.removeEventListener(EVENTO_ACTIVAR_PESTANA_SUMINISTRO, activarPestañaPorValidacion);
        };
    }, []);

    const claseVisibilidadSuministro = (tipo: 'electrico' | 'gas'): string => {
        if (!suministroDualActivo) {
            return '';
        }

        return pestañaSuministroActiva === tipo ? 'd-block' : 'd-none d-lg-block';
    };

    return (
        <React.Fragment>
            <Head title="Generación de Contratos N)ON" />
            <div className="page-content">
                <Container fluid>
                    <BreadCrumb title="Unicliente - Dual" pageTitle="Contrato" />
                    <Row>
                        <Col xl={12}>
                            <Card>
                                <Card.Header className="bg-light">
                                    <h4 className="card-title mb-0">Generación de Contratos</h4>
                                </Card.Header>
                                <Card.Body>
                                    <form className="vertical-navs-step form-steps">
                                        <Tab.Container activeKey={1}>
                                            <Row className="gy-5">
                                                <Col lg={12}>
                                                    <div className={`px-lg-4 ${styles.formularioUnipunto} ${estilosFoco.contenedorAccesibleContratos}`}>
                                                        {/* Sección de Cliente */}
                                                        <ClienteSection
                                                            fechaPropuesta={data.fecha_propuesta}
                                                            numeroPropuesta={data.numero_propuesta}
                                                            estatus={data.estatus}
                                                            documentoFiscal={data.documento_fiscal}
                                                            razonSocial={data.razon_social}
                                                            clientesOptions={clientesOptions}
                                                            isLoadingClientes={isFetchingClientes}
                                                            selectedCliente={selectedCliente}
                                                            errors={{
                                                                ...errors,
                                                                ...(mostrarErroresCliente ? erroresCliente : {}),
                                                            }}
                                                            onClienteChange={handleClienteChange}
                                                            onFechaPropuestaChange={(value) => {
                                                                setData('fecha_propuesta', value);
                                                                limpiarErroresCliente();
                                                            }}
                                                        />

                                                        {/* Activación suministros */}
                                                        <CupsToggleButton
                                                            show={showCupsElectric}
                                                            onToggle={toggleCupsElectric}
                                                            type="electric"
                                                        />
                                                        <CupsToggleButton
                                                            show={showCupsGas}
                                                            onToggle={toggleCupsGas}
                                                            type="gas"
                                                        />

                                                        {suministroDualActivo && (
                                                            <Nav
                                                                variant="tabs"
                                                                className="d-lg-none mb-3"
                                                                activeKey={pestañaSuministroActiva}
                                                                onSelect={(key) => {
                                                                    if (key === 'electrico' || key === 'gas') {
                                                                        setPestañaSuministroActiva(key);
                                                                    }
                                                                }}
                                                            >
                                                                <Nav.Item>
                                                                    <Nav.Link eventKey="electrico">
                                                                        Eléctrico
                                                                    </Nav.Link>
                                                                </Nav.Item>
                                                                <Nav.Item>
                                                                    <Nav.Link eventKey="gas">Gas</Nav.Link>
                                                                </Nav.Item>
                                                            </Nav>
                                                        )}

                                                        {showCupsElectric && (
                                                            <div className={claseVisibilidadSuministro('electrico')}>
                                                                <CupsElectricSectionUniPunto
                                                                    ref={formHijoElectrico}
                                                                    datos={{} as any}
                                                                    comercializadoras={comercializadoras}
                                                                    productos={productos}
                                                                    anexos={anexos}
                                                                    tipoprecio={tipoprecio}
                                                                    cupsData={cupsElectricos}
                                                                    localidades={localidades}
                                                                    clientes={clientesData}
                                                                    clienteId={isArrayWithRecords(selectedCliente) ? (selectedCliente[0] as Cliente).CodCli : 0}
                                                                    onChange={handleChangeElectrico}
                                                                    onEliminar={toggleCupsElectric}
                                                                    tarifasElectricas={tarifasElectricas}
                                                                />
                                                            </div>
                                                        )}

                                                        {showCupsGas && (
                                                            <div className={claseVisibilidadSuministro('gas')}>
                                                                <CupsGasSectionUnipunto
                                                                    ref={formHijoGas}
                                                                    datos={{} as any}
                                                                    comercializadoras={comercializadoras}
                                                                    productos={productos}
                                                                    anexos={anexos}
                                                                    tipoprecio={tipoprecio}
                                                                    cupsData={cupsGas}
                                                                    localidades={localidades}
                                                                    clientes={clientesData}
                                                                    clienteId={isArrayWithRecords(selectedCliente) ? (selectedCliente[0] as Cliente).CodCli : 0}
                                                                    onChange={handleChangeGas}
                                                                    onEliminar={toggleCupsGas}
                                                                    tarifasGas={tarifasGas}
                                                                />
                                                            </div>
                                                        )}

                                                        {/* Mensaje de Completitud y Botones */}
                                                        <CompletionMessage />
                                                        <ActionButtons
                                                            onGuardarContrato={handleGuardarContrato}
                                                            isProcessing={processing}
                                                            hasElectricRows={data.electrico.length >= 0}
                                                            hasGasRows={data.gas.length >= 0}
                                                            isFormValid={true}
                                                            onShowCupsElectricosModal={toggleCupsElectric}
                                                            onShowCupsGasModal={toggleCupsGas}
                                                        />
                                                    </div>
                                                </Col>
                                            </Row>
                                        </Tab.Container>
                                    </form>
                                </Card.Body>
                            </Card>
                        </Col>
                    </Row>
                </Container>
            </div>
        </React.Fragment>
    );
};

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