'use client'

/**
 * Página de Sucesso do Pagamento
 * 
 * FLUXO DE LIMPEZA DO CARRINHO:
 * 1. Checkout cria o pedido mas NÃO limpa o carrinho
 * 2. Usuário é redirecionado para esta página após pagamento
 * 3. Esta página processa o pós-pagamento (fatura, estoque, entrega)
 * 4. SOMENTE após sucesso completo, o carrinho é limpo
 * 5. Se o usuário voltar ou der refresh, carrinho já estará limpo
 * 
 * Isso garante que o carrinho só seja removido quando o pagamento
 * for realmente aprovado e processado com sucesso.
 */

import { useEffect, useState, Suspense, useRef } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import Header from '@/components/Header'
import { useCarrinho } from '@/contexts/CarrinhoContext'
import { mercadoPagoService } from '@/services/mercadoPagoService'
import { pedidoApiService } from '@/services/pedidoApiService'
import { produtosVendaService } from '@/services/produtosVendaService'
import { faturaApiService } from '@/services/faturaApiService'
import { entregasApiService } from '@/services/entregasApiService'
import { getCurrentUserEmpresaId } from '@/utils/authUtils'
import { toast } from 'react-hot-toast'
import {
  CheckCircleIcon,
  ArrowLeftIcon,
  DocumentTextIcon,
  TruckIcon,
  ClockIcon,
  CogIcon,
  ArchiveBoxIcon
} from '@heroicons/react/24/outline'

