'use client'

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

const PagamentoErroContent = () => {
  const router = useRouter()
  const searchParams = useSearchParams()
  const [user, setUser] = useState<any>(null)

  // 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')
  const preferenceId = searchParams.get('preference_id')
  const statusDetail = searchParams.get('status_detail')

  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()
  }, [])

  useEffect(() => {
    console.log('❌ Página de erro do pagamento acessada com parâmetros:', {
      paymentId,
      status,
      externalReference,
      preferenceId,
      statusDetail
    })

    // Mostrar mensagem de erro baseada no status
    if (status === 'rejected') {
      toast.error('💳 Pagamento rejeitado')
    } else if (status === 'cancelled') {
      toast.error('🚫 Pagamento cancelado')
    } else {
      toast.error('❌ Erro no processamento do pagamento')
    }
  }, [paymentId, status, externalReference, preferenceId, statusDetail])

  const formatarMotivoErro = (status: string, statusDetail: string) => {
    const motivos: { [key: string]: string } = {
      'cc_rejected_bad_filled_card_number': 'Número do cartão inválido',
      'cc_rejected_bad_filled_date': 'Data de vencimento inválida',
      'cc_rejected_bad_filled_other': 'Dados do cartão inválidos',
      'cc_rejected_bad_filled_security_code': 'Código de segurança inválido',
      'cc_rejected_blacklist': 'Cartão bloqueado',
      'cc_rejected_call_for_authorize': 'Autorização necessária com o banco',
      'cc_rejected_card_disabled': 'Cartão desabilitado',
      'cc_rejected_card_error': 'Erro no cartão',
      'cc_rejected_duplicated_payment': 'Pagamento duplicado',
      'cc_rejected_high_risk': 'Pagamento rejeitado por segurança',
      'cc_rejected_insufficient_amount': 'Saldo insuficiente',
      'cc_rejected_invalid_installments': 'Parcelamento inválido',
      'cc_rejected_max_attempts': 'Muitas tentativas realizadas',
      'cc_rejected_other_reason': 'Cartão rejeitado',
      'rejected': 'Pagamento rejeitado pelo banco',
      'cancelled': 'Pagamento cancelado pelo usuário',
      'pending': 'Pagamento pendente'
    }

    const chave = statusDetail || status
    return motivos[chave] || 'Erro não especificado no pagamento'
  }

  const obterSugestao = (status: string, statusDetail: string) => {
    const sugestoes: { [key: string]: string } = {
      'cc_rejected_bad_filled_card_number': 'Verifique se o número do cartão foi digitado corretamente',
      'cc_rejected_bad_filled_date': 'Verifique a data de vencimento do cartão',
      'cc_rejected_bad_filled_security_code': 'Verifique o código de segurança (CVV) do cartão',
      'cc_rejected_blacklist': 'Entre em contato com seu banco ou use outro cartão',
      'cc_rejected_call_for_authorize': 'Entre em contato com seu banco para autorizar a transação',
      'cc_rejected_card_disabled': 'Use outro cartão ou entre em contato com seu banco',
      'cc_rejected_insufficient_amount': 'Verifique o saldo disponível ou use outro cartão',
      'cc_rejected_max_attempts': 'Aguarde alguns minutos antes de tentar novamente',
      'rejected': 'Tente novamente com outro método de pagamento',
      'cancelled': 'Você pode tentar realizar o pagamento novamente'
    }

    const chave = statusDetail || status
    return sugestoes[chave] || 'Tente novamente ou use outro método de pagamento'
  }

  const voltarParaCheckout = () => {
    if (externalReference) {
      router.push(`/checkout?pedido=${externalReference}`)
    } else {
      router.push('/checkout')
    }
  }

  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 Erro */}
          <div className="text-center mb-8">
            <div className="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-100 mb-4">
              <XCircleIcon className="h-8 w-8 text-red-600" />
            </div>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">
              Problema no Pagamento
            </h1>
            <p className="text-lg text-gray-600">
              Não foi possível processar seu pagamento
            </p>
          </div>

          {/* Detalhes do Erro */}
          <div className="mb-8">
            <div className="bg-red-50 border border-red-200 rounded-lg p-6">
              <div className="flex items-start">
                <ExclamationTriangleIcon className="h-6 w-6 text-red-600 mr-3 mt-0.5" />
                <div className="flex-1">
                  <h3 className="text-lg font-medium text-red-900 mb-2">
                    {formatarMotivoErro(status || '', statusDetail || '')}
                  </h3>
                  <p className="text-red-700 mb-4">
                    {obterSugestao(status || '', statusDetail || '')}
                  </p>
                  
                  {/* Informações técnicas */}
                  {(paymentId || status || statusDetail) && (
                    <div className="bg-red-100 rounded-lg p-4 mt-4">
                      <h4 className="font-medium text-red-900 mb-2">Informações Técnicas:</h4>
                      <div className="text-sm text-red-800 space-y-1">
                        {paymentId && (
                          <div>
                            <strong>ID do Pagamento:</strong> {paymentId}
                          </div>
                        )}
                        {status && (
                          <div>
                            <strong>Status:</strong> {status}
                          </div>
                        )}
                        {statusDetail && (
                          <div>
                            <strong>Detalhe:</strong> {statusDetail}
                          </div>
                        )}
                        {externalReference && (
                          <div>
                            <strong>Pedido:</strong> {externalReference.substring(0, 12)}...
                          </div>
                        )}
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>

          {/* Motivos Comuns */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-4">
              Motivos Mais Comuns
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                <div className="flex items-center mb-2">
                  <CreditCardIcon className="h-5 w-5 text-yellow-600 mr-2" />
                  <h3 className="font-medium text-yellow-900">Dados do Cartão</h3>
                </div>
                <ul className="text-sm text-yellow-800 space-y-1">
                  <li>• Número do cartão incorreto</li>
                  <li>• Data de vencimento inválida</li>
                  <li>• Código CVV incorreto</li>
                </ul>
              </div>

              <div className="bg-orange-50 border border-orange-200 rounded-lg p-4">
                <div className="flex items-center mb-2">
                  <ExclamationTriangleIcon className="h-5 w-5 text-orange-600 mr-2" />
                  <h3 className="font-medium text-orange-900">Limite e Saldo</h3>
                </div>
                <ul className="text-sm text-orange-800 space-y-1">
                  <li>• Saldo insuficiente</li>
                  <li>• Limite do cartão excedido</li>
                  <li>• Cartão vencido ou bloqueado</li>
                </ul>
              </div>

              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <div className="flex items-center mb-2">
                  <ArrowPathIcon className="h-5 w-5 text-blue-600 mr-2" />
                  <h3 className="font-medium text-blue-900">Segurança</h3>
                </div>
                <ul className="text-sm text-blue-800 space-y-1">
                  <li>• Transação suspeita detectada</li>
                  <li>• Autorização necessária</li>
                  <li>• Muitas tentativas realizadas</li>
                </ul>
              </div>

              <div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
                <div className="flex items-center mb-2">
                  <XCircleIcon className="h-5 w-5 text-purple-600 mr-2" />
                  <h3 className="font-medium text-purple-900">Banco Emissor</h3>
                </div>
                <ul className="text-sm text-purple-800 space-y-1">
                  <li>• Recusa do banco emissor</li>
                  <li>• Operadora indisponível</li>
                  <li>• Problemas de comunicação</li>
                </ul>
              </div>
            </div>
          </div>

          {/* Alternativas de Pagamento */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-4">
              O que fazer agora?
            </h2>
            <div className="bg-gray-50 rounded-lg p-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <h3 className="font-medium text-gray-900 mb-3">
                    ✅ Verificações Rápidas
                  </h3>
                  <ul className="text-sm text-gray-700 space-y-2">
                    <li>• Confirme os dados do cartão</li>
                    <li>• Verifique o saldo disponível</li>
                    <li>• Tente com outro cartão</li>
                    <li>• Use PIX como alternativa</li>
                  </ul>
                </div>

                <div>
                  <h3 className="font-medium text-gray-900 mb-3">
                    📞 Precisa de Ajuda?
                  </h3>
                  <ul className="text-sm text-gray-700 space-y-2">
                    <li>• Entre em contato com seu banco</li>
                    <li>• Fale com nosso suporte</li>
                    <li>• Aguarde alguns minutos e tente novamente</li>
                    <li>• Use dispositivo ou navegador diferente</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          {/* Ações */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button
              onClick={voltarParaCheckout}
              className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium flex items-center justify-center"
            >
              <ArrowPathIcon className="h-5 w-5 mr-2" />
              Tentar Novamente
            </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 flex items-center justify-center"
            >
              <ArrowLeftIcon className="h-5 w-5 mr-2" />
              Voltar às Compras
            </button>

            {externalReference && (
              <button
                onClick={() => router.push(`/checkout?pedido=${externalReference}`)}
                className="px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium"
              >
                Escolher Outro Método
              </button>
            )}
          </div>

          {/* Informações de Suporte */}
          <div className="mt-8 pt-6 border-t border-gray-200">
            <div className="text-center">
              <p className="text-sm text-gray-600 mb-2">
                Ainda com problemas? Entre em contato conosco
              </p>
              <div className="flex flex-wrap justify-center gap-4 text-sm">
                <span className="text-blue-600">📧 suporte@saveinmed.com.br</span>
                <span className="text-blue-600">📱 (11) 9999-9999</span>
                <span className="text-blue-600">💬 Chat online</span>
              </div>
            </div>
          </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-red-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 PagamentoErroPage = () => {
  return (
    <Suspense fallback={<LoadingFallback />}>
      <PagamentoErroContent />
    </Suspense>
  )
}

export default PagamentoErroPage