import React, { useCallback, useEffect, 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 } from 'lucide-react';
import { useLoading } from '../../../../LoadingContext';
import useInfiniteProductos from './hooks/useInfiniteProductos';
import ProductoCard from './ProductoCard';
import estilosFoco from '../../Contratos/Shared/estilosFocoAccesible.module.css';
import styles from './ProductosCardsView.module.css';

interface Props {
  initialItems: any[];
  initialPagination: any;
  flash: any;
}

const FILTROS_INICIALES = { DesPro: '', CodigoServicio: '', RazSocCom: '' };

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

const ProductosCardsView: React.FC<Props> = ({ initialItems, initialPagination, flash }) => {
  const { showLoading, hideLoading } = useLoading();
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const [filters, setFilters] = useState(FILTROS_INICIALES);

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

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

  const onFilterChange = useCallback((key: keyof typeof FILTROS_INICIALES, value: string) => {
    const next = { ...filters, [key]: value };
    setFilters(next);
    if (debounceRef.current) clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(() => resetWithFilters(next), 500);
  }, [filters, resetWithFilters]);

  const limpiarFiltros = useCallback(() => {
    if (debounceRef.current) clearTimeout(debounceRef.current);
    setFilters(FILTROS_INICIALES);
    resetWithFilters(FILTROS_INICIALES);
  }, [resetWithFilters]);

  const hayFiltrosActivos = Object.values(filters).some((v) => v.trim() !== '');

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

  const handleEdit = (item: any) => {
    showLoading();
    router.visit(route('productos.editar', item.CodPro), { 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 producto' : 'Suspender producto',
      text: `¿Deseas ${activar ? 'activar' : 'suspender'} el producto ${item.DesPro}?`,
      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 ? 'productos.activar' : 'productos.suspender', item.CodPro), {}, {
      onFinish: () => {
        hideLoading();
        resetWithFilters(filters);
        Swal.fire({ title: flash?.message || 'Operación completada', icon: flash?.type || 'success', timer: 1200, showConfirmButton: false, returnFocus: false });
        restaurarFoco(disparador);
      },
    });
  };

  return (
    <div className={`${styles.contenedorVista} ${estilosFoco.contenedorAccesibleContratos}`}>
      <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')} productos
              </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={4}>
              <Form.Group controlId="filtro-pro-descripcion">
                <Form.Label className="small mb-1">Descripción</Form.Label>
                <Form.Control size="sm" value={filters.DesPro} onChange={(e) => onFilterChange('DesPro', e.target.value)} placeholder="Buscar por descripción" />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={4}>
              <Form.Group controlId="filtro-pro-servicio">
                <Form.Label className="small mb-1">Código servicio</Form.Label>
                <Form.Control size="sm" value={filters.CodigoServicio} onChange={(e) => onFilterChange('CodigoServicio', e.target.value)} placeholder="Buscar por código servicio" />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={4}>
              <Form.Group controlId="filtro-pro-comercializadora">
                <Form.Label className="small mb-1">Comercializadora</Form.Label>
                <Form.Control size="sm" value={filters.RazSocCom} onChange={(e) => onFilterChange('RazSocCom', e.target.value)} placeholder="Buscar por comercializadora" />
              </Form.Group>
            </Col>
          </Row>
        </Card.Body>
      </Card>

      <div className={styles.gridItems}>
        {items.map((item: any, idx) => (
          <div key={`${item.CodPro}-${idx}`}>
            <ProductoCard
              producto={item}
              onConsultar={handleView}
              onEditar={handleEdit}
              onActivar={(p, d) => handleEstado(p, 'activar', d)}
              onSuspender={(p, d) => handleEstado(p, 'suspender', d)}
            />
          </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 productos que coincidan con la búsqueda</div>
      )}
      {!hasMore && items.length > 0 && (
        <div className="text-center text-muted py-4"><small>Has visto todos los productos ({pagination.total.toLocaleString('es-ES')})</small></div>
      )}
    </div>
  );
};

export default ProductosCardsView;