import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Row, Col, Card, Form } from 'react-bootstrap';
import { router } from '@inertiajs/react';
import { rankItem, rankings } from '@tanstack/match-sorter-utils';
import CaesCard from './CaesCard';

export interface CaesRecord {
  id: number;
  abreviacion_caes?: string | null;
  caes?: string | null;
  tipo?: number | null;
  version?: string | null;
  created_at?: string | null;
  updated_at?: string | null;

  //datos nodo principal
  CodCli: number;
  NomComCli?: string | null;
  // Relaciones cargadas opcionalmente
  tipo_caes_relacion?: { id: number; tipo_caes: string; estado: number };
  // anidaciones: direcciones -> actuaciones -> fichas (según payload backend esperado)
  direcciones?: Array<{
    id: number;
    direccion: string;
    codigo_postal: string;
    provincia: string;
    localidad?: string | null;
    actuaciones?: Array<{
      id: number;
      sector?: number | null;
      tipo_actuacion?: number | null;
      desde?: string | null;
      hasta?: string | null;
      nombreProyecto?: string | null;
      fichas?: Array<{
        id: number;
        abreviacion_caes?: string | null;
        caes?: string | null;
        version?: string | null;
        seleccionado?: boolean | number | null;
      }>;
    }>;
  }>;
}

interface Props { caes: CaesRecord[]; }

const PAGE_SIZE = 20;

