graphs/src/pages/Products.tsx

import { useMemo, useState } from 'react';
import { Link, useOutletContext } from 'react-router-dom';
import { Search, ChevronRight, Package, TrendingUp } from 'lucide-react';
import DateRangePicker from '../components/DateRangePicker';
import type { OrderData, DateRange } from '../types';

const Products = () => {
  const { dateRange, setDateRange, ordersData } = useOutletContext<{ dateRange: DateRange, setDateRange: (range: DateRange) => void, ordersData: OrderData[] }>();
  const [searchTerm, setSearchTerm] = useState('');

  const productsData = useMemo(() => {
    const orders = ordersData;
    const productMap: Record<string, { id: string, name: string, totalSold: number, revenue: number, lastPrice: number }> = {};

    orders.forEach(order => {
      const [day, month, year] = order.Data_Pedido.split('-').map(Number);
      const orderDate = new Date(year, month - 1, day);
      if (orderDate < dateRange.start || orderDate > dateRange.end) return;

      if (!productMap[order.ID_Produto]) {
        productMap[order.ID_Produto] = { 
          id: order.ID_Produto, 
          name: order.Descricao_Produto.split(' TAMANHO')[0], 
          totalSold: 0, 
          revenue: 0,
          lastPrice: order.Valor_Unitario
        };
      }
      
      productMap[order.ID_Produto].totalSold += order.Quantidade;
      productMap[order.ID_Produto].revenue += (order.Quantidade * order.Valor_Unitario);
      productMap[order.ID_Produto].lastPrice = order.Valor_Unitario;
    });

    let result = Object.values(productMap);
    if (searchTerm) {
      result = result.filter(p => p.name.toLowerCase().includes(searchTerm.toLowerCase()) || p.id.includes(searchTerm));
    }

    return result.sort((a, b) => b.totalSold - a.totalSold);
  }, [dateRange, searchTerm, ordersData]);

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold mb-2 text-zinc-900 dark:text-dark-text">Produtos</h1>
          <p className="text-zinc-500 dark:text-dark-muted font-medium">Gestão de catálogo e performance de vendas por item.</p>
        </div>
        
        <div className="flex flex-col sm:flex-row gap-3">
          <DateRangePicker dateRange={dateRange} onChange={setDateRange} />
          
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-zinc-400 dark:text-dark-muted w-5 h-5" />
            <input 
              type="text" 
              placeholder="Buscar por nome ou ID..." 
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full md:w-64 bg-white dark:bg-dark-input border border-zinc-200 dark:border-dark-border text-zinc-900 dark:text-dark-text rounded-xl pl-10 pr-4 py-2.5 focus:outline-none focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20 transition-all shadow-sm"
            />
          </div>
        </div>
      </div>

      <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm">
        <div className="overflow-x-auto">
          <table className="w-full text-left text-sm">
            <thead className="bg-zinc-50 dark:bg-dark-header border-b border-zinc-100 dark:border-dark-border text-zinc-500 dark:text-dark-muted">
              <tr>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">ID Produto</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Descrição</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Total Vendido</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Receita Gerada</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px] text-right">Ações</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-zinc-100 dark:divide-dark-border">
              {productsData.map((product) => (
                <tr key={product.id} className="hover:bg-zinc-50/80 dark:hover:bg-dark-input/50 transition-colors group">
                  <td className="px-6 py-2.5 font-mono text-[11px] text-zinc-400 dark:text-dark-muted">#{product.id}</td>
                  <td className="px-6 py-2.5">
                    <div className="font-semibold text-zinc-900 dark:text-dark-text">{product.name}</div>
                    <div className="text-[10px] text-zinc-400 dark:text-dark-muted font-medium">Preço Atual: {formatCurrency(product.lastPrice)}</div>
                  </td>
                  <td className="px-6 py-2.5">
                    <div className="flex items-center gap-2">
                      <Package className="w-3.5 h-3.5 text-zinc-400 dark:text-dark-muted" />
                      <span className="font-bold text-zinc-900 dark:text-dark-text">{product.totalSold} un.</span>
                    </div>
                  </td>
                  <td className="px-6 py-2.5 text-brand-primary font-bold">{formatCurrency(product.revenue)}</td>
                  <td className="px-6 py-2.5 text-right">
                    <Link 
                      to={`/products/${product.id}`}
                      className="inline-flex items-center text-xs font-bold text-brand-primary hover:opacity-80 transition-opacity bg-brand-primary/10 px-3 py-1.5 rounded-lg"
                    >
                      <TrendingUp className="w-3.5 h-3.5 mr-1.5" />
                      Ver Gráfico
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

export default Products;