const PagamentoSucessoContent = () => {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { limparCarrinho } = useCarrinho()
  const [user, setUser] = useState<any>(null)
  const [carregando, setCarregando] = useState(true)
  const [dadosPagamento, setDadosPagamento] = useState<any>(null)
  const [dadosPedido, setDadosPedido] = useState<any>(null)
  const [erro, setErro] = useState<string | null>(null)
  const [carrinhoLimpo, setCarrinhoLimpo] = useState(false)

  // Estados para processamento pós-pagamento
  const [processandoPostPagamento, setProcessandoPostPagamento] = useState(false)
  const [processandoFatura, setProcessandoFatura] = useState(false)
  const [faturaId, setFaturaId] = useState<string | null>(null)
  const [processandoEstoque, setProcessandoEstoque] = useState(false)
  const [estoqueAjustado, setEstoqueAjustado] = useState(false)
  const [processandoEntrega, setProcessandoEntrega] = useState(false)
  const [entregaId, setEntregaId] = useState<string | null>(null)
  const [processamentoCompleto, setProcessamentoCompleto] = useState(false)

  // Ref para garantir que o processamento só ocorra uma vez por montagem do componente
  const processingRef = useRef(false)

  // Parâmetros que podem vir do Mercado Pago
  const paymentId = searchParams.get('payment_id')
  const status = searchParams.get('status')
  const externalReference = searchParams.get('external_reference') || searchParams.get('pedido') // Aceitar 'pedido' como fallback
  const preferenceId = searchParams.get('preference_id')
  const merchantOrder = searchParams.get('merchant_order_id')

  useEffect(() => {
    const carregarUsuario = () => {
      try {
        const userStorage = localStorage.getItem('user')
        if (userStorage) {
          setUser(JSON.parse(userStorage))
        }
      } catch (error) {
        console.error('Erro ao carregar usuário:', error)
      }
    }

    carregarUsuario()
  }, [])

  // Funções para controlar reprocessamento
  const marcarPedidoComoProcessado = (pedidoId: string) => {
    try {
      const chave = `pedido_processado_${pedidoId}`
      const dadosProcessamento = {
        processadoEm: new Date().toISOString(),
        timestamp: Date.now()
      }
      localStorage.setItem(chave, JSON.stringify(dadosProcessamento))
    } catch (error) {
      console.error('Erro ao marcar pedido como processado:', error)
    }
  }

  const verificarSePedidoJaFoiProcessado = (pedidoId: string): boolean => {
    try {
      const chave = `pedido_processado_${pedidoId}`
      const dadosProcessamento = localStorage.getItem(chave)

      if (dadosProcessamento) {
        const dados = JSON.parse(dadosProcessamento)
        const agora = Date.now()
        const tempoProcessamento = dados.timestamp

        // Considera processado se foi há menos de 24 horas (para evitar problemas de cache muito antigo)
        const diferencaHoras = (agora - tempoProcessamento) / (1000 * 60 * 60)

        if (diferencaHoras < 24) {
          return true
        } else {
          // Remove registro antigo
          localStorage.removeItem(chave)
          return false
        }
      }

      return false
    } catch (error) {
      console.error('Erro ao verificar se pedido foi processado:', error)
      return false
    }
  }

  // Função para processar operações pós-pagamento (como era feito no checkout)
  const processarOperacoesPosPagamento = async (pedidoId: string, dadosPedido: any) => {
    // Bloqueio de execução local (dentro do mesmo ciclo de vida do componente)
    if (processingRef.current) {
      return
    }

    try {
      processingRef.current = true

      // Verificar se o pedido já foi processado anteriormente
      if (verificarSePedidoJaFoiProcessado(pedidoId)) {
        toast('ℹ️ Este pedido já foi processado anteriormente', {
          icon: 'ℹ️',
          duration: 4000,
        })

        // Simular estados de processamento completo para exibir interface correta
        setProcessamentoCompleto(true)
        setFaturaId(`fatura_ja_processada_${pedidoId}`)
        setEstoqueAjustado(true)
        setEntregaId(`entrega_ja_processada_${pedidoId}`)

        // Limpar carrinho se ainda não foi limpo (pedido já processado mas primeira visita à página)
        if (!carrinhoLimpo) {
          await limparCarrinho()
          setCarrinhoLimpo(true)
        }

        return
      }

      // Marcar imediatamente como "em processamento" para evitar race conditions entre abas
      marcarPedidoComoProcessado(pedidoId)

      setProcessandoPostPagamento(true)

      // 1. Criar fatura para o pedido
      setProcessandoFatura(true)

      try {
        const faturaResponse = await faturaApiService.criar(pedidoId)

        if (faturaResponse.success) {
          const faturaIdCriada = faturaResponse.data?.$id || faturaResponse.data?.id
          setFaturaId(faturaIdCriada)

          // Marcar fatura como paga (já que o pagamento foi aprovado no Mercado Pago)
          const faturaUpdateResponse = await faturaApiService.atualizarStatus(faturaIdCriada, 'pago')
          if (faturaUpdateResponse.success) {
            toast.success('📄 Fatura criada e marcada como paga!')
          }
        } else {
          console.warn('⚠️ Erro ao criar fatura:', faturaResponse.error)
        }
      } catch (error) {
        console.error('❌ Erro ao processar fatura:', error)
      }

      setProcessandoFatura(false)

      // 2. Ajustar estoque dos produtos
      setProcessandoEstoque(true)

      try {
        // Buscar itens do pedido para ajustar estoque
        if (dadosPedido && dadosPedido.itens && dadosPedido.quantidade) {
          const itensParaAjuste = dadosPedido.itens.map((produtoId: string, index: number) => ({
            produto: { id: produtoId },
            quantidade: dadosPedido.quantidade[index]
          }))

          const resultadoEstoque = await produtosVendaService.processarAjusteEstoquePedido(itensParaAjuste)

          if (resultadoEstoque.sucessos > 0) {
            toast.success(`📦 Estoque ajustado: ${resultadoEstoque.sucessos} produtos atualizados`)
            setEstoqueAjustado(true)

            if (resultadoEstoque.erros > 0) {
              toast.error(`⚠️ ${resultadoEstoque.erros} produtos não puderam ter estoque ajustado`)
            }
          } else {
            console.error('❌ Falha ao ajustar estoque:', resultadoEstoque.detalhes)
            toast.error('Erro ao ajustar estoque dos produtos')
          }
        }
      } catch (error) {
        console.error('❌ Erro ao ajustar estoque:', error)
        toast.error('Erro ao processar ajuste de estoque')
      }

      setProcessandoEstoque(false)

      // 3. Criar entrega para o pedido
      setProcessandoEntrega(true)

      try {
        // Obter o ID real da empresa do usuário
        const empresaIdReal = await getCurrentUserEmpresaId()

        // Tentar recuperar dados do checkout do localStorage
        let dadosEntregaCache: any = null;
        let dadosFreteCache: any = null;

        try {
          const cacheEntrega = localStorage.getItem('checkout_dados_entrega');
          const cacheFrete = localStorage.getItem('checkout_dados_frete');
          if (cacheEntrega) dadosEntregaCache = JSON.parse(cacheEntrega);
          if (cacheFrete) dadosFreteCache = JSON.parse(cacheFrete);
        } catch (e) {
          console.error('Erro ao ler cache de entrega', e);
        }

        // Dados básicos para entrega (usando cache ou fallback)
        const dadosEntrega = {
          entregadorId: "entregador_padrao",
          empresaId: empresaIdReal || "empresa_padrao",
          enderecoEntrega: dadosEntregaCache?.endereco || "Endereço do cliente",
          cidadeEntrega: dadosEntregaCache?.cidade || "Cidade",
          estadoEntrega: dadosEntregaCache?.estado || "SP",
          cepEntrega: (dadosEntregaCache?.cep || "00000000").replace(/\D/g, ''),
          paisEntrega: "Brasil",
          bairroEntrega: dadosEntregaCache?.bairro || "Centro",
          numeroEntrega: dadosEntregaCache?.numero || "S/N",
          complementoEntrega: dadosEntregaCache?.complemento || "",
          nomeDestinatario: dadosEntregaCache?.nome || "Cliente",
          telefoneDestinatario: dadosEntregaCache?.telefone || "11999999999",
          emailDestinatario: dadosEntregaCache?.email || user?.email || dadosPedido?.cliente?.email || "cliente@exemplo.com",
          status: "pendente" as const,
          codigoRastreamento: `TRK${Date.now()}`,
          dataEntregaEstimativa: new Date(Date.now() + (dadosFreteCache?.prazo || 7) * 24 * 60 * 60 * 1000).toISOString(),
          dataColeta: new Date().toISOString(),
          dataAtribuicao: new Date().toISOString(),
          taxaEntrega: dadosPedido?.['valor-frete'] || dadosFreteCache?.valor || 0,
          distancia: dadosFreteCache?.distancia || 0,
          observacoesEntrega: `Entrega para pedido ${pedidoId}`
        }

        const entregaResponse = await entregasApiService.criar(dadosEntrega)

        if (entregaResponse.success && entregaResponse.data) {
          const entregaIdCriada = entregaResponse.data.id
          setEntregaId(entregaIdCriada)
          toast.success(`🚚 Entrega criada! Prazo: ${dadosFreteCache?.prazo || '5-7'} dias úteis`)
        } else {
          console.warn('⚠️ Não foi possível criar entrega:', entregaResponse.error)
          // Criar um ID mock para manter o fluxo
          const mockEntregaId = `entrega_mock_${Date.now()}`
          setEntregaId(mockEntregaId)
          toast('📋 Entrega será processada manualmente', {
            icon: '🚚',
            duration: 3000,
          })
        }
      } catch (error) {
        console.error('❌ Erro ao criar entrega:', error)
        toast.error('Erro ao processar entrega')
      }

      setProcessandoEntrega(false)
      setProcessamentoCompleto(true)

      // Limpar carrinho após sucesso completo do processamento
      if (!carrinhoLimpo) {
        await limparCarrinho()
        setCarrinhoLimpo(true)

        // Limpar cache de checkout
        localStorage.removeItem('checkout_dados_entrega');
        localStorage.removeItem('checkout_dados_frete');
      }

      toast.success('🎉 Pedido processado completamente!')

    } catch (error) {
      console.error('❌ Erro no processamento pós-pagamento:', error)
      toast.error('Erro ao processar operações pós-pagamento')
    } finally {
      setProcessandoPostPagamento(false)
    }
  }

  useEffect(() => {
    const processarRetornoPagamento = async () => {
      try {
        setCarregando(true)


        let paymentDataLocal: any = null
        let statusFinal: string | null = status || null

        // Se temos payment_id, verificar status do pagamento
        if (paymentId) {
          const statusResponse = await mercadoPagoService.verificarStatusPagamento(paymentId)

          if (statusResponse.success) {
            paymentDataLocal = statusResponse.data
            setDadosPagamento(paymentDataLocal)
            statusFinal = paymentDataLocal?.status || statusFinal
            toast.success('Pagamento confirmado com sucesso!')
          } else {
            console.warn('⚠️ Não foi possível verificar status do pagamento:', statusResponse.error)
          }
        } else if (externalReference) {
          // Se não temos payment_id mas temos external_reference, verificar por referência
          const statusResponse = await mercadoPagoService.verificarStatusPorReferencia(externalReference)

          if (statusResponse.success && statusResponse.data) {
            paymentDataLocal = statusResponse.data
            setDadosPagamento(paymentDataLocal)

            // Determinar status final baseado nos dados obtidos
            if (paymentDataLocal.is_approved) {
              statusFinal = 'approved'
              toast.success('Pagamento confirmado com sucesso!')
            } else if (paymentDataLocal.latest_payment?.status) {
              statusFinal = paymentDataLocal.latest_payment.status
            }
          } else {
            console.warn('⚠️ Não foi possível verificar status do pagamento por referência:', statusResponse.error)
          }
        }

        // Se temos external_reference (pedido ID), buscar dados do pedido
        if (externalReference) {
          const pedidoResponse = await pedidoApiService.buscarPorId(externalReference)

          if (pedidoResponse.success) {
            setDadosPedido(pedidoResponse.data)

            // Atualizar status do pedido para "pago" ou "aprovado"
            const atualizacaoResponse = await pedidoApiService.atualizarStatus(externalReference, 'aprovado')
            if (atualizacaoResponse.success) {
            } else {
              console.warn('⚠️ Não foi possível atualizar status do pedido:', atualizacaoResponse.error)
            }

            // Se o pagamento foi aprovado, executar processamento pós-pagamento
            // (independente de ter conseguido atualizar o status ou não)
            if (statusFinal === 'approved' || paymentDataLocal?.is_approved) {
              // Aguardar um pouco para garantir que o estado foi atualizado
              setTimeout(() => {
                processarOperacoesPosPagamento(externalReference, pedidoResponse.data)
              }, 1000)
            }
          } else {
            console.warn('⚠️ Não foi possível buscar dados do pedido:', pedidoResponse.error)
            // Mesmo sem dados do pedido, se o status for approved, tentar processar
            if (statusFinal === 'approved' || paymentDataLocal?.is_approved) {
              setTimeout(() => {
                processarOperacoesPosPagamento(externalReference, null)
              }, 1000)
            }
          }
        }

        // Mostrar mensagem de sucesso baseada no status
        if (statusFinal === 'approved') {
          toast.success('🎉 Pagamento aprovado com sucesso!')
        } else if (statusFinal === 'pending') {
          toast('⏳ Pagamento pendente de confirmação', {
            icon: '⏳',
            duration: 5000
          })
        } else if (statusFinal) {
          toast.success('✅ Retorno do pagamento processado!')
        }

      } catch (error) {
        console.error('❌ Erro ao processar retorno do pagamento:', error)
        setErro('Erro ao processar informações do pagamento')
        toast.error('Erro ao processar pagamento')
      } finally {
        setCarregando(false)
      }
    }

    // Só processar se tivermos pelo menos um parâmetro relevante
    if (paymentId || externalReference || status) {
      processarRetornoPagamento()
    } else {
      setCarregando(false)
      setErro('Parâmetros de pagamento não encontrados')
    }
  }, [paymentId, status, externalReference, preferenceId, merchantOrder])

  // useEffect para manipular histórico do navegador e prevenir reprocessamento
  useEffect(() => {
    // Adicionar listener para detectar volta do navegador
    const handlePopState = (event: PopStateEvent) => {

      // Se houver um pedido sendo processado ou já processado, redirecionar
      if (externalReference) {
        const jaProcessado = verificarSePedidoJaFoiProcessado(externalReference)
        if (jaProcessado || processandoPostPagamento || processamentoCompleto) {
          router.push('/pedidos')
          return
        }
      }
    }

    // Manipular histórico para prevenir volta acidental
    const manipularHistorico = () => {
      if (typeof window !== 'undefined' && (processamentoCompleto || processandoPostPagamento)) {
        // Adicionar uma entrada no histórico para "capturar" a volta
        window.history.pushState(null, '', window.location.href)

        // Adicionar listener para popstate
        window.addEventListener('popstate', handlePopState)
      }
    }

    manipularHistorico()

    // Cleanup
    return () => {
      if (typeof window !== 'undefined') {
        window.removeEventListener('popstate', handlePopState)
      }
    }
  }, [processamentoCompleto, processandoPostPagamento, externalReference, router])

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

  const formatarStatus = (status: string) => {
    const statusMap: { [key: string]: { label: string; cor: string; icone: string } } = {
      'approved': { label: 'Aprovado', cor: 'text-green-600', icone: '✅' },
      'pending': { label: 'Pendente', cor: 'text-yellow-600', icone: '⏳' },
      'authorized': { label: 'Autorizado', cor: 'text-blue-600', icone: '🔐' },
      'in_process': { label: 'Em Processamento', cor: 'text-blue-600', icone: '🔄' },
      'in_mediation': { label: 'Em Mediação', cor: 'text-orange-600', icone: '⚖️' },
      'rejected': { label: 'Rejeitado', cor: 'text-red-600', icone: '❌' },
      'cancelled': { label: 'Cancelado', cor: 'text-gray-600', icone: '🚫' },
      'refunded': { label: 'Reembolsado', cor: 'text-purple-600', icone: '↩️' },
      'charged_back': { label: 'Estornado', cor: 'text-red-600', icone: '⤴️' }
    }

    return statusMap[status] || { label: status, cor: 'text-gray-600', icone: '❓' }
  }

  if (carregando || processandoPostPagamento) {
    return (
      <div className="min-h-screen bg-gray-50">
        <Header user={user} />
        <main className="max-w-4xl mx-auto py-8 px-4">
          <div className="bg-white rounded-lg shadow p-8 text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
            <h1 className="text-xl font-semibold text-gray-900 mb-2">
              Processando seu pagamento...
            </h1>
            <p className="text-gray-600">
              Aguarde enquanto finalizamos seu pedido
            </p>
          </div>
        </main>
      </div >
    )
  }

  if (erro) {
    return (
      <div className="min-h-screen bg-gray-50">
        <Header user={user} />
        <main className="max-w-4xl mx-auto py-8 px-4">
          <div className="bg-white rounded-lg shadow p-8 text-center">
            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
              <DocumentTextIcon className="h-6 w-6 text-red-600" />
            </div>
            <h1 className="text-xl font-semibold text-gray-900 mb-2">
              Erro ao processar pagamento
            </h1>
            <p className="text-gray-600 mb-6">
              {erro}
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button
                onClick={() => router.push('/produtos')}
                className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
              >
                Voltar às Compras
              </button>
              <button
                onClick={() => router.push('/pedidos')}
                className="px-6 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50"
              >
                Ver Pedidos
              </button>
            </div>
          </div>
        </main>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <Header user={user} />

      <main className="max-w-4xl mx-auto py-8 px-4">
        <div className="bg-white rounded-lg shadow p-8">
          {/* Header de Sucesso */}
          <div className="text-center mb-8">
            <div className="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 mb-4">
              <CheckCircleIcon className="h-8 w-8 text-green-600" />
            </div>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">
              Pagamento Realizado!
            </h1>
            <p className="text-lg text-gray-600">
              Sua compra foi processada com sucesso
            </p>
          </div>

          {/* Informações do Pedido */}
          {dadosPedido && (
            <div className="mb-8">
              <h2 className="text-xl font-semibold text-gray-900 mb-4">
                Detalhes do Pedido
              </h2>
              <div className="bg-gray-50 rounded-lg p-6">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div>
                    <h3 className="text-sm font-medium text-gray-700 uppercase tracking-wide mb-3">
                      Pedido
                    </h3>
                    <div className="space-y-2">
                      <div className="flex justify-between">
                        <span className="text-sm text-gray-600">Número:</span>
                        <span className="text-sm font-medium text-gray-900">
                          {externalReference?.substring(0, 12)}...
                        </span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm text-gray-600">Status:</span>
                        <span className="text-sm font-medium text-green-600">
                          Processado com sucesso
                        </span>
                      </div>
                    </div>
                  </div>

                  <div>
                    <h3 className="text-sm font-medium text-gray-700 uppercase tracking-wide mb-3">
                      Itens
                    </h3>
                    <div className="space-y-2">
                      <div className="flex justify-between">
                        <span className="text-sm text-gray-600">Produtos:</span>
                        <span className="text-sm font-medium text-gray-900">
                          {dadosPedido.itens?.length || 0}
                        </span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm text-gray-600">Valor Total:</span>
                        <span className="text-sm font-semibold text-green-600">
                          {formatarPreco(dadosPedido['valor-total'] || 0)}
                        </span>
                      </div>
                    </div>
                  </div>

                  <div>
                    <h3 className="text-sm font-medium text-gray-700 uppercase tracking-wide mb-3">
                      Entrega
                    </h3>
                    <div className="space-y-2">
                      <div className="flex justify-between">
                        <span className="text-sm text-gray-600">Frete:</span>
                        <span className="text-sm font-medium text-green-600">
                          Grátis
                        </span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm text-gray-600">Prazo:</span>
                        <span className="text-sm font-medium text-gray-900">
                          5-7 dias úteis
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Próximos Passos */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-4">
              Próximos Passos
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <div className="flex items-center mb-2">
                  <DocumentTextIcon className="h-5 w-5 text-blue-600 mr-2" />
                  <h3 className="font-medium text-blue-900">Confirmação</h3>
                </div>
                <p className="text-sm text-blue-700">
                  Você receberá um e-mail com todos os detalhes da compra
                </p>
              </div>

              <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                <div className="flex items-center mb-2">
                  <TruckIcon className="h-5 w-5 text-green-600 mr-2" />
                  <h3 className="font-medium text-green-900">Preparação</h3>
                </div>
                <p className="text-sm text-green-700">
                  Seus produtos estão sendo separados para envio
                </p>
              </div>

              <div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
                <div className="flex items-center mb-2">
                  <ClockIcon className="h-5 w-5 text-purple-600 mr-2" />
                  <h3 className="font-medium text-purple-900">Acompanhamento</h3>
                </div>
                <p className="text-sm text-purple-700">
                  Acompanhe o status na seção "Meus Pedidos"
                </p>
              </div>
            </div>
          </div>

          {/* Ações */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button
              onClick={() => router.push('/pedidos')}
              className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium"
            >
              Ver Meus Pedidos
            </button>
            <button
              onClick={() => router.push('/produtos')}
              className="px-6 py-3 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 font-medium"
            >
              Continuar Comprando
            </button>
          </div>
        </div>
      </main>
    </div>
  )
}

const LoadingFallback = () => (
  <div className="min-h-screen bg-gray-50">
    <div className="max-w-4xl mx-auto py-8 px-4">
      <div className="bg-white rounded-lg shadow p-8 text-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
        <h1 className="text-xl font-semibold text-gray-900 mb-2">
          Carregando...
        </h1>
        <p className="text-gray-600">
          Processando informações do pagamento
        </p>
      </div>
    </div>
  </div>
)

const PagamentoSucessoPage = () => {
  return (
    <Suspense fallback={<LoadingFallback />}>
      <PagamentoSucessoContent />
    </Suspense>
  )
}

export default PagamentoSucessoPage