'use client'

import { useState, useEffect, Suspense, useRef } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { toast } from 'react-hot-toast'
import { Models } from 'appwrite'
import {
  ClockIcon,
  DocumentTextIcon,
  HomeIcon,
  CheckCircleIcon,
  XCircleIcon
} from '@heroicons/react/24/outline'

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

interface PaymentStatus {
  has_payment: boolean
  latest_payment?: {
    id: number
    status: string
    transaction_amount: number
    payment_method_id: string
    external_reference: string
    point_of_interaction?: {
      transaction_data?: {
        qr_code?: string
        qr_code_base64?: string
      }
    }
  }
  is_approved: boolean
  status: string
  count: number
}

const PendenteContent = () => {
  const router = useRouter()
  const searchParams = useSearchParams()

  const [user, setUser] = useState<{ email: string } | null>(null)
  const [loading, setLoading] = useState(true)
  const [paymentStatus, setPaymentStatus] = useState<PaymentStatus | null>(null)
  const [checkCount, setCheckCount] = useState(0)
  const [isChecking, setIsChecking] = useState(false)
  const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null)
  const maxChecks = 60 // Máximo de 60 verificações (5 minutos se verificar a cada 5 segundos)

  const pedidoId = searchParams.get('pedido')
  const externalReference = searchParams.get('ref') || searchParams.get('external_reference') || pedidoId // Usar 'ref', 'external_reference' ou 'pedido' como fallback
  const paymentId = searchParams.get('payment_id')
  const status = searchParams.get('status')

  // Função para verificar status do pagamento
  const verificarStatusPagamento = async () => {
    if (!externalReference || isChecking) return

    try {
      setIsChecking(true)
      console.log('🔍 Verificando status do pagamento para referência:', externalReference)

      const response = await mercadoPagoService.verificarStatusPorReferencia(externalReference)

      if (response.success && response.data) {
        const data = response.data as PaymentStatus
        setPaymentStatus(data)
        setCheckCount(prev => {
          const newCount = prev + 1
          console.log('📊 Status do pagamento:', {
            has_payment: data.has_payment,
            is_approved: data.is_approved,
            status: data.status,
            checkCount: newCount
          })

          // Se o pagamento foi aprovado, parar polling e redirecionar
          if (data.is_approved && data.latest_payment) {
            console.log('✅ Pagamento aprovado! Redirecionando...')

            // Parar polling
            if (pollingIntervalRef.current) {
              clearInterval(pollingIntervalRef.current)
              pollingIntervalRef.current = null
            }

            toast.success('✅ Pagamento aprovado! Redirecionando...', {
              icon: '✅',
              duration: 3000
            })

            // Montar URL com os parâmetros corretos que a página de sucesso espera
            const paymentId = data.latest_payment.id
            const params = new URLSearchParams({
              external_reference: externalReference,
              status: 'approved'
            })

            // Adicionar payment_id se disponível
            if (paymentId) {
              params.append('payment_id', paymentId.toString())
            }

            // Redirecionar após 2 segundos com os parâmetros corretos
            setTimeout(() => {
              router.push(`/pagamento/sucesso?${params.toString()}`)
            }, 2000)
          } else if (data.latest_payment && (data.latest_payment.status === 'rejected' || data.latest_payment.status === 'cancelled')) {
            // Pagamento rejeitado ou cancelado
            console.log('❌ Pagamento rejeitado ou cancelado')

            // Parar polling
            if (pollingIntervalRef.current) {
              clearInterval(pollingIntervalRef.current)
              pollingIntervalRef.current = null
            }

            toast.error('Pagamento não foi aprovado. Por favor, tente novamente.', {
              icon: '❌',
              duration: 5000
            })
          }

          // Parar polling se atingiu o máximo
          if (newCount >= maxChecks && pollingIntervalRef.current) {
            clearInterval(pollingIntervalRef.current)
            pollingIntervalRef.current = null
            toast('Polling automático parado. Use o botão para verificar manualmente.', {
              icon: '⏸️',
              duration: 4000
            })
          }

          return newCount
        })
      } else {
        console.error('❌ Erro ao verificar status:', response.error)
        // Mostrar toast de erro apenas se não for o primeiro check (para evitar spam)
        if (checkCount > 0) {
          toast.error(response.error || 'Erro ao verificar status do pagamento', {
            icon: '❌',
            duration: 4000
          })
        }
      }
    } catch (error) {
      console.error('💥 Erro ao verificar status do pagamento:', error)
    } finally {
      setIsChecking(false)
    }
  }

  // Iniciar polling automático
  const iniciarPolling = () => {
    // Garantir que não existe polling anterior rodando
    pararPolling()

    // Verificar imediatamente
    verificarStatusPagamento()

    // Depois verificar a cada 5 segundos
    pollingIntervalRef.current = setInterval(() => {
      verificarStatusPagamento()
    }, 5000)
  }

  // Parar polling
  const pararPolling = () => {
    if (pollingIntervalRef.current) {
      clearInterval(pollingIntervalRef.current)
      pollingIntervalRef.current = null
    }
  }

  useEffect(() => {
    const initializeUser = async () => {
      try {
        const currentUser = await getCurrentUserWithRetry()
        if (!currentUser) {
          router.push('/')
          return
        }
        setUser(currentUser as { email: string })

        toast('Pagamento pendente. Aguardando confirmação.', {
          icon: '⏳',
          duration: 4000
        })

        // Iniciar polling se houver external_reference
        if (externalReference) {
          iniciarPolling()
        }

      } catch (error) {
        console.error('Erro ao verificar autenticação:', error)
        router.push('/')
      } finally {
        setLoading(false)
      }
    }

    initializeUser()

    // Se houver status na URL, definir estado inicial
    if (status && (status === 'rejected' || status === 'cancelled')) {
      setPaymentStatus({
        has_payment: true,
        is_approved: false,
        status: status,
        count: 0,
        latest_payment: {
          id: Number(paymentId || 0),
          status: status,
          transaction_amount: 0, // Valor desconhecido inicialmente
          payment_method_id: 'credit_card', // Supor cartão
          external_reference: externalReference || ''
        }
      })
    } else if (externalReference) {
      // Iniciar polling apenas se não for rejeitado explicitamente na URL
      iniciarPolling()
    }

    // Limpar polling ao desmontar componente
    return () => {
      pararPolling()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [router, externalReference, status])

  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
  }

  // Determinar classe e ícone baseado no status
  const getStatusCardClass = () => {
    if (paymentStatus?.is_approved) {
      return 'border-green-500 bg-green-50'
    }
    if (paymentStatus?.latest_payment?.status === 'rejected' || paymentStatus?.latest_payment?.status === 'cancelled') {
      return 'border-red-500 bg-red-50'
    }
    return 'border-yellow-500 bg-yellow-50'
  }

  const getStatusIcon = () => {
    if (paymentStatus?.is_approved) {
      return <CheckCircleIcon className="w-12 h-12 text-green-600" />
    }
    if (paymentStatus?.latest_payment?.status === 'rejected' || paymentStatus?.latest_payment?.status === 'cancelled') {
      return <XCircleIcon className="w-12 h-12 text-red-600" />
    }
    return <ClockIcon className="w-12 h-12 text-yellow-600 animate-pulse" />
  }

  const getStatusTitle = () => {
    if (paymentStatus?.is_approved) {
      return '✅ Pagamento Aprovado!'
    }
    if (paymentStatus?.latest_payment?.status === 'rejected') {
      return '❌ Pagamento Rejeitado'
    }
    if (paymentStatus?.latest_payment?.status === 'cancelled') {
      return '❌ Pagamento Cancelado'
    }
    if (paymentStatus?.has_payment && paymentStatus?.latest_payment?.status === 'pending') {
      return '⏳ Pagamento Pendente'
    }
    return '⏳ Aguardando Pagamento'
  }

  const getStatusMessage = () => {
    if (paymentStatus?.is_approved) {
      return 'Seu pagamento foi confirmado com sucesso! Redirecionando...'
    }
    if (paymentStatus?.latest_payment?.status === 'rejected' || paymentStatus?.latest_payment?.status === 'cancelled') {
      return `Status: ${paymentStatus.latest_payment?.status}. Por favor, tente novamente.`
    }
    if (paymentStatus?.has_payment && paymentStatus?.latest_payment?.status === 'pending') {
      return 'Aguardando confirmação do banco. Isso pode levar alguns segundos.'
    }
    if (!paymentStatus?.has_payment) {
      return 'O pagamento ainda não foi registrado. Aguarde alguns instantes.'
    }
    return 'Por favor, aguarde enquanto verificamos o status do seu pagamento.'
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <Header user={user} title="Verificando Pagamento" subtitle="Aguardando confirmação do 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-2 ${getStatusCardClass()} p-8 text-center`}>
          {/* Ícone de Status */}
          <div className={`w-24 h-24 mx-auto mb-6 rounded-full flex items-center justify-center ${paymentStatus?.is_approved ? 'bg-green-100' :
            paymentStatus?.latest_payment?.status === 'rejected' || paymentStatus?.latest_payment?.status === 'cancelled' ? 'bg-red-100' :
              'bg-yellow-100'
            }`}>
            {getStatusIcon()}
          </div>

          {/* Spinner de carregamento */}
          {isChecking && !paymentStatus?.is_approved && (
            <div className="mb-4">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
            </div>
          )}

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

          {/* Descrição */}
          <p className="text-lg text-gray-600 mb-6">
            {getStatusMessage()}
          </p>

          {/* Informações do Pagamento */}
          {paymentStatus && (
            <div className="bg-white rounded-lg p-4 mb-8 border border-gray-200">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                {externalReference && (
                  <div>
                    <span className="text-gray-600">Referência do pedido:</span>
                    <div className="font-medium text-gray-900">#{externalReference.slice(-8)}</div>
                  </div>
                )}
                {paymentStatus.latest_payment?.id && (
                  <div>
                    <span className="text-gray-600">ID do pagamento:</span>
                    <div className="font-medium text-gray-900">#{paymentStatus.latest_payment.id}</div>
                  </div>
                )}
                {paymentStatus.latest_payment?.transaction_amount && (
                  <div>
                    <span className="text-gray-600">Valor:</span>
                    <div className="font-medium text-green-600">
                      R$ {paymentStatus.latest_payment.transaction_amount.toFixed(2)}
                    </div>
                  </div>
                )}
                {paymentStatus.latest_payment?.payment_method_id && (
                  <div>
                    <span className="text-gray-600">Método:</span>
                    <div className="font-medium text-gray-900 uppercase">
                      {paymentStatus.latest_payment.payment_method_id}
                    </div>
                  </div>
                )}
                <div>
                  <span className="text-gray-600">Status:</span>
                  <div className={`font-medium ${paymentStatus.is_approved ? 'text-green-600' :
                    paymentStatus.latest_payment?.status === 'rejected' || paymentStatus.latest_payment?.status === 'cancelled' ? 'text-red-600' :
                      'text-yellow-600'
                    }`}>
                    {paymentStatus.status || paymentStatus.latest_payment?.status || 'Pendente'}
                  </div>
                </div>
                <div>
                  <span className="text-gray-600">Verificações:</span>
                  <div className="font-medium text-gray-900">
                    {checkCount}/{maxChecks}
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Informações do Pedido (fallback quando não há status) */}
          {!paymentStatus && (
            <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">
                {externalReference && (
                  <div>
                    <span className="text-gray-600">Número do pedido:</span>
                    <div className="font-medium text-gray-900">#{externalReference.slice(-8)}</div>
                  </div>
                )}
                {paymentId && (
                  <div>
                    <span className="text-gray-600">ID do pagamento:</span>
                    <div className="font-medium text-gray-900">#{paymentId}</div>
                  </div>
                )}
                <div>
                  <span className="text-gray-600">Status:</span>
                  <div className="font-medium text-yellow-600">Pendente</div>
                </div>
                <div>
                  <span className="text-gray-600">Data:</span>
                  <div className="font-medium text-gray-900">{new Date().toLocaleDateString('pt-BR')}</div>
                </div>
              </div>
            </div>
          )}

          {/* Pix QR Code Display */}
          {paymentStatus?.latest_payment?.payment_method_id === 'pix' &&
            paymentStatus?.latest_payment?.status === 'pending' &&
            paymentStatus?.latest_payment?.point_of_interaction?.transaction_data && (
              <div className="mb-8 p-6 bg-white border-2 border-blue-100 rounded-xl shadow-sm">
                <h3 className="text-lg font-semibold text-gray-900 mb-4">Escaneie o QR Code para pagar</h3>

                {/* QR Code Image */}
                {paymentStatus.latest_payment.point_of_interaction.transaction_data.qr_code_base64 && (
                  <div className="flex justify-center mb-6">
                    <img
                      src={`data:image/png;base64,${paymentStatus.latest_payment.point_of_interaction.transaction_data.qr_code_base64}`}
                      alt="QR Code Pix"
                      className="w-64 h-64 object-contain border border-gray-200 rounded-lg"
                    />
                  </div>
                )}

                {/* Copy and Paste Code */}
                {paymentStatus.latest_payment.point_of_interaction.transaction_data.qr_code && (
                  <div className="space-y-3">
                    <p className="text-sm text-gray-600">Ou copie e cole o código abaixo:</p>
                    <div className="flex items-center gap-2">
                      <input
                        type="text"
                        readOnly
                        value={paymentStatus.latest_payment.point_of_interaction.transaction_data.qr_code}
                        className="flex-1 p-3 bg-gray-50 border border-gray-200 rounded-lg text-xs font-mono text-gray-600 break-all"
                      />
                      <button
                        onClick={() => {
                          navigator.clipboard.writeText(paymentStatus.latest_payment!.point_of_interaction!.transaction_data!.qr_code!)
                          toast.success('Código Pix copiado!', { icon: '📋' })
                        }}
                        className="p-3 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors"
                        title="Copiar código"
                      >
                        <DocumentTextIcon className="w-5 h-5" />
                      </button>
                    </div>
                    <button
                      onClick={() => {
                        navigator.clipboard.writeText(paymentStatus.latest_payment!.point_of_interaction!.transaction_data!.qr_code!)
                        toast.success('Código Pix copiado!', { icon: '📋' })
                      }}
                      className="w-full py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center gap-2"
                    >
                      <DocumentTextIcon className="w-5 h-5" />
                      Copiar Código Pix
                    </button>
                  </div>
                )}
              </div>
            )}

          {/* Informações sobre Pagamentos Pendentes */}
          {!paymentStatus?.is_approved && (
            <div className="text-left mb-8">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">O que acontece agora?</h3>
              <ul className="space-y-2 text-gray-600">
                <li className="flex items-start">
                  <span className="inline-block w-2 h-2 bg-yellow-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                  Se você pagou com PIX, a confirmação pode levar alguns minutos
                </li>
                <li className="flex items-start">
                  <span className="inline-block w-2 h-2 bg-yellow-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                  Esta página verifica automaticamente o status a cada 5 segundos
                </li>
                <li className="flex items-start">
                  <span className="inline-block w-2 h-2 bg-yellow-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                  Você receberá um e-mail assim que o pagamento for confirmado
                </li>
                <li className="flex items-start">
                  <span className="inline-block w-2 h-2 bg-yellow-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                  Você pode acompanhar o status na seção "Meus Pedidos"
                </li>
              </ul>
            </div>
          )}

          {/* Alerta importante */}
          {!paymentStatus?.is_approved && (
            <div className="mb-8 p-4 bg-blue-50 border border-blue-200 rounded-lg">
              <p className="text-sm text-blue-800">
                <strong>Importante:</strong> Não feche esta página se você ainda não finalizou o pagamento.
                Para pagamentos via PIX, retorne ao MercadoPago para completar a transação.
              </p>
            </div>
          )}

          {/* Botões de Ação */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            {!paymentStatus?.is_approved && (
              <>
                {(paymentStatus?.latest_payment?.status === 'rejected' || paymentStatus?.latest_payment?.status === 'cancelled' || status === 'rejected' || status === 'cancelled') ? (
                  <button
                    onClick={() => router.push(`/checkout?pedido=${externalReference}`)}
                    className="flex items-center justify-center px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
                  >
                    <XCircleIcon className="w-5 h-5 mr-2" />
                    Tentar Novamente
                  </button>
                ) : (
                  <button
                    onClick={verificarStatusPagamento}
                    disabled={isChecking || !externalReference}
                    className="flex items-center justify-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed"
                  >
                    {isChecking ? (
                      <>
                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
                        Verificando...
                      </>
                    ) : (
                      <>
                        <ClockIcon className="w-5 h-5 mr-2" />
                        Verificar Agora
                      </>
                    )}
                  </button>
                )}
              </>
            )}

            <button
              onClick={() => router.push('/meus-pedidos')}
              className="flex items-center justify-center px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
            >
              <DocumentTextIcon className="w-5 h-5 mr-2" />
              Acompanhar Pedido
            </button>

            <button
              onClick={() => router.push('/produtos')}
              className="flex items-center justify-center px-6 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors"
            >
              <HomeIcon className="w-5 h-5 mr-2" />
              Continuar Comprando
            </button>
          </div>
        </div>
      </main>
    </div>
  )
}

const PendentePagamento = () => {
  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>
    }>
      <PendenteContent />
    </Suspense>
  )
}

export default PendentePagamento
