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 useInfiniteContactos from './hooks/useInfiniteContactos';
import ContactoCard from './ContactoCard';
import estilosFoco from '../Contratos/Shared/estilosFocoAccesible.module.css';
import styles from './ContactosCardsView.module.css';

interface Props {
  initialContactos: any[];
  initialPagination: {
    current_page: number;
    last_page: number;
    per_page: number;
    total: number;
    from?: number;
    to?: number;
  };
  flash: any;
}

const FILTROS_INICIALES = {
  NomConCli: '',
  NIFConCli: '',
  CarConCli: '',
  TelFijConCli: '',
  TelCelConCli: '',
  EmaConCli: '',
  EstConCli: '',
};

const restaurarFoco = (elemento: HTMLElement | null | undefined): void => {
  if (elemento && typeof elemento.focus === 'function') {
    requestAnimationFrame(() => elemento.focus());
  }
};

const ContactosCardsView: React.FC<Props> = ({ initialContactos, 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, updateItem, removeItem, sentinelRef } =
    useInfiniteContactos({
      initialItems: initialContactos,
      initialPagination,
      filters,
    });

  useEffect(() => {
    return () => {
      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);
      }, 400);
    },
    [filters, resetWithFilters],
  );

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

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

  const handleVer = (contacto: any) => {
    try {
      showLoading();
      router.visit(route('contactos.ver', { id: contacto.CodConCli }), {
        onFinish: () => hideLoading(),
        onError: () => hideLoading(),
      });
    } catch {
      hideLoading();
      Swal.fire({
        icon: 'error',
        title: 'Error',
        text: 'Error al cargar el contacto',
      });
    }
  };

  const handleEditar = (contacto: any) => {
    try {
      showLoading();
      router.visit(route('contactos.editar', { id: contacto.CodConCli }), {
        onFinish: () => hideLoading(),
        onError: () => hideLoading(),
      });
    } catch {
      hideLoading();
      Swal.fire({
        icon: 'error',
        title: 'Error',
        text: 'Error al cargar el contacto',
      });
    }
  };

  const handleActivar = async (contacto: any, disparador?: HTMLElement) => {
    try {
      const result = await Swal.fire({
        title: '¿Activar contacto?',
        text: `¿Estás seguro de activar a ${contacto.NomConCli}?`,
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#28a745',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, activar',
        cancelButtonText: 'Cancelar',
        returnFocus: false,
      });

      if (!result.isConfirmed) {
        restaurarFoco(disparador);
        return;
      }

      showLoading();
      router.post(route('contactos.activar', { id: contacto.CodConCli }), {}, {
        onSuccess: () => {
          hideLoading();
          updateItem(contacto.CodConCli, { EstConCli: 1, EstCli: 1 });
          Swal.fire({
            icon: 'success',
            title: 'Éxito',
            text: 'Contacto activado correctamente',
            timer: 1500,
            showConfirmButton: false,
            returnFocus: false,
          });
          restaurarFoco(disparador);
        },
        onError: (errors: any) => {
          hideLoading();
          Swal.fire({
            icon: 'error',
            title: 'Error',
            text: errors?.message || 'Error al activar el contacto',
            returnFocus: false,
          });
          restaurarFoco(disparador);
        },
      });
    } catch {
      hideLoading();
      restaurarFoco(disparador);
    }
  };

  const handleSuspender = async (contacto: any, disparador?: HTMLElement) => {
    try {
      const result = await Swal.fire({
        title: '¿Suspender contacto?',
        text: `¿Estás seguro de suspender a ${contacto.NomConCli}?`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#ffc107',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, suspender',
        cancelButtonText: 'Cancelar',
        returnFocus: false,
      });

      if (!result.isConfirmed) {
        restaurarFoco(disparador);
        return;
      }

      showLoading();
      router.post(route('contactos.suspender', { id: contacto.CodConCli }), {}, {
        onSuccess: () => {
          hideLoading();
          updateItem(contacto.CodConCli, { EstConCli: 0, EstCli: 0 });
          Swal.fire({
            icon: 'success',
            title: 'Éxito',
            text: 'Contacto suspendido correctamente',
            timer: 1500,
            showConfirmButton: false,
            returnFocus: false,
          });
          restaurarFoco(disparador);
        },
        onError: (errors: any) => {
          hideLoading();
          Swal.fire({
            icon: 'error',
            title: 'Error',
            text: errors?.message || 'Error al suspender el contacto',
            returnFocus: false,
          });
          restaurarFoco(disparador);
        },
      });
    } catch {
      hideLoading();
      restaurarFoco(disparador);
    }
  };

  const handleEliminar = async (contacto: any, disparador?: HTMLElement) => {
    try {
      const result = await Swal.fire({
        title: '¿Eliminar contacto?',
        text: `¿Estás seguro de eliminar a ${contacto.NomConCli}? Esta acción no se puede deshacer.`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar',
        returnFocus: false,
      });

      if (!result.isConfirmed) {
        restaurarFoco(disparador);
        return;
      }

      showLoading();
      router.delete(route('contactos.destroy', { id: contacto.CodConCli }), {
        onSuccess: () => {
          hideLoading();
          removeItem(contacto.CodConCli);
          Swal.fire({
            icon: 'success',
            title: 'Éxito',
            text: 'Contacto eliminado correctamente',
            timer: 1500,
            showConfirmButton: false,
            returnFocus: false,
          });
          restaurarFoco(disparador);
        },
        onError: (errors: any) => {
          hideLoading();
          Swal.fire({
            icon: 'error',
            title: 'Error',
            text: errors?.message || 'Error al eliminar el contacto',
            returnFocus: false,
          });
          restaurarFoco(disparador);
        },
      });
    } catch {
      hideLoading();
      restaurarFoco(disparador);
    }
  };

  useEffect(() => {
    if (flash?.message) {
      Swal.fire({
        icon: flash.type === 'success' ? 'success' : 'error',
        title: flash.type === 'success' ? 'Éxito' : 'Error',
        text: flash.message,
      });
    }
  }, [flash]);

  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} aria-live="polite">
                  Mostrando {items.length} de {pagination.total.toLocaleString('es-ES')} contactos
                </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={3}>
              <Form.Group controlId="filtro-contacto-nombre">
                <Form.Label className="small mb-1">Nombre</Form.Label>
                <Form.Control
                  size="sm"
                  placeholder="Nombre"
                  value={filters.NomConCli}
                  onChange={(e) => onFilterChange('NomConCli', e.target.value)}
                />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={2}>
              <Form.Group controlId="filtro-contacto-nif">
                <Form.Label className="small mb-1">NIF</Form.Label>
                <Form.Control
                  size="sm"
                  placeholder="NIF"
                  value={filters.NIFConCli}
                  onChange={(e) => onFilterChange('NIFConCli', e.target.value)}
                />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={2}>
              <Form.Group controlId="filtro-contacto-cargo">
                <Form.Label className="small mb-1">Cargo</Form.Label>
                <Form.Control
                  size="sm"
                  placeholder="Cargo"
                  value={filters.CarConCli}
                  onChange={(e) => onFilterChange('CarConCli', e.target.value)}
                />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={2}>
              <Form.Group controlId="filtro-contacto-tel-fijo">
                <Form.Label className="small mb-1">Tel. fijo</Form.Label>
                <Form.Control
                  size="sm"
                  placeholder="Tel. fijo"
                  value={filters.TelFijConCli}
                  onChange={(e) => onFilterChange('TelFijConCli', e.target.value)}
                />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={2}>
              <Form.Group controlId="filtro-contacto-tel-movil">
                <Form.Label className="small mb-1">Tel. móvil</Form.Label>
                <Form.Control
                  size="sm"
                  placeholder="Tel. móvil"
                  value={filters.TelCelConCli}
                  onChange={(e) => onFilterChange('TelCelConCli', e.target.value)}
                />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={2}>
              <Form.Group controlId="filtro-contacto-email">
                <Form.Label className="small mb-1">Email</Form.Label>
                <Form.Control
                  size="sm"
                  placeholder="Email"
                  value={filters.EmaConCli}
                  onChange={(e) => onFilterChange('EmaConCli', e.target.value)}
                />
              </Form.Group>
            </Col>
            <Col xs={12} sm={6} lg={2}>
              <Form.Group controlId="filtro-contacto-estado">
                <Form.Label className="small mb-1">Estado</Form.Label>
                <Form.Select
                  size="sm"
                  value={filters.EstConCli}
                  onChange={(e) => onFilterChange('EstConCli', e.target.value)}
                >
                  <option value="">Todos los estados</option>
                  <option value="1">Activo</option>
                  <option value="0">Inactivo</option>
                </Form.Select>
              </Form.Group>
            </Col>
          </Row>
        </Card.Body>
      </Card>

      <div className={styles.gridContactos}>
        {items.map((contacto: any, idx) => (
          <div key={`${contacto.CodConCli}-${idx}`}>
            <ContactoCard
              contacto={contacto}
              onVer={handleVer}
              onEditar={handleEditar}
              onActivar={handleActivar}
              onSuspender={handleSuspender}
              onEliminar={handleEliminar}
            />
          </div>
        ))}

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

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

      {items.length === 0 && !isLoading && (
        <div className={styles.estadoVacio} role="status">
          No hay contactos 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 && items.length > 0 && (
        <div className="text-center text-muted py-4">
          <small>Has visto todos los contactos ({pagination.total.toLocaleString('es-ES')})</small>
        </div>
      )}
    </div>
  );
};

export default ContactosCardsView;