import React, { useState, useEffect, useMemo, useRef } from 'react';
import axios from 'axios';
import { Row, Col, Form, Button, Alert, Badge } from 'react-bootstrap';
import FormDateInputEs from '../../../../../Components/Common/FormDateInputEs';
import estilosFoco from '../../../Contratos/Shared/estilosFocoAccesible.module.css';
import styles from '../../Sips.module.css';
import { SipsProviderConfig, ConsumoLuzRow, ConsumoGasRow, isLuzResponse, isGasResponse } 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 { focusPanelById } from '../../utils/sipsFocusUtils';

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

const AudaxSipsPanel: React.FC<Props> = ({ codCom, provider }) => {
    const [activeTab, setActiveTab] = useState<SipsPanelTabId>('datos-suministros');
    const pendingFocusPanel = useRef<string | null>(null);
    const [cups, setCups] = useState('');
    const [tipoServicio, setTipoServicio] = useState('');
    const [tarifa, setTarifa] = useState('');
    const [vencimientoMin, setVencimientoMin] = useState('');
    const [vencimientoMax, setVencimientoMax] = useState('');

    const [provincias, setProvincias] = useState<any[]>([]);
    const [localidadesPorProvincia, setLocalidadesPorProvincia] = useState<any[]>([]);
    const [selectedProvinciaId, setSelectedProvinciaId] = useState<number | ''>('');
    const [selectedLocalidadId, setSelectedLocalidadId] = useState<number | ''>('');
    const [codigoPostal, setCodigoPostal] = useState('');

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

    const isLuz = result ? isLuzResponse(result) : tipoServicio === 'luz';
    const isGas = result ? isGasResponse(result) : tipoServicio === 'gas';

    const registrosLuz = useMemo(
        () => (result && isLuzResponse(result) ? result.selectFinal : []),
        [result]
    );
    const registrosGas = useMemo(
        () => (result && isGasResponse(result) ? result.selectFinal : []),
        [result]
    );

    useEffect(() => {
        // @ts-ignore
        axios.get(route('provincias.listar'))
            .then((res) => setProvincias(res.data?.data || []))
            .catch((err) => console.error('Error cargando provincias:', err));
    }, []);

    useEffect(() => {
        if (selectedProvinciaId) {
            // @ts-ignore
            axios.get(route('provincias.clave', selectedProvinciaId))
                .then((res) => setLocalidadesPorProvincia(res.data?.data?.localidades || []))
                .catch((err) => console.error('Error cargando localidades:', err));
        } else {
            setLocalidadesPorProvincia([]);
            setSelectedLocalidadId('');
            setCodigoPostal('');
        }
    }, [selectedProvinciaId]);

    useEffect(() => {
        const ultimoLuz = registrosLuz[0] as ConsumoLuzRow | undefined;
        const ultimoGas = registrosGas[0] as ConsumoGasRow | undefined;
        if (ultimoLuz?.Tarifa) {
            setTarifa(String(ultimoLuz.Tarifa));
        } else if (ultimoGas?.Cod_Peaje) {
            setTarifa(String(ultimoGas.Cod_Peaje));
        }
    }, [registrosLuz, registrosGas]);

    const handleConsultar = async (switchToConsumo = false) => {
        const data = await consultar({ codCom, cups, tipo: tipoServicio });
        if (data?.lecturas?.tipo === 'luz' || data?.lecturas?.tipo === 'gas') {
            setTipoServicio(data.lecturas.tipo);
        }
        if (switchToConsumo && data) {
            setActiveTab('consumo');
        }
    };

    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 goToConsumo = () => {
        pendingFocusPanel.current = 'sips-panel-consumo';
        setActiveTab('consumo');
    };

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

            <SipsPanelLayout
                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 ? 'Luz' : 'Gas'} · {result.selectFinal.length} registros
                            </Badge>
                        )}
                    </div>
                }
                tabs={
                    <SipsPanelTabs
                        activeTab={activeTab}
                        onTabChange={setActiveTab}
                        onTabActivate={handleTabActivate}
                    />
                }
                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>

                    <Form onSubmit={(e) => e.preventDefault()}>
                        <Row className="mb-3">
                            <Col md={3} className="mb-2">
                                <Form.Label>CUPS</Form.Label>
                                <Form.Control
                                    type="text"
                                    placeholder="Ej: ES0306..."
                                    value={cups}
                                    onChange={(e) => setCups(e.target.value)}
                                />
                            </Col>
                            <Col md={3} className="mb-2">
                                <Form.Label>Tipo Servicio</Form.Label>
                                <Form.Select value={tipoServicio} onChange={(e) => setTipoServicio(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} className="mb-2">
                                <Form.Label>{isGas ? 'Peaje' : 'Tarifa'}</Form.Label>
                                <Form.Control
                                    type="text"
                                    placeholder={isGas ? 'R1, R2...' : '2.0TD'}
                                    value={tarifa}
                                    readOnly={!!result}
                                />
                            </Col>
                            <Col md={3} className="mb-2">
                                <Form.Label>CIF</Form.Label>
                                <Form.Control type="text" placeholder="12345678" />
                            </Col>
                        </Row>

                        <Row className="mb-3">
                            <Col md={3} className="mb-2">
                                <Form.Label>Tipo Titular</Form.Label>
                                <Form.Select>
                                    <option value="">Seleccione...</option>
                                    <option value="empresa">Empresa</option>
                                    <option value="particular">Particular</option>
                                </Form.Select>
                            </Col>
                            <Col md={9} className="mb-2">
                                <Form.Label>Titular</Form.Label>
                                <Form.Control type="text" placeholder="Nombre completo" />
                            </Col>
                        </Row>

                        <Row className="mb-3">
                            <Col md={5} className="mb-2">
                                <Form.Label>Provincia</Form.Label>
                                <Form.Select
                                    value={selectedProvinciaId}
                                    onChange={(e) => {
                                        const pId = e.target.value ? parseInt(e.target.value) : '';
                                        setSelectedProvinciaId(pId);
                                        setSelectedLocalidadId('');
                                        setCodigoPostal('');
                                    }}
                                >
                                    <option value="">Seleccione...</option>
                                    {provincias.map((p) => (
                                        <option key={p.CodPro} value={p.CodPro}>{p.DesPro}</option>
                                    ))}
                                </Form.Select>
                            </Col>
                            <Col md={5} className="mb-2">
                                <Form.Label>Localidad</Form.Label>
                                <Form.Select
                                    value={selectedLocalidadId}
                                    disabled={!selectedProvinciaId}
                                    onChange={(e) => {
                                        const lId = e.target.value ? parseInt(e.target.value) : '';
                                        setSelectedLocalidadId(lId);
                                        if (lId) {
                                            const loc = localidadesPorProvincia.find((l: any) => l.CodLoc === lId);
                                            if (loc) setCodigoPostal(loc.CPLoc || '');
                                        } else {
                                            setCodigoPostal('');
                                        }
                                    }}
                                >
                                    <option value="">
                                        {selectedProvinciaId ? 'Seleccione...' : 'Seleccione una provincia primero'}
                                    </option>
                                    {localidadesPorProvincia.map((l: any) => (
                                        <option key={l.CodLoc} value={l.CodLoc}>{l.DesLoc}</option>
                                    ))}
                                </Form.Select>
                            </Col>
                            <Col md={2} className="mb-2">
                                <Form.Label>C?digo Postal</Form.Label>
                                <Form.Control type="text" value={codigoPostal} readOnly disabled />
                            </Col>
                        </Row>

                        <Row className="mb-3">
                            <Col md={6} className="mb-2">
                                <Form.Label>Direcci?n</Form.Label>
                                <Form.Control type="text" placeholder="Calle, N?mero..." />
                            </Col>
                            <Col md={3} className="mb-2">
                                <Form.Label>Optimizaci?n</Form.Label>
                                <Form.Select>
                                    <option value="">Seleccione...</option>
                                    <option value="si">Si</option>
                                    <option value="no">No</option>
                                </Form.Select>
                            </Col>
                            <Col md={3} className="mb-2">
                                <Form.Label>Ahorro M?nimo</Form.Label>
                                <Form.Control type="number" step="0.01" />
                            </Col>
                        </Row>

                        <Row className="mb-4">
                            <Col md={4} className="mb-2">
                                <Form.Label>Ahorro M?ximo</Form.Label>
                                <Form.Control type="number" step="0.01" />
                            </Col>
                            <Col md={4} className="mb-2">
                                <Form.Label>Consumo M?nimo</Form.Label>
                                <Form.Control type="number" step="0.01" />
                            </Col>
                            <Col md={4} className="mb-2">
                                <Form.Label>Consumo M?ximo</Form.Label>
                                <Form.Control type="number" step="0.01" />
                            </Col>
                        </Row>

                        <Row className="mb-4">
                            <Col md={3} className="mb-2">
                                <Form.Label>Potencia M?nima</Form.Label>
                                <Form.Control type="number" step="0.01" />
                            </Col>
                            <Col md={3} className="mb-2">
                                <Form.Label>Potencia M?xima</Form.Label>
                                <Form.Control type="number" step="0.01" />
                            </Col>
                            <Col md={3} className="mb-2">
                                <Form.Label>Vencimiento M?nimo</Form.Label>
                                <FormDateInputEs value={vencimientoMin} onChange={setVencimientoMin} />
                            </Col>
                            <Col md={3} className="mb-2">
                                <Form.Label>Vencimiento M?ximo</Form.Label>
                                <FormDateInputEs value={vencimientoMax} onChange={setVencimientoMax} />
                            </Col>
                        </Row>

                        <div className="d-flex gap-2">
                            <Button
                                type="button"
                                className={`btn btn-primary ${styles.btnBuscar}`}
                                onClick={() => handleConsultar(false)}
                                disabled={isSubmitting}
                            >
                                <i className="ri-search-line me-1"></i>
                                {isSubmitting ? 'Buscando...' : 'Buscar'}
                            </Button>
                            {result && (
                                <Button variant="outline-secondary" onClick={goToConsumo}>
                                    Ver historial de consumo
                                </Button>
                            )}
                        </div>
                    </Form>

                    {result && (
                        <div className="mt-4">
                            <div className={styles.seccionTitulo}>
                                <h5>Resumen de lecturas SIPS</h5>
                            </div>
                            <SipsResumenLecturas result={result} />
                        </div>
                    )}
                </div>
                    ) : null
                }
                consumoPanel={
                    activeTab === 'consumo' ? (
                <div role="tabpanel" id="sips-panel-consumo" aria-labelledby="tab-consumo">
                    <div className={styles.seccionTitulo}>
                        <h5>Consumos CUPS</h5>
                    </div>

                    <Form onSubmit={(e) => e.preventDefault()}>
                        <Row className="mb-4 align-items-end">
                            <Col md={6} className="mb-2">
                                <Form.Label>CUPS</Form.Label>
                                <Form.Control
                                    type="text"
                                    placeholder="ES03060..."
                                    value={cups}
                                    onChange={(e) => setCups(e.target.value)}
                                />
                            </Col>
                            <Col md={4} className="mb-2">
                                <Form.Label>Tipo Servicio</Form.Label>
                                <Form.Select value={tipoServicio} onChange={(e) => setTipoServicio(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={2} className="mb-2">
                                <Button
                                    type="button"
                                    className={`btn btn-primary ${styles.btnBuscar} w-100`}
                                    onClick={() => handleConsultar(true)}
                                    disabled={isSubmitting}
                                >
                                    {isSubmitting ? '...' : 'Consultar'}
                                </Button>
                            </Col>
                        </Row>
                    </Form>

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

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

export default AudaxSipsPanel;