import { useMemo } from 'react';
import { useOutletContext } from 'react-router-dom';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
import { DollarSign, ShoppingCart, TrendingUp } from 'lucide-react';
import DateRangePicker from '../components/DateRangePicker';
import type { OrderData, DateRange } from '../types';
import { parseOrderDate } from '../dataService';

const COLORS = [
  '#10b981', '#3b82f6', '#8b5cf6', '#f43f5e', '#f97316', 
  '#06b6d4', '#ec4899', '#eab308', '#6366f1', '#14b8a6'
];

const Dashboard = () => {
  const { dateRange, setDateRange, ordersData } = useOutletContext<{ dateRange: DateRange, setDateRange: (range: DateRange) => void, ordersData: OrderData[] }>();

  const filteredData = useMemo(() => {
    const orders = ordersData;
    return orders.filter(order => {
      const orderDate = parseOrderDate(order.Data_Pedido);
      return orderDate >= dateRange.start && orderDate <= dateRange.end;
    });
  }, [dateRange, ordersData]);

  const { totalRevenue, totalOrders, averageOrderValue, salesByProduct } = useMemo(() => {
    let revenue = 0;
    let totalItems = 0;
    const productSalesMap: Record<string, number> = {};

    filteredData.forEach(order => {
      revenue += (order.Quantidade * order.Valor_Unitario);
      totalItems += order.Quantidade;
      const productName = order.Descricao_Produto.split(' TAMANHO')[0]; 
      if (productSalesMap[productName]) {
        productSalesMap[productName] += order.Quantidade;
      } else {
        productSalesMap[productName] = order.Quantidade;
      }
    });

    const productsData = Object.keys(productSalesMap).map(key => ({
      name: key,
      value: productSalesMap[key]
    })).sort((a, b) => b.value - a.value).slice(0, 10);

    return { totalRevenue: revenue, totalOrders: totalItems, averageOrderValue: revenue / (filteredData.length || 1), salesByProduct: productsData };
  }, [filteredData]);

  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-dark-text">Visão Geral</h1>
          <p className="text-dark-muted font-medium">Resumo de vendas e performance dos produtos.</p>
        </div>
        <DateRangePicker dateRange={dateRange} onChange={setDateRange} />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
          <div className="flex justify-between items-start">
            <div>
              <p className="text-dark-muted text-sm font-medium mb-1">Receita Total</p>
              <h3 className="text-3xl font-bold text-dark-text">{formatCurrency(totalRevenue)}</h3>
            </div>
            <div className="p-3 bg-emerald-500/10 rounded-xl">
              <DollarSign className="w-6 h-6 text-emerald-500" />
            </div>
          </div>
        </div>
        
        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
          <div className="flex justify-between items-start">
            <div>
              <p className="text-dark-muted text-sm font-medium mb-1">Total de Produtos Vendidos</p>
              <h3 className="text-3xl font-bold text-dark-text">{totalOrders}</h3>
            </div>
            <div className="p-3 bg-blue-500/10 rounded-xl">
              <ShoppingCart className="w-6 h-6 text-blue-500" />
            </div>
          </div>
        </div>

        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
          <div className="flex justify-between items-start">
            <div>
              <p className="text-dark-muted text-sm font-medium mb-1">Ticket Médio (Por Item)</p>
              <h3 className="text-3xl font-bold text-dark-text">{formatCurrency(averageOrderValue)}</h3>
            </div>
            <div className="p-3 bg-purple-500/10 rounded-xl">
              <TrendingUp className="w-6 h-6 text-purple-500" />
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
          <h3 className="text-lg font-bold mb-6 text-dark-text">Produtos Mais Vendidos</h3>
          <div className="h-80 w-full">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={salesByProduct} margin={{ top: 5, right: 30, left: 20, bottom: 120 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
                <XAxis 
                  dataKey="name" stroke="#888888" fontSize={10} tickLine={false} axisLine={false}
                  interval={0}
                  angle={-45}
                  textAnchor="end"
                  height={120}
                />
                <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
                <Tooltip 
                  cursor={{ fill: '#222222' }}
                  contentStyle={{ 
                    backgroundColor: '#141414', borderColor: 'transparent', borderRadius: '12px',
                    boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.5)', border: 'none', color: '#ededed'
                  }}
                  itemStyle={{ color: '#ededed' }}
                />
                <Bar dataKey="value" radius={[4, 4, 0, 0]}>
                  {salesByProduct.map((_, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>

        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
          <h3 className="text-lg font-bold mb-6 text-dark-text">Distribuição de Produtos</h3>
          <div className="h-80 w-full flex items-center justify-center">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie data={salesByProduct} cx="50%" cy="50%" innerRadius={80} outerRadius={110} paddingAngle={5} dataKey="value" stroke="none">
                  {salesByProduct.map((_, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip 
                  contentStyle={{ 
                    backgroundColor: '#141414', borderColor: 'transparent', borderRadius: '12px',
                    boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.5)', border: 'none', color: '#ededed'
                  }}
                />
              </PieChart>
            </ResponsiveContainer>
          </div>
          <div className="mt-4 grid grid-cols-2 gap-2">
            {salesByProduct.map((entry, index) => (
              <div key={entry.name} className="flex items-center text-[10px]">
                <span className="w-2.5 h-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: COLORS[index % COLORS.length] }}></span>
                <span className="text-dark-muted truncate font-semibold">{entry.name}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Dashboard;