graphs/src/pages/ProductDetails.tsx

import { useMemo } from 'react';
import { useParams, Link, useOutletContext } from 'react-router-dom';
import { ArrowLeft, Package, DollarSign } from 'lucide-react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import DateRangePicker from '../components/DateRangePicker';
import type { OrderData, DateRange } from '../types';
import { parseOrderDate } from '../dataService';

const CustomTooltip = ({ active, payload, label }: any) => {
  if (active && payload && payload.length) {
    return (
      <div className="bg-[#141414] p-3 rounded-xl shadow-lg border-none">
        <p className="font-bold mb-1" style={{ color: '#9ECAE1' }}>{label}</p>
        <p className="text-[#ededed] m-0">Vendas: {payload[0].value}</p>
      </div>
    );
  }
  return null;
};

const ProductDetails = () => {
  const { id } = useParams<{ id: string }>();
  const { dateRange, setDateRange, ordersData } = useOutletContext<{ 
    dateRange: DateRange, 
    setDateRange: (range: DateRange) => void, 
    ordersData: OrderData[],
    refreshInterval: number,
    setRefreshInterval: (interval: number) => void,
    loadData: (showLoading?: boolean) => void
  }>();

  const { productInfo, chartData, totalSold, totalRevenue } = useMemo(() => {
    const orders = ordersData.filter(order => order.ID_Produto === id);
    
    if (orders.length === 0) return { productInfo: null, chartData: [], totalSold: 0, totalRevenue: 0 };

    const info = {
      id: orders[0].ID_Produto,
      name: orders[0].Descricao_Produto.split(' TAMANHO')[0],
      price: orders[0].Valor_Unitario
    };

    const salesByDate: Record<string, number> = {};
    let sold = 0;
    let revenue = 0;

    orders.forEach(order => {
      const orderDate = parseOrderDate(order.Data_Pedido);

      if (orderDate >= dateRange.start && orderDate <= dateRange.end) {        const dateStr = order.Data_Pedido;
        salesByDate[dateStr] = (salesByDate[dateStr] || 0) + order.Quantidade;
        sold += order.Quantidade;
        revenue += (order.Quantidade * order.Valor_Unitario);
      }
    });

    const chart = Object.keys(salesByDate).map(date => ({
      date,
      value: salesByDate[date]
    })).sort((a, b) => {
      const [da, ma, ya] = a.date.split('-').map(Number);
      const [db, mb, yb] = b.date.split('-').map(Number);
      return new Date(ya, ma - 1, da).getTime() - new Date(yb, mb - 1, db).getTime();
    });

    return { productInfo: info, chartData: chart, totalSold: sold, totalRevenue: revenue };
  }, [id, dateRange, ordersData]);

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

  if (!productInfo) {
    return (
      <div className="text-center py-12">
        <p className="text-zinc-500 dark:text-dark-muted font-medium">Produto não encontrado.</p>
        <Link to="/products" className="text-brand-primary hover:underline mt-4 inline-block font-bold">Voltar para produtos</Link>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div className="flex flex-col gap-4">
          <Link to="/products" className="inline-flex items-center text-sm font-bold text-zinc-400 dark:text-dark-muted hover:text-zinc-900 dark:hover:text-dark-text transition-colors w-fit">
            <ArrowLeft className="w-4 h-4 mr-2" />
            Voltar
          </Link>
          
          <div className="flex items-center gap-4">
            <div className="w-16 h-16 rounded-2xl bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border flex items-center justify-center shadow-sm text-brand-primary">
              <Package className="w-8 h-8" />
            </div>
            <div>
              <div className="text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest">ID: #{productInfo.id}</div>
              <h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{productInfo.name}</h1>
            </div>
          </div>
        </div>

        <DateRangePicker 
          dateRange={dateRange} 
          onChange={setDateRange} 
        />      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
          <div>
            <p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Unidades Vendidas</p>
            <p className="text-3xl font-bold text-dark-text">{totalSold}</p>
          </div>
          <div className="p-3 bg-brand-primary/10 rounded-xl text-brand-primary">
            <Package size={24} />
          </div>
        </div>
        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
          <div>
            <p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Receita Total</p>
            <p className="text-3xl font-bold text-brand-primary">{formatCurrency(totalRevenue)}</p>
          </div>
          <div className="p-3 bg-emerald-500/10 rounded-xl text-emerald-500">
            <DollarSign size={24} />
          </div>
        </div>
      </div>

      <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
        <h3 className="text-lg font-bold mb-8 text-zinc-900 dark:text-dark-text">Volume de Vendas por Data</h3>
        <div className="h-[400px] w-full">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 80 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
              <XAxis 
                dataKey="date" stroke="#888888" fontSize={10} tickLine={false} axisLine={false}
                interval={0}
                angle={-45}
                textAnchor="end"
                height={80}
              />
              <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
              <Tooltip content={<CustomTooltip />} cursor={{ fill: '#222222' }} />
              <Bar dataKey="value" fill="#9ECAE1" radius={[4, 4, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>
    </div>
  );
};

export default ProductDetails;