🔍 Filtros e Busca

// Estrutura de estado dos filtros
const filters = {
  status: ['ativo', 'pendente'],  // multi-select (OR)
  categoria: 'eletronicos',       // single-select
  valorMin: 100,                  // range
  valorMax: 5000,
  dataInicio: '2024-01-01',       // date range
  dataFim: '2024-12-31'
};

// Aplicar filtros (AND entre tipos, OR dentro de multi-select)
function applyFilters(data, filters) {
  return data.filter(item => {
    // Status (OR entre opcoes selecionadas)
    if (filters.status.length > 0 &&
        !filters.status.includes(item.status)) {
      return false;
    }

    // Categoria (match exato)
    if (filters.categoria &&
        item.categoria !== filters.categoria) {
      return false;
    }

    // Range de valor
    if (item.valor < filters.valorMin ||
        item.valor > filters.valorMax) {
      return false;
    }

    // Range de data
    const itemDate = new Date(item.data);
    if (itemDate < new Date(filters.dataInicio) ||
        itemDate > new Date(filters.dataFim)) {
      return false;
    }

    return true; // Passou todos os filtros (AND)
  });
}

import { useState } from 'react';
import { subDays, startOfMonth, endOfMonth, format } from 'date-fns';

const presets = [
  { label: 'Hoje', getValue: () => [new Date(), new Date()] },
  { label: 'Ultimos 7 dias', getValue: () => [subDays(new Date(), 7), new Date()] },
  { label: 'Este mes', getValue: () => [startOfMonth(new Date()), new Date()] },
  { label: 'Mes passado', getValue: () => {
    const lastMonth = subDays(startOfMonth(new Date()), 1);
    return [startOfMonth(lastMonth), endOfMonth(lastMonth)];
  }},
];

function DateRangePicker({ value, onChange }) {
  const [isOpen, setIsOpen] = useState(false);

  const formatRange = ([start, end]) =>
    `${format(start, 'dd/MM/yyyy')} → ${format(end, 'dd/MM/yyyy')}`;

  return (
    <div className="relative">
      <button onClick={() => setIsOpen(!isOpen)}>
        📅 {formatRange(value)}
      </button>
      {isOpen && (
        <div className="absolute mt-2 bg-dark-800 border rounded-lg p-4">
          {presets.map(preset => (
            <button key={preset.label} onClick={() => {
              onChange(preset.getValue());
              setIsOpen(false);
            }}>
              {preset.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

// Calcula facetas baseado nos dados filtrados
function calculateFacets(allData, currentFilters) {
  // Primeiro, aplica todos os filtros exceto o da faceta sendo calculada
  const facets = {};

  // Para cada tipo de faceta
  ['status', 'categoria', 'regiao'].forEach(facetType => {
    // Aplica todos os filtros EXCETO este tipo
    const filtersWithoutThis = { ...currentFilters };
    delete filtersWithoutThis[facetType];

    const filteredData = applyFilters(allData, filtersWithoutThis);

    // Conta ocorrencias de cada valor nesta faceta
    facets[facetType] = {};
    filteredData.forEach(item => {
      const value = item[facetType];
      facets[facetType][value] = (facets[facetType][value] || 0) + 1;
    });
  });

  return facets;
}

// Exemplo de retorno:
// {
//   status: { ativo: 450, pendente: 0, cancelado: 0 },
//   categoria: { eletronicos: 180, roupas: 220, alimentos: 50 },
//   regiao: { sul: 150, sudeste: 200, norte: 100 }
// }

function FilterPills({ filters, onRemove, onClearAll }) {
  const activeFilters = Object.entries(filters)
    .filter(([_, value]) => value !== null && value !== 'todos');

  if (activeFilters.length === 0) return null;

  return (
    <div className="flex flex-wrap gap-2 mb-4">
      {activeFilters.map(([key, value]) => (
        <span
          key={key}
          className="inline-flex items-center px-3 py-1 rounded-full
                     bg-blue-500/20 text-blue-400 text-sm"
        >
          {formatLabel(key)}: {formatValue(value)}
          <button
            onClick={() => onRemove(key)}
            className="ml-2 hover:text-white"
          >
            ×
          </button>
        </span>
      ))}

      <button
        onClick={onClearAll}
        className="text-neutral-400 hover:text-white text-sm"
      >
        Limpar todos
      </button>
    </div>
  );
}

// Helper para formatar ranges de data
function formatValue(value) {
  if (Array.isArray(value)) {
    return value.join(' - ');
  }
  if (typeof value === 'object' && value.min !== undefined) {
    return `${value.min} - ${value.max}`;
  }
  return value;
}

import { useEffect, useState } from 'react';

// Hook para sincronizar filtros com URL
function useUrlFilters(defaultFilters) {
  const [filters, setFilters] = useState(() => {
    // Inicializa com valores da URL ou defaults
    return getFiltersFromURL() || defaultFilters;
  });

  // Atualiza URL quando filtros mudam
  useEffect(() => {
    updateURL(filters);
  }, [filters]);

  // Escuta mudancas no historico (botao voltar)
  useEffect(() => {
    const handlePopState = () => {
      setFilters(getFiltersFromURL() || defaultFilters);
    };
    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  return [filters, setFilters];
}

function getFiltersFromURL() {
  const params = new URLSearchParams(window.location.search);
  if (params.toString() === '') return null;

  return {
    status: params.get('status') || 'todos',
    categoria: params.get('categoria') || null,
    dataInicio: params.get('de') || null,
    dataFim: params.get('ate') || null,
    ordenar: params.get('ordenar') || 'data',
    direcao: params.get('direcao') || 'desc'
  };
}

function updateURL(filters) {
  const params = new URLSearchParams();

  // So adiciona parametros com valor
  Object.entries(filters).forEach(([key, value]) => {
    if (value && value !== 'todos') {
      params.set(key, value);
    }
  });

  const newURL = params.toString()
    ? `${window.location.pathname}?${params}`
    : window.location.pathname;

  window.history.pushState({}, '', newURL);
}