'use client';

import React, { useState, useEffect } from 'react';
import { Bar, Pie, Line, Doughnut } from 'react-chartjs-2';
import { useRouter } from 'next/navigation';
import { getCurrentUserWithRetry } from '@/lib/appwrite';
import { Models } from 'appwrite';
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 
} from '@heroicons/react/24/outline';

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

const mockData = {
  receita: [12000, 13500, 12500, 14000, 15200, 16800],
  pedidos: [320, 350, 342, 370, 385, 420],
  ticketMedio: [36.6, 38.5, 36.2, 37.8, 39.5, 40.0],
  meses: ['Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto'],
  topProdutos: [
    { nome: 'Medicamento A', receita: 4200, vendas: 120 },
    { nome: 'Suplemento B', receita: 2550, vendas: 85 },
    { nome: 'Equipamento C', receita: 3750, vendas: 95 },
    { nome: 'Medicamento D', receita: 1800, vendas: 60 },
    { nome: 'Suplemento E', receita: 2200, vendas: 70 }
  ],
  statusPedidos: {
    labels: ['Entregue', 'Em Trânsito', 'Processando', 'Cancelado'],
    values: [210, 90, 45, 42]
  },
  vendasPorRegiao: {
    labels: ['Sudeste', 'Sul', 'Nordeste', 'Centro-Oeste', 'Norte'],
    values: [45, 25, 15, 10, 5]
  },
  crescimentoMensal: 12.5,
  totalClientes: 1247,
  novosClientes: 89
};

