import React from 'react';
import MainLayout from '@/components/layout/MainLayout';
import OverviewContent from '@/components/reports/OverviewContent';
import { useSalesDataQuery } from '@/hooks/useSalesDataQuery';
import { useCustomersQuery } from '@/hooks/useCustomersQuery';

const Dashboard = () => {
  const { 
    daily,
    monthly,
    trend,
    isLoading,
    salesChange,
    ordersChange
  } = useSalesDataQuery();

  const { customers, loading: customersLoading } = useCustomersQuery();

  const isDataLoading = isLoading || customersLoading;

  return (
    <MainLayout>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h1 className="text-3xl font-bold tracking-tight text-gray-900">Dashboard</h1>
        </div>
        
        {isDataLoading ? (
          <div className="text-center py-8">Carregando dados...</div>
        ) : (
          <>
            <OverviewContent
              dailySales={daily.total_sales}
              dailyOrders={daily.total_orders}
              monthlyFees={daily.total_fees}
              monthlySales={monthly.total_sales}
              monthlyOrders={monthly.total_orders}
              salesChange={salesChange}
              ordersChange={ordersChange}
              salesTrend={trend}
              totalCustomers={customers.length}
            />
            
            {/* Checklist de Publicação */}
            <div className="p-4 bg-primary/5 rounded-lg border border-primary/20">
              <div className="flex items-center justify-between mb-3">
                <h3 className="font-semibold text-sm">📋 Checklist de Publicação</h3>
                <span className="text-xs font-mono bg-primary/10 px-2 py-1 rounded">
                  {import.meta.env.VITE_APP_BUILD || 'dev'}
                </span>
              </div>
              
              <div className="space-y-2 text-xs">
                <div className="flex items-start gap-2">
                  <span>✅</span>
                  <div>
                    <p className="font-medium">Versão Atual:</p>
                    <p className="text-muted-foreground font-mono">{import.meta.env.VITE_APP_BUILD || 'Desenvolvimento'}</p>
                  </div>
                </div>
                
                <div className="flex items-start gap-2">
                  <span>🔄</span>
                  <div>
                    <p className="font-medium">Cache-Busting:</p>
                    <button
                      onClick={() => window.open(`${window.location.origin}?v=${Date.now()}`, '_blank')}
                      className="text-primary underline hover:no-underline"
                    >
                      Abrir em nova aba sem cache
                    </button>
                  </div>
                </div>
                
                <div className="flex items-start gap-2">
                  <span>🌐</span>
                  <div>
                    <p className="font-medium">Verificação de Domínio:</p>
                    <p className="text-muted-foreground">
                      Vá em <strong>Settings → Domains</strong> e verifique se o status está "Active"
                    </p>
                  </div>
                </div>
                
                <div className="flex items-start gap-2">
                  <span>💾</span>
                  <div>
                    <p className="font-medium">Limpar Cache CDN:</p>
                    <p className="text-muted-foreground">
                      Se usar Cloudflare: Dashboard → Caching → Purge Everything
                    </p>
                  </div>
                </div>
                
                <div className="flex items-start gap-2">
                  <span>🔍</span>
                  <div>
                    <p className="font-medium">Console do Navegador:</p>
                    <p className="text-muted-foreground">
                      Verifique se a versão no console bate com a versão acima
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Debug Info */}
            <div className="text-xs text-muted-foreground p-4 bg-muted rounded-lg border">
              <div className="flex items-center justify-between mb-2">
                <p className="font-semibold">Informações de Debug</p>
                <button 
                  onClick={() => window.location.reload()} 
                  className="px-3 py-1 bg-primary text-primary-foreground rounded hover:bg-primary/90 text-xs"
                >
                  Atualizar Página
                </button>
              </div>
              <div className="grid grid-cols-2 gap-2">
                <div>
                  <p className="font-medium">Hoje ({new Date().toLocaleDateString('pt-BR')}):</p>
                  <p>• Pedidos: {daily.total_orders}</p>
                  <p>• Vendas: R$ {daily.total_sales.toFixed(2)}</p>
                  <p>• Taxas: R$ {daily.total_fees.toFixed(2)}</p>
                </div>
                <div>
                  <p className="font-medium">Mês Atual:</p>
                  <p>• Pedidos: {monthly.total_orders}</p>
                  <p>• Vendas: R$ {monthly.total_sales.toFixed(2)}</p>
                  <p>• Taxas: R$ {monthly.total_fees.toFixed(2)}</p>
                </div>
              </div>
              <p className="mt-2 text-yellow-600">⚠️ Verifique o console do navegador para logs detalhados</p>
            </div>
          </>
        )}
      </div>
    </MainLayout>
  );
};

export default Dashboard;