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 useInfiniteAnexoProductos from './hooks/useInfiniteAnexoProductos';
import AnexoProductoCard from './AnexoProductoCard';
import estilosFoco from '../../Contratos/Shared/estilosFocoAccesible.module.css';
import styles from './AnexoProductosCardsView.module.css';

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

const FILTROS_INICIALES = { DesAnePro: '', DesPro: '', RazSocCom: '', TipPre: '' };
const restaurarFoco = (el?: HTMLElement | null) => { if (el?.focus) requestAnimationFrame(() => el.focus()); };

const AnexoProductosCardsView: 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 } = useInfiniteAnexoProductos({
    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('anexo-productos.show', item.CodAnePro), { onFinish: hideLoading, onError: hideLoading });
  };

  const handleEdit = (item: any) => {
    showLoading();
    router.visit(route('anexo-productos.edit', item.CodAnePro), { 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 anexo' : 'Suspender anexo',
      text: `¿Deseas ${activar ? 'activar' : 'suspender'} el anexo ${item.DesAnePro}?`,
      icon: activar ? 'question' : 'warning',
      showCancelButton: true,
      confirmButtonText: activar ? 'Sí, activar' : 'Sí, suspender',
      cancelButtonText: 'Cancelar',
      returnFocus: false,
    });
    if (!result.isConfirmed) { restaurarFoco(disparador); return; }
    showLoading();
    router.post(route(activar ? 'anexo-productos.activar' : 'anexo-productos.suspender', item.CodAnePro), {}, {
      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')} anexos
              </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={3}>
              <Form.Group controlId="filtro-ane-descripcion">
                <Form.Label className="small mb-1">Descripción anexo</Form.Label>
                <Form.Control size="sm" value={filters.DesAnePro} onChange={(e) => onFilterChange('DesAnePro', e.target.value)} placeholder="Buscar anexo" />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={3}>
              <Form.Group controlId="filtro-ane-producto">
                <Form.Label className="small mb-1">Producto</Form.Label>
                <Form.Control size="sm" value={filters.DesPro} onChange={(e) => onFilterChange('DesPro', e.target.value)} placeholder="Buscar producto" />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={3}>
              <Form.Group controlId="filtro-ane-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 comercializadora" />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={3}>
              <Form.Group controlId="filtro-ane-tipoprecio">
                <Form.Label className="small mb-1">Tipo precio</Form.Label>
                <Form.Control size="sm" value={filters.TipPre} onChange={(e) => onFilterChange('TipPre', e.target.value)} placeholder="Buscar tipo precio" />
              </Form.Group>
            </Col>
          </Row>
        </Card.Body>
      </Card>

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

export default AnexoProductosCardsView;