export default function RelatoriosNovoLayout() {
  const router = useRouter();
  const [user, setUser] = useState<Models.User<Models.Preferences> | null>(null);
  const [loading, setLoading] = useState(true);
  const [filtro, setFiltro] = useState('');
  const [dataInicio, setDataInicio] = useState('');
  const [dataFim, setDataFim] = useState('');
  const [tipoRelatorio, setTipoRelatorio] = useState('geral');

  useEffect(() => {
    const checkAuth = async () => {
      try {
        const currentUser = await getCurrentUserWithRetry();
        if (!currentUser) {
          router.push('/');
          return;
        }
        setUser(currentUser);
      } catch (error) {
        console.error('Erro ao verificar autenticação:', error);
        router.push('/');
      } finally {
        setLoading(false);
      }
    };

    checkAuth();
  }, [router]);
  const handleExportarCSV = () => {
    // Implementar exportação CSV
    console.log('Exportando relatório em CSV...');
  };

  const handleExportarPDF = () => {
    // Implementar exportação PDF
    console.log('Exportando relatório em PDF...');
  };

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

  const handleAplicarFiltros = () => {
    console.log('Aplicando filtros:', { dataInicio, dataFim, filtro, tipoRelatorio });
  };

  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-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-gray-600">Carregando relatórios...</p>
        </div>
      </div>
    );
  }

  if (!user) {
    return null;
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <Header 
        user={user} 
        title="Relatórios Avançados"
        subtitle="Análise completa de vendas e performance"
      />
      
      <main className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        {/* 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={handleExportarCSV}
                  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={dataInicio}
                onChange={(e) => setDataInicio(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={dataFim}
                onChange={(e) => setDataFim(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={filtro}
                onChange={(e) => setFiltro(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={handleAplicarFiltros}
                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"
              >
                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">
                  R$ {mockData.receita[mockData.receita.length - 1].toLocaleString('pt-BR')}
                </p>
                <p className="text-sm text-green-600 mt-1">
                  +{mockData.crescimentoMensal}% vs mês anterior
                </p>
              </div>
              <div className="h-16 w-24">
                <Line
                  data={{
                    labels: mockData.meses.slice(-4),
                    datasets: [{
                      data: mockData.receita.slice(-4),
                      borderColor: 'rgba(37, 99, 235, 1)',
                      backgroundColor: 'rgba(37, 99, 235, 0.1)',
                      tension: 0.4,
                      pointRadius: 2
                    }]
                  }}
                  options={{
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                      x: { display: false },
                      y: { display: false }
                    },
                    elements: { point: { radius: 0 } }
                  }}
                />
              </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">
                  {mockData.pedidos[mockData.pedidos.length - 1]}
                </p>
                <p className="text-sm text-green-600 mt-1">
                  +{((mockData.pedidos[mockData.pedidos.length - 1] - mockData.pedidos[mockData.pedidos.length - 2]) / mockData.pedidos[mockData.pedidos.length - 2] * 100).toFixed(1)}% vs mês anterior
                </p>
              </div>
              <div className="h-16 w-24">
                <Bar
                  data={{
                    labels: mockData.meses.slice(-4),
                    datasets: [{
                      data: mockData.pedidos.slice(-4),
                      backgroundColor: 'rgba(16, 185, 129, 0.8)',
                      borderRadius: 4
                    }]
                  }}
                  options={{
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                      x: { display: false },
                      y: { display: false }
                    }
                  }}
                />
              </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">
                  R$ {mockData.ticketMedio[mockData.ticketMedio.length - 1].toLocaleString('pt-BR')}
                </p>
                <p className="text-sm text-green-600 mt-1">
                  +{((mockData.ticketMedio[mockData.ticketMedio.length - 1] - mockData.ticketMedio[mockData.ticketMedio.length - 2]) / mockData.ticketMedio[mockData.ticketMedio.length - 2] * 100).toFixed(1)}% vs mês anterior
                </p>
              </div>
              <div className="h-16 w-24">
                <Line
                  data={{
                    labels: mockData.meses.slice(-4),
                    datasets: [{
                      data: mockData.ticketMedio.slice(-4),
                      borderColor: 'rgba(234, 179, 8, 1)',
                      backgroundColor: 'rgba(234, 179, 8, 0.1)',
                      tension: 0.4
                    }]
                  }}
                  options={{
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                      x: { display: false },
                      y: { display: false }
                    },
                    elements: { point: { radius: 0 } }
                  }}
                />
              </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">
                  {mockData.totalClientes.toLocaleString('pt-BR')}
                </p>
                <p className="text-sm text-green-600 mt-1">
                  +{mockData.novosClientes} novos este mês
                </p>
              </div>
              <div className="h-16 w-16">
                <Doughnut
                  data={{
                    datasets: [{
                      data: [mockData.novosClientes, mockData.totalClientes - mockData.novosClientes],
                      backgroundColor: ['rgba(147, 51, 234, 0.8)', 'rgba(229, 231, 235, 0.3)'],
                      borderWidth: 0
                    }]
                  }}
                  options={{
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    cutout: '70%'
                  }}
                />
              </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: mockData.meses,
                  datasets: [{
                    label: 'Receita (R$)',
                    data: mockData.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: R$ ${context.parsed.y.toLocaleString('pt-BR')}`;
                        }
                      }
                    }
                  },
                  scales: {
                    y: {
                      beginAtZero: true,
                      ticks: {
                        callback: function(value) {
                          return `R$ ${value.toLocaleString('pt-BR')}`;
                        }
                      }
                    }
                  }
                }}
              />
            </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: mockData.statusPedidos.labels,
                  datasets: [{
                    data: mockData.statusPedidos.values,
                    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>

          {/* Vendas por Região */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">Vendas por Região</h3>
            <div className="h-80">
              <Pie
                data={{
                  labels: mockData.vendasPorRegiao.labels,
                  datasets: [{
                    data: mockData.vendasPorRegiao.values,
                    backgroundColor: [
                      'rgba(99, 102, 241, 0.8)',
                      'rgba(34, 197, 94, 0.8)',
                      'rgba(245, 158, 11, 0.8)',
                      'rgba(239, 68, 68, 0.8)',
                      'rgba(139, 92, 246, 0.8)'
                    ],
                    borderColor: [
                      'rgba(99, 102, 241, 1)',
                      'rgba(34, 197, 94, 1)',
                      'rgba(245, 158, 11, 1)',
                      'rgba(239, 68, 68, 1)',
                      'rgba(139, 92, 246, 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;
                          return `${label}: ${value}% das vendas`;
                        }
                      }
                    }
                  }
                }}
              />
            </div>
          </div>

          {/* Comparativo de Pedidos e Ticket Médio */}
          <div className="bg-white rounded-lg shadow-sm p-6">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">Pedidos vs Ticket Médio</h3>
            <div className="h-80">
              <Line
                data={{
                  labels: mockData.meses,
                  datasets: [
                    {
                      label: 'Número de Pedidos',
                      data: mockData.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: mockData.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: R$ ${context.parsed.y.toLocaleString('pt-BR')}`;
                          }
                        }
                      }
                    }
                  },
                  scales: {
                    x: {
                      display: true,
                      title: {
                        display: true,
                        text: 'Meses'
                      }
                    },
                    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 `R$ ${value.toLocaleString('pt-BR')}`;
                        }
                      }
                    },
                  }
                }}
              />
            </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">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">Top 5 Produtos</h3>
            <div className="space-y-3">
              {mockData.topProdutos.map((produto, index) => (
                <div key={produto.nome} 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.vendas} unidades vendidas</p>
                    </div>
                  </div>
                  <div className="text-right">
                    <p className="font-semibold text-gray-900">R$ {produto.receita.toLocaleString('pt-BR')}</p>
                    <p className="text-sm text-gray-600">receita</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">{mockData.topProdutos.reduce((total, p) => total + p.vendas, 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">R$ {mockData.topProdutos.reduce((total, p) => total + p.receita, 0).toLocaleString('pt-BR')}</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">{mockData.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">+{mockData.crescimentoMensal}%</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>
            <button className="text-blue-600 hover:text-blue-700 text-sm font-medium">
              Ver todos os pedidos
            </button>
          </div>
          <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>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Ações
                  </th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                <tr className="hover:bg-gray-50">
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#001</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Farmácia Central Ltda</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">3 itens</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">R$ 1.250,30</td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                      Entregue
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">28/08/2025</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-blue-600">
                    <button className="hover:text-blue-700">Ver detalhes</button>
                  </td>
                </tr>
                <tr className="hover:bg-gray-50">
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#002</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Drogaria Moderna</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">1 item</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">R$ 589,90</td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                      Em Trânsito
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">27/08/2025</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-blue-600">
                    <button className="hover:text-blue-700">Ver detalhes</button>
                  </td>
                </tr>
                <tr className="hover:bg-gray-50">
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#003</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Farmácia Popular</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">5 itens</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">R$ 2.130,00</td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
                      Processando
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">27/08/2025</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-blue-600">
                    <button className="hover:text-blue-700">Ver detalhes</button>
                  </td>
                </tr>
                <tr className="hover:bg-gray-50">
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#004</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">MedCenter Distribuidora</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">2 itens</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">R$ 780,45</td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                      Cancelado
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">26/08/2025</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-blue-600">
                    <button className="hover:text-blue-700">Ver detalhes</button>
                  </td>
                </tr>
                <tr className="hover:bg-gray-50">
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#005</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Farmácia Vida & Saúde</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">4 itens</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">R$ 1.456,78</td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                      Entregue
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">26/08/2025</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-blue-600">
                    <button className="hover:text-blue-700">Ver detalhes</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          {/* Paginação */}
          <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">5</span> de{' '}
              <span className="font-medium">97</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">
                2
              </button>
              <button className="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">
                3
              </button>
              <button className="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">
                Próxima
              </button>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}
