import React, { useState, useEffect, useRef } from 'react';
import { Row, Col, Form, Button, Alert, Badge } from 'react-bootstrap';
import estilosFoco from '../../../Contratos/Shared/estilosFocoAccesible.module.css';
import styles from '../../Sips.module.css';
import {
    SipsProviderConfig,
    isLuzResponse,
    isElectricityTipo,
} from '../../types';
import { useSipsConsulta } from '../../hooks/useSipsConsulta';
import { SipsResumenLecturas, SipsTablaConsumo } from '../shared/SipsConsumoResults';
import SipsPanelTabs, { SipsPanelTabId } from '../shared/SipsPanelTabs';
import SipsPanelLayout from '../shared/SipsPanelLayout';
import SipsSuministroDetalle from '../shared/SipsSuministroDetalle';
import { focusPanelById } from '../../utils/sipsFocusUtils';

interface Props {
    codCom: number;
    provider: SipsProviderConfig;
}

/** Panel ADX: CUPS + Electricity/Gas, tabs Datos Suministros y Consumo. */
const AdxSipsPanel: React.FC<Props> = ({ codCom, provider }) => {
    const [activeTab, setActiveTab] = useState<SipsPanelTabId>('datos-suministros');
    const [cups, setCups] = useState('');
    const [tipoServicio, setTipoServicio] = useState('');
    const pendingFocusPanel = useRef<string | null>(null);

    const {
        consultar,
        reset,
        isSubmitting,
        errorMessage,
        warningMessage,
        result,
        setErrorMessage,
    } = useSipsConsulta();

    const isLuz = result ? isLuzResponse(result) : isElectricityTipo(tipoServicio);
    const suministros = result?.suministros ?? [];

    const handleConsultar = async (switchToConsumo = false) => {
        const data = await consultar({ codCom, cups, tipo: tipoServicio });
        if (data && switchToConsumo) {
            setActiveTab('consumo');
        }
    };

    const handleTipoChange = (value: string) => {
        setTipoServicio(value);
        reset();
    };

    const handleCupsChange = (value: string) => {
        setCups(value);
        if (result) {
            reset();
        }
    };

    const handleTabActivate = (tabId: SipsPanelTabId) => {
        pendingFocusPanel.current =
            tabId === 'consumo' ? 'sips-panel-consumo' : 'sips-panel-datos-suministros';
    };

    useEffect(() => {
        if (!pendingFocusPanel.current) {
            return;
        }

        const panelId = pendingFocusPanel.current;
        pendingFocusPanel.current = null;
        focusPanelById(panelId);
    }, [activeTab]);

    const badges = (
        <div className="d-flex justify-content-between align-items-center mb-3">
            <Badge bg="secondary">{provider.label}</Badge>
            {result && (
                <Badge bg={isLuz ? 'warning' : 'info'} className="text-dark">
                    {isLuz ? 'Electricity' : 'Gas'}
                    {' · '}
                    {result.sin_datos
                        ? 'Sin datos'
                        : `${result.selectFinal.length} lecturas`}
                </Badge>
            )}
        </div>
    );

    const search = (
        <Form onSubmit={(e) => e.preventDefault()}>
            <Row className="align-items-end g-3 mb-4">
                <Col md={5}>
                    <Form.Label className="fw-semibold" htmlFor="adx-sips-cups">CUPS</Form.Label>
                    <Form.Control
                        id="adx-sips-cups"
                        type="text"
                        placeholder="ES00210000..."
                        value={cups}
                        onChange={(e) => handleCupsChange(e.target.value)}
                    />
                </Col>
                <Col md={4}>
                    <Form.Label className="fw-semibold" htmlFor="adx-sips-tipo">Tipo Servicio</Form.Label>
                    <Form.Select
                        id="adx-sips-tipo"
                        value={tipoServicio}
                        onChange={(e) => handleTipoChange(e.target.value)}
                    >
                        <option value="">Seleccione...</option>
                        {provider.tipo_servicio_options.map((opt) => (
                            <option key={opt.value} value={opt.value}>
                                {opt.label}
                            </option>
                        ))}
                    </Form.Select>
                </Col>
                <Col md={3}>
                    <Button
                        type="button"
                        className={`btn btn-primary ${styles.btnBuscar} w-100`}
                        disabled={isSubmitting}
                        onClick={() => handleConsultar(activeTab === 'consumo')}
                    >
                        {isSubmitting ? 'Consultando...' : 'Consultar'}
                    </Button>
                </Col>
            </Row>
        </Form>
    );

    const datosPanel = activeTab === 'datos-suministros' ? (
        <div role="tabpanel" id="sips-panel-datos-suministros" aria-labelledby="tab-datos-suministros">
            <div className={styles.seccionTitulo}>
                <h5>Datos del Punto de Suministro</h5>
            </div>

            {!result ? (
                <Alert variant="light" className="border text-muted mb-0" role="status">
                    Consulte un CUPS para ver los datos de suministro.
                </Alert>
            ) : (
                <>
                    <SipsSuministroDetalle suministros={suministros as Record<string, unknown>[]} />
                    {!result.sin_datos && (
                        <div className="mt-4">
                            <div className={styles.seccionTitulo}>
                                <h5>Resumen de lecturas</h5>
                            </div>
                            <SipsResumenLecturas result={result} />
                        </div>
                    )}
                </>
            )}
        </div>
    ) : null;

    const consumoPanel = activeTab === 'consumo' ? (
        <div role="tabpanel" id="sips-panel-consumo" aria-labelledby="tab-consumo">
            <div className={styles.seccionTitulo}>
                <h5>Historial de consumo</h5>
            </div>

            {result && !result.sin_datos && (
                <div className="mb-4">
                    <SipsResumenLecturas result={result} />
                </div>
            )}

            <SipsTablaConsumo result={result} tipoServicio={tipoServicio} />
        </div>
    ) : null;

    return (
        <div className={`mt-4 ${estilosFoco.contenedorAccesibleContratos}`}>
            {errorMessage && (
                <Alert variant="danger" dismissible onClose={() => setErrorMessage(null)}>
                    {errorMessage}
                </Alert>
            )}
            {warningMessage && (
                <Alert variant="warning">{warningMessage}</Alert>
            )}

            <SipsPanelLayout
                badges={badges}
                search={search}
                tabs={
                    <SipsPanelTabs
                        activeTab={activeTab}
                        onTabChange={setActiveTab}
                        onTabActivate={handleTabActivate}
                    />
                }
                datosPanel={datosPanel}
                consumoPanel={consumoPanel}
            />
        </div>
    );
};

export default AdxSipsPanel;