const CaesCardsView: React.FC<Props> = ({ caes }) => {
  // Normaliza en caso de que llegue un objeto tipo { data: [] } o un single
  const caesArray: CaesRecord[] = Array.isArray(caes)
    ? caes
    : (caes && (caes as any).data && Array.isArray((caes as any).data))
      ? (caes as any).data
      : caes
        ? [caes as any]
        : [];
  // Filtros columna (principales campos y algunos de jerarquía)
  const [filters, setFilters] = useState({
    abreviacion: '',
    caes: '',
    tipo: '',
    version: '',
    direccion: '',
    proyecto: '',
    ficha: '',
  });
  const [globalQuery, setGlobalQuery] = useState('');
  const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
  const sentinelRef = useRef<HTMLDivElement | null>(null);

  const updateFilter = (key: keyof typeof filters, value: string) => {
    setFilters(prev => ({ ...prev, [key]: value }));
    setVisibleCount(PAGE_SIZE);
  };

  const columnFiltered = useMemo(() => {
  return caesArray.filter(item => {
      const f = filters;
      const txt = (val?: any) => String(val ?? '').toLowerCase();
      return (
        (!f.abreviacion || txt(item.abreviacion_caes).includes(f.abreviacion.toLowerCase())) &&
        (!f.caes || txt(item.caes).includes(f.caes.toLowerCase())) &&
        (!f.tipo || txt(item.tipo_caes_relacion?.tipo_caes || item.tipo).includes(f.tipo.toLowerCase())) &&
        (!f.version || txt(item.version).includes(f.version.toLowerCase())) &&
        (!f.direccion || (item.direcciones || []).some(d => txt(d.direccion).includes(f.direccion.toLowerCase()))) &&
        (!f.proyecto || (item.direcciones || []).some(d => (d.actuaciones || []).some(a => txt(a.nombreProyecto).includes(f.proyecto.toLowerCase())))) &&
        (!f.ficha || (item.direcciones || []).some(d => (d.actuaciones || []).some(a => (a.fichas || []).some(fi => txt(fi.abreviacion_caes || fi.caes).includes(f.ficha.toLowerCase())))))
      );
    });
  }, [caesArray, filters]);

  const fullyFiltered = useMemo(() => {
    const q = globalQuery.trim();
    if (!q) return columnFiltered;
    return columnFiltered.filter(item => {
      const parts: string[] = [];
      parts.push(item.abreviacion_caes || '', item.caes || '', item.version || '', item.tipo_caes_relacion?.tipo_caes || '');
      (item.direcciones || []).forEach(d => {
        parts.push(d.direccion, d.codigo_postal, d.provincia, d.localidad || '');
        (d.actuaciones || []).forEach(a => {
          parts.push(a.nombreProyecto || '', a.desde || '', a.hasta || '');
          (a.fichas || []).forEach(fi => parts.push(fi.abreviacion_caes || fi.caes || ''));
        });
      });
      const hay = parts.some(val => rankItem(val, q, { threshold: rankings.MATCHES }).passed);
      return hay;
    });
  }, [columnFiltered, globalQuery]);

  useEffect(() => {
    const el = sentinelRef.current; if (!el) return;
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) setVisibleCount(prev => Math.min(prev + PAGE_SIZE, fullyFiltered.length)); });
    });
    io.observe(el); return () => io.disconnect();
  }, [fullyFiltered.length]);

  const visibleItems = fullyFiltered.slice(0, visibleCount);

  // Acciones (placeholders de navegación - ajustar rutas reales cuando existan)
  const handleConsultar = (r: CaesRecord) => {
    const id = (r as any).id ?? (r as any).CodCli ?? r.id;
    router.visit(route('caes.ver', { id }));
  };
  const handleEditar = (r: CaesRecord) => {
    // TODO: reemplazar por route() real cuando exista
    console.log('Editar CAE', r.id);
  };
  const handleBorrar = (r: CaesRecord) => {
    // TODO: implementar confirmación y petición DELETE
    console.log('Borrar CAE', r.id);
  };

  return (
  <>
      <Card className="mb-3">
        <Card.Body>
          <Row className="g-2 align-items-end">
            <Col md={12} className="mb-2">
              <Form.Group>
                <Form.Label className="d-flex align-items-center">
                  <span>Búsqueda global</span>
                  <span className="ms-2 text-muted small">{fullyFiltered.length} / {caesArray.length}</span>
                </Form.Label>
                <Form.Control
                  value={globalQuery}
                  onChange={e => { setGlobalQuery(e.target.value); setVisibleCount(PAGE_SIZE); }}
                  placeholder="Buscar en todos los campos (abreviación, dirección, proyecto, ficha...)"
                />
              </Form.Group>
            </Col>
            {/*
            <Col md={12}>
              <Row className="g-2 small">
                <Col lg={2} md={3} sm={6}><Form.Control placeholder="Abreviación" value={filters.abreviacion} onChange={e => updateFilter('abreviacion', e.target.value)} /></Col>
                <Col lg={2} md={3} sm={6}><Form.Control placeholder="CAE" value={filters.caes} onChange={e => updateFilter('caes', e.target.value)} /></Col>
                <Col lg={2} md={3} sm={6}><Form.Control placeholder="Tipo" value={filters.tipo} onChange={e => updateFilter('tipo', e.target.value)} /></Col>
                <Col lg={2} md={3} sm={6}><Form.Control placeholder="Versión" value={filters.version} onChange={e => updateFilter('version', e.target.value)} /></Col>
                <Col lg={2} md={3} sm={6}><Form.Control placeholder="Dirección" value={filters.direccion} onChange={e => updateFilter('direccion', e.target.value)} /></Col>
                <Col lg={2} md={3} sm={6}><Form.Control placeholder="Proyecto" value={filters.proyecto} onChange={e => updateFilter('proyecto', e.target.value)} /></Col>
                <Col lg={2} md={3} sm={6}><Form.Control placeholder="Ficha" value={filters.ficha} onChange={e => updateFilter('ficha', e.target.value)} /></Col>
              </Row>
            </Col>
            */}
          </Row>
        </Card.Body>
      </Card>

      <Row className="g-5">
        {visibleItems.map((item, idx) => (
          <Col key={`caes-${item.id}-${idx}`} lg={3} md={4} sm={6} xs={12}>
            <CaesCard record={item} onConsultar={handleConsultar} onEditar={handleEditar} onBorrar={handleBorrar} />
          </Col>
        ))}
        <div ref={sentinelRef} key="sentinel" />
      </Row>
      {visibleItems.length === 0 && (
        <div className="text-center text-muted py-4">No hay registros que coincidan con la búsqueda</div>
      )}
    </>
  );
};

export default CaesCardsView;