import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Row, Col, Card, Form, Button, Spinner } from 'react-bootstrap';
import { router } from '@inertiajs/react';
import Swal from 'sweetalert2';
import { FilterX, Zap, Flame } from 'lucide-react';
import { useLoading } from '../../../../LoadingContext';
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';
  flash?: any;
  onAgregar?: (tipo: 'electrica' | 'gas') => void;
}

const restaurarFoco = (el?: HTMLElement | null) => {
  if (el?.focus) requestAnimationFrame(() => el.focus());
};

const esTarifaActiva = (item: any) =>
  item?.activa === true
  || item?.activa === 1
  || item?.EstTarEle === 1
  || item?.EstTarEle === '1'
  || item?.EstTarGas === 1
  || item?.EstTarGas === '1';

const compararPorNombre = (a: any, b: any) =>
  (a?.nombre ?? '').localeCompare(b?.nombre ?? '', 'es', { sensitivity: 'base', numeric: true });

const renderTarifaCard = (
  item: any,
  idx: number,
  handlers: {
    handleView: (item: any) => void;
    handleEdit: (item: any) => void;
    handleEstado: (item: any, accion: 'activar' | 'suspender', d?: HTMLElement) => void;
    handleDelete: (item: any, d?: HTMLElement) => void;
  },
) => (
  <div key={`${item.id}-${idx}`}>
    <TarifaCard
      tarifa={item}
      onConsultar={handlers.handleView}
      onEditar={handlers.handleEdit}
      onActivar={(t, d) => handlers.handleEstado(t, 'activar', d)}
      onSuspender={(t, d) => handlers.handleEstado(t, 'suspender', d)}
      onEliminar={handlers.handleDelete}
    />
  </div>
);

