import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Row, Col, Card, Form, Button, Spinner } from 'react-bootstrap';
import { FilterX, Zap, Flame } from 'lucide-react';
import useInfiniteTarifas from './hooks/useInfiniteTarifas';
import TarifaCard from './TarifaCard';
import estilosFoco from '../../Contratos/Shared/estilosFocoAccesible.module.css';
import styles from './TarifasCardsView.module.css';
import { EneonTabs } from '../../Shared/Tabs';

interface Props {
  initialItems: any[];
  initialPagination: any;
  tipoTarifaInicial: 'electrica' | 'gas';
}

const TarifasCardsView: React.FC<Props> = ({ initialItems, initialPagination, tipoTarifaInicial }) => {
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const [tipo, setTipo] = useState<'electrica' | 'gas'>(tipoTarifaInicial);
  const [filters, setFilters] = useState({ NomTar: '', TipTen: '', tipo: tipoTarifaInicial });

  const { items, pagination, isLoading, hasMore, resetWithFilters, sentinelRef } = useInfiniteTarifas({
    initialItems,
    initialPagination,
    filters,
  });

  useEffect(() => () => { if (debounceRef.current) clearTimeout(debounceRef.current); }, []);

  const aplicarFiltros = useCallback((next: typeof filters) => {
    if (debounceRef.current) clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(() => resetWithFilters(next), 500);
  }, [resetWithFilters]);

  const cambiarTipo = (nuevoTipo: 'electrica' | 'gas') => {
    if (debounceRef.current) clearTimeout(debounceRef.current);
    setTipo(nuevoTipo);
    const next = { NomTar: filters.NomTar, TipTen: nuevoTipo === 'electrica' ? filters.TipTen : '', tipo: nuevoTipo };
    setFilters(next);
    resetWithFilters(next);
  };

  const onFilterChange = (key: 'NomTar' | 'TipTen', value: string) => {
    const next = { ...filters, [key]: value };
    setFilters(next);
    aplicarFiltros(next);
  };

  const limpiarFiltros = () => {
    if (debounceRef.current) clearTimeout(debounceRef.current);
    const next = { NomTar: '', TipTen: '', tipo };
    setFilters(next);
    resetWithFilters(next);
  };

  const hayFiltrosActivos = filters.NomTar.trim() !== '' || filters.TipTen.trim() !== '';

  return (
    <div className={`${styles.contenedorVista} ${estilosFoco.contenedorAccesibleContratos}`}>
      <EneonTabs
        tabs={[
          {
            id: 'electrica',
            label: 'Eléctricas',
            icon: <Zap size={16} />,
            variant: 'electrico',
            panelId: 'panel-tarifas-electrica',
          },
          {
            id: 'gas',
            label: 'Gas',
            icon: <Flame size={16} />,
            variant: 'gas',
            panelId: 'panel-tarifas-gas',
          },
        ]}
        activeTabId={tipo}
        onTabChange={(tabId) => cambiarTipo(tabId as 'electrica' | 'gas')}
        ariaLabel="Tipo de tarifa"
        className="mb-3"
      />

      <Card className={`mb-3 ${styles.filtrosCard}`}>
        <Card.Body>
          <div className={styles.cabeceraFiltros}>
            <Form.Label className={`${styles.tituloFiltros} d-flex flex-wrap align-items-center gap-2 mb-0`}>
              <span>Filtros</span>
              <span className={styles.contadorResultados} aria-live="polite">
                Mostrando {items.length} de {pagination.total.toLocaleString('es-ES')} tarifas
              </span>
            </Form.Label>
            {hayFiltrosActivos && (
              <Button type="button" variant="outline-secondary" size="sm" onClick={limpiarFiltros} disabled={isLoading} aria-label="Limpiar filtros">
                <FilterX size={16} className="me-1" aria-hidden="true" /> Limpiar filtros
              </Button>
            )}
          </div>
          <Row className="g-2 mt-2">
            <Col xs={12} sm={6} lg={tipo === 'electrica' ? 6 : 12}>
              <Form.Group controlId="filtro-tar-nombre">
                <Form.Label className="small mb-1">Nombre tarifa</Form.Label>
                <Form.Control size="sm" value={filters.NomTar} onChange={(e) => onFilterChange('NomTar', e.target.value)} placeholder="Buscar por nombre" />
              </Form.Group>
            </Col>
            {tipo === 'electrica' && (
              <Col xs={12} sm={6} lg={6}>
                <Form.Group controlId="filtro-tar-tension">
                  <Form.Label className="small mb-1">Tensión</Form.Label>
                  <Form.Control size="sm" value={filters.TipTen} onChange={(e) => onFilterChange('TipTen', e.target.value)} placeholder="Buscar por tensión" />
                </Form.Group>
              </Col>
            )}
          </Row>
        </Card.Body>
      </Card>

      <div className={styles.gridItems} role="tabpanel" aria-labelledby={tipo === 'electrica' ? 'tab-tarifas-electrica' : 'tab-tarifas-gas'}>
        {items.map((item: any, idx) => (
          <div key={`${item.id}-${idx}`}><TarifaCard tarifa={item} /></div>
        ))}
        {isLoading && (
          <div className={`${styles.gridItemAnchoCompleto} text-center py-4`}>
            <Spinner animation="border" variant="primary" role="status"><span className="visually-hidden">Cargando…</span></Spinner>
          </div>
        )}
        {hasMore && !isLoading && (
          <div className={styles.gridItemAnchoCompleto}><div ref={sentinelRef} style={{ height: 20 }} aria-hidden="true" /></div>
        )}
      </div>

      {items.length === 0 && !isLoading && (
        <div className={styles.estadoVacio} role="status">No hay tarifas que coincidan con la búsqueda</div>
      )}
      {!hasMore && items.length > 0 && (
        <div className="text-center text-muted py-4"><small>Has visto todas las tarifas ({pagination.total.toLocaleString('es-ES')})</small></div>
      )}
    </div>
  );
};

export default TarifasCardsView;