import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Row, Col, Card, Form, Button, Spinner } from 'react-bootstrap';
import { router } from '@inertiajs/react';
import { FilterX } from 'lucide-react';
import ContratoCard from './ContratoCard';
import { useLoading } from '../../../LoadingContext';
import Swal from 'sweetalert2';
import { useInfiniteContratos } from './hooks/useInfiniteContratos';
import estilosFoco from './Shared/estilosFocoAccesible.module.css';
import styles from './ContratoCardsView.module.css';

export type Contrato = {
  CodConCom?: number | string;
  RefCon: string;
  FecConCom?: string;
  NumCifCli?: string;
  RazSocCli?: string;
  EmaCli?: string;
  TelMovCli?: string;
  NombreTipo?: string;
  TipProCom?: number;
  CodProCom?: number | string;
};

interface Props {
  initialContratos: Contrato[];
  initialPagination: {
    current_page: number;
    last_page: number;
    per_page: number;
    total: number;
    from?: number;
    to?: number;
  };
}

const FILTROS_INICIALES = {
  RefCon: '',
  FecConCom: '',
  NumCifCli: '',
  RazSocCli: '',
  EmaCli: '',
  TelMovCli: '',
  NombreTipo: '',
};

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

  const { contratos, pagination, isLoading, hasMore, resetWithFilters, sentinelRef } = useInfiniteContratos({
    initialContratos,
    initialPagination,
    filters,
  });

  const debouncedResetFilters = useCallback(
    (newFilters: Record<string, string>) => {
      if (debounceTimerRef.current) {
        clearTimeout(debounceTimerRef.current);
      }

      debounceTimerRef.current = setTimeout(() => {
        resetWithFilters(newFilters);
      }, 500);
    },
    [resetWithFilters],
  );

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

  const updateFilter = useCallback(
    (key: keyof typeof FILTROS_INICIALES, value: string) => {
      const newFilters = { ...filters, [key]: value };
      setFilters(newFilters);
      debouncedResetFilters(newFilters);
    },
    [filters, debouncedResetFilters],
  );

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

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

  const handleConsultar = (contrato: Contrato) => {
    try {
      showLoading();
      router.visit(route('propuesta-comercial.show', { id: contrato.CodProCom, tipo: contrato.TipProCom }), {
        onFinish: () => hideLoading(),
        onError: () => {
          hideLoading();
          Swal.fire({
            title: 'Error',
            text: 'Error al cargar la consulta del contrato',
            icon: 'error',
            timer: 3000,
            showConfirmButton: false,
          });
        },
      });
    } catch (error) {
      hideLoading();
      console.error('Error en handleConsultar:', error);
    }
  };

  const handleEditar = (contrato: Contrato) => {
    try {
      showLoading();
      router.visit(route('propuesta-comercial.edit', { id: contrato.CodProCom, tipo: contrato.TipProCom }), {
        onFinish: () => hideLoading(),
        onError: () => {
          hideLoading();
          Swal.fire({
            title: 'Error',
            text: 'Error al cargar la edición del contrato',
            icon: 'error',
            timer: 3000,
            showConfirmButton: false,
          });
        },
      });
    } catch (error) {
      hideLoading();
      console.error('Error en handleEditar:', error);
    }
  };

  const handleBorrar = async (contrato: Contrato) => {
    try {
      const result = await Swal.fire({
        title: '¿Estás seguro?',
        text: `¿Deseas eliminar el contrato ${contrato.RefCon}? Esta acción no se puede deshacer.`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar',
      });

      if (result.isConfirmed) {
        const codConCom = contrato.CodConCom;
        if (codConCom === undefined || codConCom === null || codConCom === '') {
          hideLoading();
          Swal.fire({
            title: 'Error',
            text: 'No se pudo identificar el contrato (CodConCom). Compruebe que la vista incluya este campo.',
            icon: 'error',
            timer: 4000,
            showConfirmButton: false,
          });
          return;
        }

        showLoading();
        const destroyUrl = `/contratos/${encodeURIComponent(String(codConCom))}`;
        router.delete(destroyUrl, {
          preserveScroll: true,
          onSuccess: () => {
            hideLoading();
            Swal.fire({
              title: 'Eliminado',
              text: 'El contrato ha sido eliminado correctamente',
              icon: 'success',
              timer: 2000,
              showConfirmButton: false,
            });
          },
          onError: (errors) => {
            hideLoading();
            console.error('Error eliminando contrato:', errors);
            Swal.fire({
              title: 'Error',
              text: 'Error al eliminar el contrato',
              icon: 'error',
              timer: 3000,
              showConfirmButton: false,
            });
          },
        });
      }
    } catch (error) {
      hideLoading();
      console.error('Error en handleBorrar:', error);
    }
  };

  return (
    <div className={`${styles.contenedorVista} ${estilosFoco.contenedorAccesibleContratos}`}>
      <Card className={`mb-3 ${styles.filtrosCard}`}>
        <Card.Body>
          <div className={styles.cabeceraFiltros}>
            <Form.Group className="mb-0">
              <Form.Label className={`${styles.tituloFiltros} d-flex flex-wrap align-items-center gap-2 mb-0`}>
                <span>Filtros</span>
                <span className={styles.contadorResultados}>
                  Mostrando {contratos.length} de {pagination.total.toLocaleString('es-ES')} contratos
                </span>
              </Form.Label>
            </Form.Group>
            {hayFiltrosActivos && (
              <Button
                type="button"
                variant="outline-secondary"
                size="sm"
                onClick={limpiarFiltros}
                disabled={isLoading}
                aria-label="Limpiar filtros de búsqueda"
              >
                <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={2}>
              <Form.Group controlId="filtro-contrato">
                <Form.Label className="small mb-1">Contrato</Form.Label>
                <Form.Control
                  size="sm"
                  placeholder="Buscar por número"
                  value={filters.RefCon}
                  onChange={(e) => updateFilter('RefCon', e.target.value)}
                />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={2}>
              <Form.Group controlId="filtro-fecha">
                <Form.Label className="small mb-1">Fecha inicio</Form.Label>
                <Form.Control
                  size="sm"
                  placeholder="Buscar por fecha"
                  value={filters.FecConCom}
                  onChange={(e) => updateFilter('FecConCom', e.target.value)}
                />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={2}>
              <Form.Group controlId="filtro-nif">
                <Form.Label className="small mb-1">NIF</Form.Label>
                <Form.Control
                  size="sm"
                  placeholder="Buscar por NIF"
                  value={filters.NumCifCli}
                  onChange={(e) => updateFilter('NumCifCli', e.target.value)}
                />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={3}>
              <Form.Group controlId="filtro-razon-social">
                <Form.Label className="small mb-1">Razón social</Form.Label>
                <Form.Control
                  size="sm"
                  placeholder="Buscar por cliente"
                  value={filters.RazSocCli}
                  onChange={(e) => updateFilter('RazSocCli', e.target.value)}
                />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={3}>
              <Form.Group controlId="filtro-email">
                <Form.Label className="small mb-1">Email</Form.Label>
                <Form.Control
                  size="sm"
                  placeholder="Buscar por email"
                  value={filters.EmaCli}
                  onChange={(e) => updateFilter('EmaCli', e.target.value)}
                />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={2}>
              <Form.Group controlId="filtro-movil">
                <Form.Label className="small mb-1">Móvil</Form.Label>
                <Form.Control
                  size="sm"
                  placeholder="Buscar por móvil"
                  value={filters.TelMovCli}
                  onChange={(e) => updateFilter('TelMovCli', e.target.value)}
                />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={4}>
              <Form.Group controlId="filtro-tipo">
                <Form.Label className="small mb-1">Tipo</Form.Label>
                <Form.Control
                  size="sm"
                  placeholder="Buscar por tipo de contrato"
                  value={filters.NombreTipo}
                  onChange={(e) => updateFilter('NombreTipo', e.target.value)}
                />
              </Form.Group>
            </Col>
          </Row>
        </Card.Body>
      </Card>

      <div className={styles.gridContratos}>
        {contratos.map((c, idx) => (
          <div key={`${c.RefCon}-${idx}`}>
            <ContratoCard
              contrato={c}
              onConsultar={handleConsultar}
              onEditar={handleEditar}
              onBorrar={handleBorrar}
            />
          </div>
        ))}

        {isLoading && (
          <div className={`${styles.gridItemAnchoCompleto} text-center py-4`}>
            <Spinner animation="border" variant="primary" role="status">
              <span className="visually-hidden">Cargando más contratos…</span>
            </Spinner>
            <p className="mt-2 text-muted">Cargando más contratos...</p>
          </div>
        )}

        {hasMore && !isLoading && (
          <div className={styles.gridItemAnchoCompleto}>
            <div ref={sentinelRef} style={{ height: '20px', width: '100%' }} aria-hidden="true" />
          </div>
        )}
      </div>

      {contratos.length === 0 && !isLoading && (
        <div className={styles.estadoVacio}>
          No hay contratos que coincidan con la búsqueda
          {hayFiltrosActivos && (
            <div className="mt-2">
              <Button type="button" size="sm" variant="link" onClick={limpiarFiltros}>
                Limpiar filtros
              </Button>
            </div>
          )}
        </div>
      )}

      {!hasMore && contratos.length > 0 && (
        <div className="text-center text-muted py-4">
          <small>Has visto todos los contratos ({pagination.total.toLocaleString('es-ES')})</small>
        </div>
      )}
    </div>
  );
};

export default ContratoCardsView;