"use client";

import { useEffect, useMemo, useState } from "react";
import { useAuth } from '@/hooks/useAuth';
import { Bar, Pie, Line, Doughnut } from 'react-chartjs-2';
import Header from '@/components/Header';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
  PointElement,
  LineElement,
  ArcElement
} from 'chart.js';
import {
  DocumentArrowDownIcon,
  ChartBarIcon,
  CalendarIcon,
  FunnelIcon,
  PrinterIcon,
  DocumentTextIcon,
  ArrowTrendingUpIcon,
  UsersIcon,
  CurrencyDollarIcon
} from '@heroicons/react/24/outline';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
  PointElement,
  LineElement,
  ArcElement
);

type KPI = {
  vendas: number;
  pedidos: number;
  ticketMedio: number;
  crescimentoMensal?: number;
  totalClientes?: number;
  novosClientes?: number;
};

type ProdutoResumo = {
  id: string;
  nome: string;
  vendidos: number;
  receita: number;
};

type PedidoResumo = {
  id: string;
  cliente: string;
  total: number;
  status: string;
  data: string;
  produtos?: number;
};

type VendasTempo = {
  periodo: string;
  receita: number;
  pedidos: number;
  ticketMedio: number;
};

type StatusDistribuicao = {
  status: string;
  quantidade: number;
  porcentagem: number;
};

