import React from 'react';
import { Button, Form, Spinner } from 'react-bootstrap';
import { ArrowLeft, History, RefreshCw } from 'lucide-react';
import type { EneonTabVariant } from '../../Shared/Tabs/types';
import seccionStyles from './CupsPuntoSeccion.module.css';

export interface CupsHistorialOpcion {
    id: number;
    codigo: string;
}

interface CupsHistorialContextBarProps {
    variant: EneonTabVariant;
    cupsOpciones: CupsHistorialOpcion[];
    selectedCupsId: number | null;
    onSelectCups: (id: number) => void;
    onVolverDatos: () => void;
    onRefrescar: () => void;
    loading?: boolean;
}

export default function CupsHistorialContextBar({
    variant,
    cupsOpciones,
    selectedCupsId,
    onSelectCups,
    onVolverDatos,
    onRefrescar,
    loading = false,
}: CupsHistorialContextBarProps): React.ReactElement {
    const varianteClase = variant === 'gas' ? seccionStyles.barraGas : seccionStyles.barraElectrico;

    return (
        <div
            className={`${seccionStyles.barraContexto} ${varianteClase}`}
            role="region"
            aria-label="Contexto del historial CUPS"
        >
            <div className={seccionStyles.barraContextoIzq}>
                <History size={18} className={seccionStyles.barraIcono} aria-hidden="true" />
                <div>
                    <span className={seccionStyles.barraEtiqueta}>Historial de</span>
                    {cupsOpciones.length > 1 ? (
                        <Form.Select
                            size="sm"
                            className={seccionStyles.selectorCups}
                            value={selectedCupsId ?? ''}
                            onChange={(e) => {
                                const id = Number(e.target.value);
                                if (!Number.isNaN(id) && id > 0) {
                                    onSelectCups(id);
                                }
                            }}
                            aria-label="Seleccionar CUPS para ver su historial"
                        >
                            <option value="" disabled>
                                Seleccione un CUPS…
                            </option>
                            {cupsOpciones.map((op) => (
                                <option key={op.id} value={op.id}>
                                    {op.codigo}
                                </option>
                            ))}
                        </Form.Select>
                    ) : (
                        <code className={seccionStyles.codigoCups}>
                            {cupsOpciones.find((o) => o.id === selectedCupsId)?.codigo ?? '—'}
                        </code>
                    )}
                </div>
            </div>
            <div className={seccionStyles.barraContextoDer}>
                <Button
                    variant="outline-secondary"
                    size="sm"
                    onClick={onVolverDatos}
                    className="d-inline-flex align-items-center gap-1"
                >
                    <ArrowLeft size={14} aria-hidden="true" />
                    Datos actuales
                </Button>
                <Button
                    variant="outline-primary"
                    size="sm"
                    onClick={onRefrescar}
                    disabled={!selectedCupsId || loading}
                    className="d-inline-flex align-items-center gap-1"
                    aria-label="Actualizar historial"
                >
                    {loading ? (
                        <Spinner animation="border" size="sm" role="status" aria-hidden="true" />
                    ) : (
                        <RefreshCw size={14} aria-hidden="true" />
                    )}
                    Actualizar
                </Button>
            </div>
        </div>
    );
}