const TarifasCardsView: React.FC<Props> = ({ initialItems, initialPagination, tipoTarifaInicial, flash, onAgregar }) => {
  const { showLoading, hideLoading } = useLoading();
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const [tipo, setTipo] = useState<'electrica' | 'gas'>(tipoTarifaInicial);
  const [filters, setFilters] = useState({ NomTar: '', TipTen: '', EstTar: '', 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 : '', EstTar: filters.EstTar, tipo: nuevoTipo };
    setFilters(next);
    resetWithFilters(next);
    router.get(route('tarifas.index'), { tipo: nuevoTipo }, { preserveState: true, preserveScroll: true, replace: true });
  };

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

  const onEstadoChange = (value: string) => {
    if (debounceRef.current) clearTimeout(debounceRef.current);
    const next = { ...filters, EstTar: value };
    setFilters(next);
    resetWithFilters(next);
  };

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

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

  const handleView = (item: any) => {
    showLoading();
    router.visit(route('tarifas.ver', { tipo: item.tipo, id: item.id }), { onFinish: hideLoading, onError: hideLoading });
  };

  const handleEdit = (item: any) => {
    showLoading();
    router.visit(route('tarifas.editar', { tipo: item.tipo, id: item.id }), { onFinish: hideLoading, onError: hideLoading });
  };

  const handleEstado = async (item: any, accion: 'activar' | 'suspender', disparador?: HTMLElement) => {
    const activar = accion === 'activar';
    const result = await Swal.fire({
      title: activar ? 'Activar tarifa' : 'Suspender tarifa',
      text: `¿Deseas ${activar ? 'activar' : 'suspender'} la tarifa ${item.nombre}?`,
      icon: activar ? 'question' : 'warning',
      showCancelButton: true,
      confirmButtonText: activar ? 'Sí, activar' : 'Sí, suspender',
      cancelButtonText: 'Cancelar',
      returnFocus: false,
    });
    if (!result.isConfirmed) { restaurarFoco(disparador); return; }
    showLoading();
    router.put(route(activar ? 'tarifas.activar' : 'tarifas.suspender', { tipo: item.tipo, id: item.id }), {}, {
      onFinish: () => {
        hideLoading();
        resetWithFilters(filters);
        restaurarFoco(disparador);
      },
      onSuccess: (page) => {
        const f = (page.props as any)?.flash;
        Swal.fire({
          title: f?.message || f?.error || 'Operación completada',
          icon: f?.type || (f?.error ? 'error' : 'success'),
          timer: 1200,
          showConfirmButton: false,
          returnFocus: false,
        });
      },
    });
  };

  const handleDelete = async (item: any, disparador?: HTMLElement) => {
    const result = await Swal.fire({
      title: 'Eliminar tarifa',
      text: `¿Deseas eliminar permanentemente la tarifa ${item.nombre}?`,
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Sí, eliminar',
      cancelButtonText: 'Cancelar',
      confirmButtonColor: '#dc3545',
      returnFocus: false,
    });
    if (!result.isConfirmed) { restaurarFoco(disparador); return; }
    showLoading();
    router.delete(route('tarifas.destroy', { tipo: item.tipo, id: item.id }), {
      onFinish: () => {
        hideLoading();
        restaurarFoco(disparador);
      },
      onSuccess: (page) => {
        const f = (page.props as any)?.flash;
        if (f?.message || f?.error) {
          Swal.fire({
            title: f.message || f.error,
            icon: f.type || (f.error ? 'error' : 'success'),
            timer: f.error ? undefined : 1500,
            showConfirmButton: !!f.error,
            confirmButtonText: 'Aceptar',
            returnFocus: false,
          });
        }
      },
    });
  };

  const { activas, inactivas } = useMemo(() => {
    const act: any[] = [];
    const inact: any[] = [];
    (items as any[]).forEach((item) => {
      if (esTarifaActiva(item)) act.push(item);
      else inact.push(item);
    });
    act.sort(compararPorNombre);
    inact.sort(compararPorNombre);
    return { activas: act, inactivas: inact };
  }, [items]);

  const mostrarSecciones = filters.EstTar === '';
  const cardHandlers = { handleView, handleEdit, handleEstado, handleDelete };
  const mostrarActivas = filters.EstTar !== '0' && activas.length > 0;
  const mostrarInactivas = filters.EstTar !== '1' && inactivas.length > 0;

  return (
    <div className={`${styles.contenedorVista} ${estilosFoco.contenedorAccesibleContratos}`}>
      <EneonTabs
        tabs={[
          { id: 'electrica', label: 'Tarifas Eléctricas', icon: <Zap size={16} />, variant: 'electrico', panelId: 'panel-tarifas-electrica' },
          { id: 'gas', label: 'Tarifas 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>
            <div className="d-flex gap-2 flex-wrap">
              {onAgregar && (
                <Button type="button" variant="outline-warning" size="sm" onClick={() => onAgregar(tipo)} aria-label="Agregar nueva tarifa">
                  <i className="fas fa-plus me-1" aria-hidden="true" /> Agregar tarifa
                </Button>
              )}
              {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>
          </div>
          <Row className="g-2 mt-2">
            <Col xs={12} sm={6} lg={tipo === 'electrica' ? 4 : 6}>
              <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={4}>
                <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>
            )}
            <Col xs={12} sm={6} lg={tipo === 'electrica' ? 4 : 6}>
              <Form.Group controlId="filtro-tar-estado">
                <Form.Label className="small mb-1">Estado</Form.Label>
                <Form.Select size="sm" value={filters.EstTar} onChange={(e) => onEstadoChange(e.target.value)} aria-label="Filtrar por estado activa o inactiva">
                  <option value="">Todas</option>
                  <option value="1">Activa</option>
                  <option value="0">Inactiva</option>
                </Form.Select>
              </Form.Group>
            </Col>
          </Row>
        </Card.Body>
      </Card>

      <div role="tabpanel" aria-labelledby={tipo === 'electrica' ? 'tab-tarifas-electrica' : 'tab-tarifas-gas'}>
        {mostrarActivas && (
          <section className={styles.seccionGrupo} aria-label="Tarifas activas">
            {mostrarSecciones && (
              <div className={styles.seccionTituloActiva}>
                <span className={styles.seccionIndicadorActiva} aria-hidden="true" />
                Tarifas activas
                <span className={styles.seccionContador}>{activas.length}</span>
              </div>
            )}
            <div className={styles.gridItems}>
              {activas.map((item, idx) => renderTarifaCard(item, idx, cardHandlers))}
            </div>
          </section>
        )}

        {mostrarInactivas && (
          <section className={`${styles.seccionGrupo} ${mostrarActivas ? styles.seccionGrupoSeparada : ''}`} aria-label="Tarifas inactivas">
            {mostrarSecciones && (
              <div className={styles.seccionTituloInactiva}>
                <span className={styles.seccionIndicadorInactiva} aria-hidden="true" />
                Tarifas inactivas
                <span className={styles.seccionContador}>{inactivas.length}</span>
              </div>
            )}
            <div className={styles.gridItems}>
              {inactivas.map((item, idx) => renderTarifaCard(item, idx, cardHandlers))}
            </div>
          </section>
        )}

        {isLoading && (
          <div className={`${styles.gridItems} ${styles.gridItemAnchoCompleto}`}>
            <div className="text-center py-4" style={{ gridColumn: '1 / -1' }}>
              <Spinner animation="border" variant="primary" role="status"><span className="visually-hidden">Cargando…</span></Spinner>
            </div>
          </div>
        )}
        {hasMore && !isLoading && (
          <div ref={sentinelRef} style={{ height: 20 }} aria-hidden="true" />
        )}
      </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;