export default function RelatoriosPage() {
  const { user: authUser } = useAuth();
  const [user, setUser] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  // Filters
  const [from, setFrom] = useState<string>(new Date(Date.now() - 1000 * 60 * 60 * 24 * 30).toISOString().slice(0, 10)); // 30 dias atrás
  const [to, setTo] = useState<string>(new Date().toISOString().slice(0, 10));
  const [query, setQuery] = useState<string>("");
  const [tipoRelatorio, setTipoRelatorio] = useState<string>("geral");
  const [loadingData, setLoadingData] = useState(false);

  // Data
  const [kpi, setKpi] = useState<KPI | null>(null);
  const [topProdutos, setTopProdutos] = useState<ProdutoResumo[]>([]);
  const [recentOrders, setRecentOrders] = useState<PedidoResumo[]>([]);
  const [vendasTempo, setVendasTempo] = useState<VendasTempo[]>([]);
  const [statusDistribuicao, setStatusDistribuicao] = useState<StatusDistribuicao[]>([]);
  const [error, setError] = useState<string | null>(null);

  // Verificar autenticação
  useEffect(() => {
    const checkAuth = async () => {
      try {
        // Verificar se há token armazenado
        const storedToken = localStorage.getItem('access_token');

        if (!storedToken) {
          window.location.href = "/login";
          return;
        }

        // Validar token no BFF
        const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/auth/me`, {
          method: 'GET',
          headers: {
            'Authorization': `Bearer ${storedToken}`,
            'Content-Type': 'application/json'
          }
        });

        if (!response.ok) {
          localStorage.removeItem('access_token');
          window.location.href = "/login";
          return;
        }

        const userData = await response.json();
        setUser(userData);
      } catch (error) {
        console.error("Erro ao verificar autenticação:", error);
        localStorage.removeItem('access_token');
        window.location.href = "/login";
      } finally {
        setLoading(false);
      }
    };
    checkAuth();
  }, []);

  // Mock data mais completo para desenvolvimento
  const mockVendasTempo: VendasTempo[] = [
    { periodo: "Mar", receita: 12000, pedidos: 320, ticketMedio: 37.5 },
    { periodo: "Abr", receita: 13500, pedidos: 350, ticketMedio: 38.6 },
    { periodo: "Mai", receita: 12500, pedidos: 342, ticketMedio: 36.5 },
    { periodo: "Jun", receita: 14000, pedidos: 370, ticketMedio: 37.8 },
    { periodo: "Jul", receita: 15200, pedidos: 385, ticketMedio: 39.5 },
    { periodo: "Ago", receita: 16800, pedidos: 420, ticketMedio: 40.0 }
  ];

  const mockStatusDistribuicao: StatusDistribuicao[] = [
    { status: "Entregue", quantidade: 210, porcentagem: 55.3 },
    { status: "Em Trânsito", quantidade: 90, porcentagem: 23.7 },
    { status: "Processando", quantidade: 45, porcentagem: 11.8 },
    { status: "Cancelado", quantidade: 35, porcentagem: 9.2 }
  ];

  // Fetch reports - tenta a rota /api/relatorios; usa mock como fallback
  const fetchReports = async () => {
    setLoadingData(true);
    setError(null);
    try {
      const res = await fetch(`/api/relatorios?from=${from}&to=${to}&q=${encodeURIComponent(query)}&tipo=${tipoRelatorio}`);
      if (!res.ok) throw new Error("API de relatórios indisponível");
      const data = await res.json();
      // Espera-se que a API retorne { kpi, topProdutos, recentOrders, vendasTempo, statusDistribuicao }
      setKpi(data.kpi || null);
      setTopProdutos(data.topProdutos || []);
      setRecentOrders(data.recentOrders || []);
      setVendasTempo(data.vendasTempo || mockVendasTempo);
      setStatusDistribuicao(data.statusDistribuicao || mockStatusDistribuicao);
    } catch (err) {
      console.warn("Erro ao buscar /api/relatorios, usando mock:", err);
      // Fallback de dados mock para desenvolvimento
      const mockKpi: KPI = {
        vendas: 16800,
        pedidos: 420,
        ticketMedio: 40.0,
        crescimentoMensal: 12.5,
        totalClientes: 1247,
        novosClientes: 89
      };
      const mockProdutos: ProdutoResumo[] = [
        { id: "p1", nome: "Medicamento A", vendidos: 120, receita: 4200 },
        { id: "p2", nome: "Suplemento B", vendidos: 85, receita: 2550 },
        { id: "p3", nome: "Equipamento C", vendidos: 95, receita: 3750 },
        { id: "p4", nome: "Medicamento D", vendidos: 60, receita: 1800 },
        { id: "p5", nome: "Suplemento E", vendidos: 70, receita: 2200 },
      ];
      const mockPedidos: PedidoResumo[] = [
        { id: "#001", cliente: "Farmácia Central Ltda", total: 1250.30, status: "entregue", data: new Date().toISOString(), produtos: 3 },
        { id: "#002", cliente: "Drogaria Moderna", total: 589.90, status: "em_transito", data: new Date(Date.now() - 86400000).toISOString(), produtos: 1 },
        { id: "#003", cliente: "Farmácia Popular", total: 2130.00, status: "processando", data: new Date(Date.now() - 86400000).toISOString(), produtos: 5 },
        { id: "#004", cliente: "MedCenter Distribuidora", total: 780.45, status: "cancelado", data: new Date(Date.now() - 172800000).toISOString(), produtos: 2 },
        { id: "#005", cliente: "Farmácia Vida & Saúde", total: 1456.78, status: "entregue", data: new Date(Date.now() - 172800000).toISOString(), produtos: 4 },
      ];
      setKpi(mockKpi);
      setTopProdutos(mockProdutos);
      setRecentOrders(mockPedidos);
      setVendasTempo(mockVendasTempo);
      setStatusDistribuicao(mockStatusDistribuicao);
    } finally {
      setLoadingData(false);
    }
  };

  const handleExportarPDF = () => {
    // Implementar exportação PDF
  };

  const handleImprimir = () => {
    window.print();
  };

  const exportCSV = () => {
    const rows: string[][] = [];
    rows.push(["Tipo", "ID", "Nome/Cliente", "Quantidade/Status", "Receita/Total", "Data"]);
    topProdutos.forEach((p) => rows.push(["produto", p.id, p.nome, String(p.vendidos), String(p.receita), ""]));
    recentOrders.forEach((o) => rows.push(["pedido", o.id, o.cliente, o.status, String(o.total), o.data]));

    const csv = rows.map((r) => r.map((c) => `"${String(c).replace(/"/g, '""')}"`).join(",")).join("\n");
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `relatorio_${from}_a_${to}.csv`;
    a.click();
    URL.revokeObjectURL(url);
  };

  useEffect(() => {
    fetchReports();
  }, []);

  const totalReceita = useMemo(() => (kpi ? kpi.vendas : 0), [kpi]);

  const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case 'entregue': return 'bg-green-100 text-green-800';
      case 'em_transito': case 'em trânsito': return 'bg-blue-100 text-blue-800';
      case 'processando': return 'bg-yellow-100 text-yellow-800';
      case 'cancelado': return 'bg-red-100 text-red-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  // Tela de carregamento
  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-gray-900 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-black">Carregando...</p>
        </div>
      </div>
    );
  }

  // Se não está autenticado, não renderizar
  if (!user) {
    return null;
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header unificado */}
      <Header
        user={user}
        title="Relatórios Avançados"
        subtitle="Análise completa de vendas e performance"
      />

      {/* Conteúdo principal com espaçamento adequado */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {/* Cabeçalho com ações */}
        <div className="mb-8">
          <div className="bg-white rounded-lg shadow-sm p-6">
            <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
              <div>
                <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
                  <ChartBarIcon className="w-8 h-8 text-blue-600" />
                  Painel de Relatórios
                </h1>
                <p className="text-gray-600 mt-1">
                  Análise completa de vendas, produtos e performance do negócio
                </p>
              </div>
              <div className="flex flex-wrap gap-2">
                <button
                  onClick={exportCSV}
                  className="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 flex items-center gap-2 text-sm"
                >
                  <DocumentArrowDownIcon className="w-4 h-4" />
                  Exportar CSV
                </button>
                <button
                  onClick={handleExportarPDF}
                  className="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 flex items-center gap-2 text-sm"
                >
                  <DocumentTextIcon className="w-4 h-4" />
                  Exportar PDF
                </button>
                <button
                  onClick={handleImprimir}
                  className="bg-gray-600 text-white px-4 py-2 rounded-md hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 flex items-center gap-2 text-sm"
                >
                  <PrinterIcon className="w-4 h-4" />
                  Imprimir
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Filtros Avançados */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-8">
          <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
            <FunnelIcon className="w-5 h-5 text-blue-600" />
            Filtros Avançados
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Data Início
              </label>
              <input
                type="date"
                value={from}
                onChange={(e) => setFrom(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Data Fim
              </label>
              <input
                type="date"
                value={to}
                onChange={(e) => setTo(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Tipo de Relatório
              </label>
              <select
                value={tipoRelatorio}
                onChange={(e) => setTipoRelatorio(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              >
                <option value="geral">Geral</option>
                <option value="vendas">Vendas</option>
                <option value="produtos">Produtos</option>
                <option value="clientes">Clientes</option>
                <option value="financeiro">Financeiro</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Buscar
              </label>
              <input
                type="text"
                placeholder="Produto, cliente ou código..."
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <div className="flex items-end">
              <button
                onClick={fetchReports}
                disabled={loadingData}
                className="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {loadingData ? 'Buscando...' : 'Aplicar Filtros'}
              </button>
            </div>
          </div>
        </div>

        {/* Cards de Métricas Principais */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <div className="bg-white rounded-lg shadow-sm p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Receita Total</p>
                <p className="text-2xl font-bold text-blue-700">
                  {kpi ? kpi.vendas.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }) : '—'}
                </p>
                {kpi?.crescimentoMensal && (
                  <p className="text-sm text-green-600 mt-1 flex items-center gap-1">
                    <ArrowTrendingUpIcon className="w-4 h-4" />
                    +{kpi.crescimentoMensal}% vs mês anterior
                  </p>
                )}
              </div>
              <div className="p-3 bg-blue-100 rounded-full">
                <CurrencyDollarIcon className="w-6 h-6 text-blue-600" />
              </div>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-sm p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Total de Pedidos</p>
                <p className="text-2xl font-bold text-green-700">
                  {kpi ? kpi.pedidos : '—'}
                </p>
                <p className="text-sm text-gray-600 mt-1">
                  Pedidos processados
                </p>
              </div>
              <div className="p-3 bg-green-100 rounded-full">
                <ChartBarIcon className="w-6 h-6 text-green-600" />
              </div>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-sm p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Ticket Médio</p>
                <p className="text-2xl font-bold text-yellow-600">
                  {kpi ? kpi.ticketMedio.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }) : '—'}
                </p>
                <p className="text-sm text-gray-600 mt-1">
                  Receita / pedidos
                </p>
              </div>
              <div className="p-3 bg-yellow-100 rounded-full">
                <DocumentTextIcon className="w-6 h-6 text-yellow-600" />
              </div>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-sm p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Total Clientes</p>
                <p className="text-2xl font-bold text-purple-700">
                  {kpi?.totalClientes ? kpi.totalClientes.toLocaleString('pt-BR') : '—'}
                </p>
                {kpi?.novosClientes && (
                  <p className="text-sm text-green-600 mt-1">
                    +{kpi.novosClientes} novos este mês
                  </p>
                )}
              </div>
              <div className="p-3 bg-purple-100 rounded-full">
                <UsersIcon className="w-6 h-6 text-purple-600" />
              </div>
            </div>
          </div>
        </div>

        {/* Gráficos Principais */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
          {/* Evolução da Receita */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">Evolução da Receita</h3>
            <div className="h-80">
              <Bar
                data={{
                  labels: vendasTempo.map(v => v.periodo),
                  datasets: [{
                    label: 'Receita (R$)',
                    data: vendasTempo.map(v => v.receita),
                    backgroundColor: 'rgba(37, 99, 235, 0.8)',
                    borderColor: 'rgba(37, 99, 235, 1)',
                    borderWidth: 1,
                    borderRadius: 6,
                    borderSkipped: false,
                  }]
                }}
                options={{
                  responsive: true,
                  maintainAspectRatio: false,
                  plugins: {
                    legend: {
                      display: true,
                      position: 'top'
                    },
                    tooltip: {
                      callbacks: {
                        label: function (context) {
                          return `Receita: ${context.parsed.y.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}`;
                        }
                      }
                    }
                  },
                  scales: {
                    y: {
                      beginAtZero: true,
                      ticks: {
                        callback: function (value) {
                          return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value as number);
                        }
                      }
                    }
                  }
                }}
              />
            </div>
          </div>

          {/* Status dos Pedidos */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">Status dos Pedidos</h3>
            <div className="h-80">
              <Doughnut
                data={{
                  labels: statusDistribuicao.map(s => s.status),
                  datasets: [{
                    data: statusDistribuicao.map(s => s.quantidade),
                    backgroundColor: [
                      'rgba(34, 197, 94, 0.8)',
                      'rgba(59, 130, 246, 0.8)',
                      'rgba(245, 158, 11, 0.8)',
                      'rgba(239, 68, 68, 0.8)'
                    ],
                    borderColor: [
                      'rgba(34, 197, 94, 1)',
                      'rgba(59, 130, 246, 1)',
                      'rgba(245, 158, 11, 1)',
                      'rgba(239, 68, 68, 1)'
                    ],
                    borderWidth: 2
                  }]
                }}
                options={{
                  responsive: true,
                  maintainAspectRatio: false,
                  plugins: {
                    legend: {
                      position: 'bottom',
                      labels: {
                        padding: 20,
                        usePointStyle: true
                      }
                    },
                    tooltip: {
                      callbacks: {
                        label: function (context) {
                          const label = context.label || '';
                          const value = context.parsed;
                          const total = context.dataset.data.reduce((a, b) => a + b, 0);
                          const percentage = ((value / total) * 100).toFixed(1);
                          return `${label}: ${value} pedidos (${percentage}%)`;
                        }
                      }
                    }
                  }
                }}
              />
            </div>
          </div>

          {/* Comparativo de Pedidos e Ticket Médio */}
          <div className="bg-white rounded-lg shadow-sm p-6 lg:col-span-2">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">Pedidos vs Ticket Médio</h3>
            <div className="h-80">
              <Line
                data={{
                  labels: vendasTempo.map(v => v.periodo),
                  datasets: [
                    {
                      label: 'Número de Pedidos',
                      data: vendasTempo.map(v => v.pedidos),
                      borderColor: 'rgba(16, 185, 129, 1)',
                      backgroundColor: 'rgba(16, 185, 129, 0.1)',
                      yAxisID: 'y',
                      tension: 0.4
                    },
                    {
                      label: 'Ticket Médio (R$)',
                      data: vendasTempo.map(v => v.ticketMedio),
                      borderColor: 'rgba(234, 179, 8, 1)',
                      backgroundColor: 'rgba(234, 179, 8, 0.1)',
                      yAxisID: 'y1',
                      tension: 0.4
                    }
                  ]
                }}
                options={{
                  responsive: true,
                  maintainAspectRatio: false,
                  interaction: {
                    mode: 'index',
                    intersect: false,
                  },
                  plugins: {
                    legend: {
                      position: 'top',
                    },
                    tooltip: {
                      callbacks: {
                        label: function (context) {
                          if (context.datasetIndex === 0) {
                            return `Pedidos: ${context.parsed.y}`;
                          } else {
                            return `Ticket Médio: ${context.parsed.y.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}`;
                          }
                        }
                      }
                    }
                  },
                  scales: {
                    x: {
                      display: true,
                      title: {
                        display: true,
                        text: 'Período'
                      }
                    },
                    y: {
                      type: 'linear',
                      display: true,
                      position: 'left',
                      title: {
                        display: true,
                        text: 'Número de Pedidos'
                      }
                    },
                    y1: {
                      type: 'linear',
                      display: true,
                      position: 'right',
                      title: {
                        display: true,
                        text: 'Ticket Médio (R$)'
                      },
                      grid: {
                        drawOnChartArea: false,
                      },
                      ticks: {
                        callback: function (value) {
                          return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value as number);
                        }
                      }
                    },
                  }
                }}
              />
            </div>
          </div>
        </div>

        {/* Seção de Produtos e Dados Tabulares */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
          {/* Top produtos */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold text-gray-900">Top 5 Produtos</h3>
              <p className="text-sm text-gray-600">Ordenado por receita</p>
            </div>

            {topProdutos.length === 0 ? (
              <p className="text-sm text-gray-600">Nenhum produto encontrado para o período.</p>
            ) : (
              <div className="space-y-3">
                {topProdutos.map((produto, index) => (
                  <div key={produto.id} className="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
                    <div className="flex items-center gap-3">
                      <div className={`w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold ${index === 0 ? 'bg-yellow-500' :
                          index === 1 ? 'bg-gray-400' :
                            index === 2 ? 'bg-amber-600' : 'bg-blue-500'
                        }`}>
                        {index + 1}
                      </div>
                      <div>
                        <p className="font-medium text-gray-900">{produto.nome}</p>
                        <p className="text-sm text-gray-600">{produto.vendidos} unidades vendidas</p>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="font-semibold text-gray-900">{produto.receita.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}</p>
                      <p className="text-sm text-gray-600">{((produto.receita / (totalReceita || 1)) * 100).toFixed(1)}%</p>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Resumo de Vendas */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">Resumo de Vendas</h3>
            <div className="space-y-4">
              <div className="flex justify-between items-center py-2 border-b border-gray-200">
                <span className="text-gray-600">Total de Produtos Vendidos</span>
                <span className="font-semibold">{topProdutos.reduce((total, p) => total + p.vendidos, 0)} unidades</span>
              </div>
              <div className="flex justify-between items-center py-2 border-b border-gray-200">
                <span className="text-gray-600">Receita Total dos Top 5</span>
                <span className="font-semibold">{topProdutos.reduce((total, p) => total + p.receita, 0).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}</span>
              </div>
              <div className="flex justify-between items-center py-2 border-b border-gray-200">
                <span className="text-gray-600">Produto Mais Vendido</span>
                <span className="font-semibold">{topProdutos[0]?.nome || '—'}</span>
              </div>
              <div className="flex justify-between items-center py-2 border-b border-gray-200">
                <span className="text-gray-600">Crescimento Mensal</span>
                <span className="font-semibold text-green-600">+{kpi?.crescimentoMensal || 0}%</span>
              </div>
              <div className="flex justify-between items-center py-2">
                <span className="text-gray-600">Meta Mensal</span>
                <span className="font-semibold text-blue-600">85% atingida</span>
              </div>
            </div>
          </div>
        </div>

        {/* Tabela de Pedidos Recentes */}
        <div className="bg-white rounded-lg shadow-sm p-6">
          <div className="flex items-center justify-between mb-6">
            <h3 className="text-lg font-semibold text-gray-900">Pedidos Recentes</h3>
            <p className="text-sm text-gray-600">Últimos pedidos no período</p>
          </div>

          {recentOrders.length === 0 ? (
            <p className="text-sm text-gray-600">Nenhum pedido encontrado.</p>
          ) : (
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      ID do Pedido
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Cliente
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Produtos
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Total
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Status
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Data
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {recentOrders.map((pedido) => (
                    <tr key={pedido.id} className="hover:bg-gray-50">
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{pedido.id}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{pedido.cliente}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{pedido.produtos || '—'} itens</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        {pedido.total.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(pedido.status)}`}>
                          {pedido.status.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                        {new Date(pedido.data).toLocaleDateString('pt-BR')}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {/* Paginação simulada */}
          <div className="flex items-center justify-between mt-6 pt-4 border-t border-gray-200">
            <div className="text-sm text-gray-700">
              Mostrando <span className="font-medium">1</span> a <span className="font-medium">{recentOrders.length}</span> de{' '}
              <span className="font-medium">{recentOrders.length}</span> pedidos
            </div>
            <div className="flex gap-2">
              <button className="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                Anterior
              </button>
              <button className="px-3 py-1 text-sm border border-gray-300 rounded-md bg-blue-600 text-white">
                1
              </button>
              <button className="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                Próxima
              </button>
            </div>
          </div>
        </div>

        {/* Mensagens de erro */}
        {error && (
          <div className="mt-6 bg-red-50 border border-red-200 text-red-700 p-3 rounded-lg">
            <strong>Erro:</strong> {error}
          </div>
        )}
      </main>
    </div>
  );
}