'use client'

import { useState, useEffect, Suspense } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { toast } from 'react-hot-toast'
import { Models } from 'appwrite'
import { 
  XCircleIcon,
  ArrowLeftIcon,
  CreditCardIcon
} from '@heroicons/react/24/outline'

import { getCurrentUserWithRetry } from '@/lib/auth'
import Header from '@/components/Header'

const FalhaContent = () => {
  const router = useRouter()
  const searchParams = useSearchParams()
  
  const [user, setUser] = useState<Models.User<Models.Preferences> | null>(null)
  const [loading, setLoading] = useState(true)

  const pedidoId = searchParams.get('pedido')
  const paymentId = searchParams.get('payment_id')
  const status = searchParams.get('status')

  useEffect(() => {
    const initializeUser = async () => {
      try {
        const currentUser = await getCurrentUserWithRetry()
        if (!currentUser) {
          router.push('/')
          return
        }
        setUser(currentUser)
        
        toast.error('Pagamento não foi aprovado. Tente novamente.')
        
      } catch (error) {
        console.error('Erro ao verificar autenticação:', error)
        router.push('/')
      } finally {
        setLoading(false)
      }
    }

    initializeUser()
  }, [router])

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Carregando...</p>
        </div>
      </div>
    )
  }

  if (!user) {
    return null
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <Header user={user} title="Pagamento Rejeitado" subtitle="Ocorreu um problema com seu pagamento" />
      
      <main className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
          {/* Ícone de Falha */}
          <div className="w-24 h-24 mx-auto mb-6 bg-red-100 rounded-full flex items-center justify-center">
            <XCircleIcon className="w-12 h-12 text-red-600" />
          </div>

          {/* Título */}
          <h1 className="text-3xl font-bold text-gray-900 mb-4">
            Pagamento Rejeitado
          </h1>

          {/* Descrição */}
          <p className="text-lg text-gray-600 mb-6">
            Não foi possível processar seu pagamento. Verifique os dados e tente novamente.
          </p>

          {/* Informações do Pedido */}
          {(pedidoId || paymentId) && (
            <div className="bg-gray-50 rounded-lg p-4 mb-8">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                {pedidoId && (
                  <div>
                    <span className="text-gray-600">Número do pedido:</span>
                    <div className="font-medium">#{pedidoId.slice(-8)}</div>
                  </div>
                )}
                {paymentId && (
                  <div>
                    <span className="text-gray-600">ID do pagamento:</span>
                    <div className="font-medium">#{paymentId}</div>
                  </div>
                )}
                <div>
                  <span className="text-gray-600">Status:</span>
                  <div className="font-medium text-red-600">Rejeitado</div>
                </div>
                <div>
                  <span className="text-gray-600">Data:</span>
                  <div className="font-medium">{new Date().toLocaleDateString('pt-BR')}</div>
                </div>
              </div>
            </div>
          )}

          {/* Possíveis Causas */}
          <div className="text-left mb-8">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">Possíveis causas:</h3>
            <ul className="space-y-2 text-gray-600">
              <li className="flex items-start">
                <span className="inline-block w-2 h-2 bg-red-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                Dados do cartão incorretos ou vencido
              </li>
              <li className="flex items-start">
                <span className="inline-block w-2 h-2 bg-red-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                Limite insuficiente no cartão
              </li>
              <li className="flex items-start">
                <span className="inline-block w-2 h-2 bg-red-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                Problemas temporários com o processador de pagamento
              </li>
              <li className="flex items-start">
                <span className="inline-block w-2 h-2 bg-red-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                Cartão bloqueado pelo banco emissor
              </li>
            </ul>
          </div>

          {/* Botões de Ação */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button
              onClick={() => {
                // Voltar para tentar novamente mantendo os dados
                router.push(`/pagamento/mercadopago?pedido=${pedidoId}&metodo=mercadopago`)
              }}
              className="flex items-center justify-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
            >
              <CreditCardIcon className="w-5 h-5 mr-2" />
              Tentar Novamente
            </button>
            
            <button
              onClick={() => router.push('/checkout')}
              className="flex items-center justify-center px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
            >
              <ArrowLeftIcon className="w-5 h-5 mr-2" />
              Voltar ao Checkout
            </button>
          </div>

          {/* Contato para Suporte */}
          <div className="mt-8 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
            <p className="text-sm text-yellow-800">
              <strong>Precisa de ajuda?</strong> Entre em contato com nosso suporte se o problema persistir.
            </p>
          </div>
        </div>
      </main>
    </div>
  )
}

const FalhaPagamento = () => {
  return (
    <Suspense fallback={
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Carregando...</p>
        </div>
      </div>
    }>
      <FalhaContent />
    </Suspense>
  )
}

export default FalhaPagamento
