import React, { useState } 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 AdxSuministroDetails from './AdxSuministroDetails';

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 {
        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();
        }
    };

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

            <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>

            <SipsPanelTabs activeTab={activeTab} onTabChange={setActiveTab} />

            <Form onSubmit={(e) => e.preventDefault()}>
                <Row className="align-items-end g-3 mb-4">
                    <Col md={5}>
                        <Form.Label className="fw-semibold">CUPS</Form.Label>
                        <Form.Control
                            type="text"
                            placeholder="ES00210000..."
                            value={cups}
                            onChange={(e) => handleCupsChange(e.target.value)}
                        />
                    </Col>
                    <Col md={4}>
                        <Form.Label className="fw-semibold">Tipo Servicio</Form.Label>
                        <Form.Select
                            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>

            {activeTab === 'datos-suministros' && (
                <div role="tabpanel" id="sips-panel-datos-suministros" aria-labelledby="tab-datos-suministros">
                    <div className="p-3 bg-light mb-3 rounded" style={{ backgroundColor: '#e9ecef' }}>
                        <h5 className="mb-0">Datos del Punto de Suministro</h5>
                    </div>

                    {!result ? (
                        <Alert variant="light" className="border text-muted mb-0">
                            Consulte un CUPS para ver los datos de suministro.
                        </Alert>
                    ) : (
                        <>
                            {result.distributor_table && (
                                <p className="text-muted small mb-2">
                                    Distribuidora: <code>{result.distributor_table}</code>
                                    {result.cups && <> ┬À CUPS: <strong>{result.cups}</strong></>}
                                </p>
                            )}
                            <AdxSuministroDetails suministros={suministros} />
                            {!result.sin_datos && (
                                <div className="mt-4">
                                    <div className="p-3 bg-light mb-3 rounded" style={{ backgroundColor: '#e9ecef' }}>
                                        <h5 className="mb-0">Resumen de lecturas</h5>
                                    </div>
                                    <SipsResumenLecturas result={result} />
                                </div>
                            )}
                        </>
                    )}
                </div>
            )}

            {activeTab === 'consumo' && (
                <div role="tabpanel" id="sips-panel-consumo" aria-labelledby="tab-consumo">
                    <div className="p-3 bg-light mb-3 rounded" style={{ backgroundColor: '#e9ecef' }}>
                        <h5 className="mb-0">Historial de consumo</h5>
                    </div>

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

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

export default AdxSipsPanel;