import { useMemo } from 'react';
import { useOutletContext, useNavigate } 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 = [
  // 10 Strong Base Colors
  '#10b981', '#3b82f6', '#8b5cf6', '#f43f5e', '#f97316', 
  '#06b6d4', '#ec4899', '#eab308', '#6366f1', '#14b8a6',
  // 10 Softer Versions
  '#6ee7b7', '#93c5fd', '#c4b5fd', '#fda4af', '#fdba74',
  '#67e8f9', '#f9a8d4', '#fde047', '#a5b4fc', '#5eead4'
];

const globalColorMap: Record<string, string> = {};
let globalColorIndex = 0;

const getProductColor = (name: string) => {
  if (!globalColorMap[name]) {
    globalColorMap[name] = COLORS[globalColorIndex % COLORS.length];
    globalColorIndex++;
  }
  return globalColorMap[name];
};

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

type ChartTooltipPayload = {
  value: number;
  name?: string;
  color?: string;
  payload?: {
    fill?: string;
  };
};

type CustomTooltipProps = {
  active?: boolean;
  payload?: ChartTooltipPayload[];
  label?: string;
  isCurrency?: boolean;
};

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

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

  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, revenueByProduct } = useMemo(() => {
    let revenue = 0;
    let totalItems = 0;
    const productSalesMap: Record<string, number> = {};
    const productRevenueMap: Record<string, number> = {};
    const productNameIdMap: Record<string, string> = {};

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

    // Identify which products will actually be displayed in both charts (Top 10 of each)
    const topSalesNames = Object.keys(productSalesMap).sort((a, b) => productSalesMap[b] - productSalesMap[a]).slice(0, 10);
    const topRevenueNames = Object.keys(productRevenueMap).sort((a, b) => productRevenueMap[b] - productRevenueMap[a]).slice(0, 10);
    
    // Combine them into a unique set to assign colors only to the VISIBLE products
    const displayProducts = Array.from(new Set([...topSalesNames, ...topRevenueNames])).sort();
    const productColors: Record<string, string> = {};
    
    displayProducts.forEach((name) => {
      productColors[name] = getProductColor(name);
    });

    const productsData = topSalesNames.map(name => ({
      name,
      id: productNameIdMap[name],
      value: productSalesMap[name],
      fill: productColors[name]
    }));

    const revenueData = topRevenueNames.map(name => ({
      name,
      id: productNameIdMap[name],
      value: productRevenueMap[name],
      fill: productColors[name]
    }));

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

  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} 
          refreshInterval={refreshInterval}
          setRefreshInterval={setRefreshInterval}
          onManualRefresh={() => loadData(true)}
        />
      </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 flex flex-col">
          <h3 className="text-lg font-bold mb-6 text-dark-text">Produtos Mais Vendidos</h3>
          <div className="h-80 w-full flex items-center justify-center">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={salesByProduct} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
                <XAxis 
                  dataKey="name" stroke="#888888" fontSize={10} tickLine={false} axisLine={false}
                  tick={false}
                />
                <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
                <Tooltip content={<CustomTooltip />} cursor={{ fill: '#222222' }} />
                <Bar dataKey="value" radius={[4, 4, 0, 0]} onClick={(data) => { if(data?.payload?.id) navigate(`/products/${data.payload.id}`) }} style={{ cursor: 'pointer' }}>
                  {salesByProduct.map((entry) => (
                    <Cell key={`cell-${entry.name}`} fill={entry.fill} style={{ cursor: 'pointer' }} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>
          <div className="mt-4 grid grid-cols-2 gap-2">
            {salesByProduct.map((entry) => (
              <div key={`bar-legend-${entry.name}`} className="flex items-center text-[10px] cursor-pointer hover:opacity-80 transition-opacity" onClick={() => navigate(`/products/${entry.id}`)}>
                <span className="w-2.5 h-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: entry.fill }}></span>
                <span className="text-dark-muted truncate font-semibold" title={entry.name}>{entry.name}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm flex flex-col">
          <h3 className="text-lg font-bold mb-6 text-dark-text">Receita por Produto</h3>
          <div className="h-80 w-full flex items-center justify-center">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie data={revenueByProduct} cx="50%" cy="50%" innerRadius={80} outerRadius={110} paddingAngle={5} dataKey="value" stroke="none" onClick={(data) => { if(data?.payload?.id) navigate(`/products/${data.payload.id}`) }} style={{ cursor: 'pointer' }}>
                  {revenueByProduct.map((entry) => (
                    <Cell key={`cell-${entry.name}`} fill={entry.fill} style={{ cursor: 'pointer' }} />
                  ))}
                </Pie>
                <Tooltip content={<CustomTooltip isCurrency={true} />} cursor={{ fill: '#222222' }} />
              </PieChart>
            </ResponsiveContainer>
          </div>
          <div className="mt-4 grid grid-cols-2 gap-2">
            {revenueByProduct.map((entry) => (
              <div key={`pie-legend-${entry.name}`} className="flex items-center text-[10px] cursor-pointer hover:opacity-80 transition-opacity" onClick={() => navigate(`/products/${entry.id}`)}>
                <span className="w-2.5 h-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: entry.fill }}></span>
                <span className="text-dark-muted truncate font-semibold">{entry.name}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Dashboard;