'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 { initMercadoPago, Wallet } from '@mercadopago/sdk-react'
import { 
  CheckCircleIcon,
  XMarkIcon,
  ArrowLeftIcon,
  CreditCardIcon
} from '@heroicons/react/24/outline'

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

interface DadosCheckout {
  itens: any[]
  valorTotal: number
  metodoPagamento: string
  usuario: { email: string }
  pedidoId: string
  faturaId?: string
}

const MercadoPagoContent = () => {
  const router = useRouter()
  const searchParams = useSearchParams()
  const carrinho = useCarrinho()
  
  const [user, setUser] = useState<{ email: string } | null>(null)
  const [loading, setLoading] = useState(true)
  const [dadosCheckout, setDadosCheckout] = useState<DadosCheckout | null>(null)
  const [processandoPagamento, setProcessandoPagamento] = useState(false)
  const [preferenceId, setPreferenceId] = useState<string | null>(null)

  // Parâmetros da URL
  const metodo = searchParams.get('metodo')
  const valor = searchParams.get('valor')
  const pedidoId = searchParams.get('pedido')
  const faturaId = searchParams.get('fatura')

  // Inicializar MercadoPago SDK
  useEffect(() => {
    const publicKey = process.env.NEXT_PUBLIC_MERCADO_PAGO_PUBLIC_KEY
    if (publicKey) {
      initMercadoPago(publicKey, {
        locale: 'pt-BR'
      })
    }
  }, [])

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

        // Recuperar dados do checkout do localStorage
        const dadosStorados = localStorage.getItem('dadosCheckout')
        if (dadosStorados) {
          const dados = JSON.parse(dadosStorados) as DadosCheckout
          setDadosCheckout(dados)
        } else {
          toast.error('Dados do checkout não encontrados')
          router.push('/checkout')
          return
        }
      } catch (error) {
        console.error('Erro ao verificar autenticação:', error)
        router.push('/')
      } finally {
        setLoading(false)
      }
    }

    initializeUser()
  }, [router])

  const criarPreferenciaMercadoPago = async () => {
    if (!dadosCheckout || !pedidoId) {
      toast.error('Dados insuficientes para criar pagamento')
      return
    }

    setProcessandoPagamento(true)

    try {
      // Preparar itens para o MercadoPago
      const items = dadosCheckout.itens.map(item => {
        const preco = item.produto['preco-atual'] ||
                     item.produto['preco-original'] ||
                     item.produto.precos?.[0]?.preco || 
                     item.produto['preco-unitario'] || 
                     item.produto['preco-fabrica'] || 
                     item.produto.pmc || 
                     0;

        return {
          title: item.produto.nome || item.produto.descricao || 'Produto',
          description: item.produto['catalogo-produtos']?.descricao || item.produto.descricao || '',
          quantity: item.quantidade,
          unit_price: preco,
          currency_id: 'BRL'
        }
      })

      // Dados da preferência
      const preferenceData = {
        items,
        payer: {
          name: 'Cliente',
          email: user?.email || 'cliente@exemplo.com',
        },
        back_urls: {
          success: `${window.location.origin}/pagamento/mercadopago/sucesso?pedido=${pedidoId}`,
          failure: `${window.location.origin}/pagamento/mercadopago/falha?pedido=${pedidoId}`,
          pending: `${window.location.origin}/pagamento/mercadopago/pendente?pedido=${pedidoId}`
        },
        auto_return: 'approved',
        external_reference: pedidoId,
        notification_url: `${window.location.origin}/api/webhook/mercadopago`,
        statement_descriptor: 'SaveInMed',
        expires: true,
        expiration_date_from: new Date().toISOString(),
        expiration_date_to: new Date(Date.now() + 30 * 60 * 1000).toISOString() // 30 minutos
      }

      // Chamar API para criar preferência no MercadoPago
      const response = await fetch('/api/mercadopago/criar-preferencia', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(preferenceData)
      })

      const result = await response.json()

      if (!response.ok) {
        throw new Error(result.error || 'Erro ao criar preferência de pagamento')
      }

      // Definir o preference ID para usar com o Wallet
      if (result.id) {
        setPreferenceId(result.id)
        toast.success('Preferência de pagamento criada com sucesso!')
      } else {
        throw new Error('ID da preferência não retornado')
      }

    } catch (error) {
      console.error('Erro ao criar preferência MercadoPago:', error)
      toast.error('Erro ao processar pagamento. Tente novamente.')
    } finally {
      setProcessandoPagamento(false)
    }
  }

  const obterPreco = (produto: any) => {
    return produto['preco-atual'] ||
           produto['preco-original'] ||
           produto.precos?.[0]?.preco || 
           produto['preco-unitario'] || 
           produto['preco-fabrica'] || 
           produto.pmc || 
           0;
  };

  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 || !dadosCheckout) {
    return null
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <Header user={user} title="Pagamento MercadoPago" subtitle="Finalize sua compra com segurança" showBackButton />
      
      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Botão Voltar */}
        <div className="mb-6">
          <button
            onClick={() => router.push('/checkout')}
            className="flex items-center text-gray-600 hover:text-gray-900 transition-colors"
          >
            <ArrowLeftIcon className="w-5 h-5 mr-2" />
            Voltar ao checkout
          </button>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Resumo do Pedido */}
          <div className="lg:col-span-1">
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Resumo do Pedido</h2>
              
              <div className="space-y-3 mb-4">
                {dadosCheckout.itens.map((item) => {
                  const preco = obterPreco(item.produto);
                  return (
                    <div key={item.produto.$id} className="bg-gray-50 rounded-lg p-3 border border-gray-100">
                      <div className="flex justify-between items-start mb-2">
                        <div className="flex-1">
                          <h4 className="text-sm font-medium text-gray-900 mb-1">
                            {item.produto.nome
                              || item.produto['catalogo-produtos']?.descricao
                              || item.produto.descricao
                              || item.produto['catalogo-produtos']?.nome
                              || 'Produto'}
                          </h4>
                          
                          {/* Código interno */}
                          {(item.produto.codigo || item.produto['catalogo-produtos']?.['codigo-interno'] || item.produto['codigo-interno']) && (
                            <p className="text-xs text-gray-700 mb-1">
                              Código: {item.produto.codigo || item.produto['catalogo-produtos']?.['codigo-interno'] || item.produto['codigo-interno']}
                            </p>
                          )}
                          
                          <p className="text-xs text-gray-700">Qtd: {item.quantidade}</p>
                        </div>
                        <div className="text-right">
                          <span className="text-sm font-medium text-gray-900">
                            R$ {(preco * item.quantidade).toFixed(2).replace('.', ',')}
                          </span>
                          <p className="text-xs text-gray-700">
                            R$ {preco.toFixed(2).replace('.', ',')} cada
                          </p>
                        </div>
                      </div>
                    </div>
                  )
                })}
              </div>
              
              <div className="border-t pt-4 space-y-2">
                <div className="flex justify-between text-lg font-semibold text-gray-900">
                  <span>Total:</span>
                  <span className="text-green-600">
                    R$ {dadosCheckout.valorTotal.toFixed(2).replace('.', ',')}
                  </span>
                </div>
              </div>
            </div>
          </div>

          {/* Área de Pagamento */}
          <div className="lg:col-span-2">
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="text-center mb-8">
                <div className="w-20 h-20 mx-auto mb-4 bg-blue-100 rounded-full flex items-center justify-center">
                  <CreditCardIcon className="w-10 h-10 text-blue-600" />
                </div>
                <h2 className="text-2xl font-semibold text-gray-900 mb-2">Pagar com MercadoPago</h2>
                <p className="text-gray-600">
                  Você será redirecionado para o ambiente seguro do MercadoPago para finalizar sua compra
                </p>
              </div>

              {/* Informações do Pedido */}
              <div className="bg-gray-50 rounded-lg p-4 mb-6">
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <span className="text-gray-600">Pedido:</span>
                    <span className="ml-2 font-medium">#{pedidoId?.slice(-8)}</span>
                  </div>
                  <div>
                    <span className="text-gray-600">Valor:</span>
                    <span className="ml-2 font-medium text-green-600">
                      R$ {dadosCheckout.valorTotal.toFixed(2).replace('.', ',')}
                    </span>
                  </div>
                </div>
              </div>

              {/* Métodos aceitos pelo MercadoPago */}
              <div className="mb-6">
                <h3 className="text-sm font-medium text-gray-900 mb-3">Métodos de pagamento aceitos:</h3>
                <div className="grid grid-cols-2 gap-3 text-xs">
                  <div className="flex items-center">
                    <CheckCircleIcon className="w-4 h-4 text-green-500 mr-2" />
                    <span>Cartão de crédito</span>
                  </div>
                  <div className="flex items-center">
                    <CheckCircleIcon className="w-4 h-4 text-green-500 mr-2" />
                    <span>Cartão de débito</span>
                  </div>
                  <div className="flex items-center">
                    <CheckCircleIcon className="w-4 h-4 text-green-500 mr-2" />
                    <span>PIX</span>
                  </div>
                </div>
              </div>

              {/* Botão de Pagamento ou Wallet do MercadoPago */}
              <div className="space-y-4">
                {!preferenceId ? (
                  <button
                    type="button"
                    onClick={criarPreferenciaMercadoPago}
                    disabled={processandoPagamento}
                    className={`w-full py-4 px-6 rounded-lg font-medium transition-colors ${
                      processandoPagamento
                        ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
                        : 'bg-blue-600 text-white hover:bg-blue-700'
                    }`}
                  >
                    {processandoPagamento ? (
                      <div className="flex items-center justify-center">
                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-3"></div>
                        Processando...
                      </div>
                    ) : (
                      'Continuar com MercadoPago'
                    )}
                  </button>
                ) : (
                  <div className="space-y-4">
                    <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                      <div className="flex items-center">
                        <CheckCircleIcon className="w-5 h-5 text-green-500 mr-2" />
                        <span className="text-green-700 font-medium">Pagamento pronto!</span>
                      </div>
                      <p className="text-green-600 text-sm mt-1">
                        Escolha sua forma de pagamento abaixo
                      </p>
                    </div>
                    
                    <Wallet 
                      initialization={{ 
                        redirectMode: 'self'
                      }}
                      customization={{}}
                      onSubmit={async () => {
                        console.log('Pagamento iniciado')
                        toast.success('Redirecionando para pagamento...')
                        return Promise.resolve()
                      }}
                      onReady={() => {
                        console.log('Wallet pronto')
                      }}
                      onError={(error) => {
                        console.error('Erro no Wallet:', error)
                        toast.error('Erro ao carregar opções de pagamento')
                      }}
                    />
                  </div>
                )}

                <p className="text-xs text-gray-500 text-center">
                  {!preferenceId 
                    ? 'Ao continuar, você será redirecionado para o ambiente seguro do MercadoPago. Seus dados estão protegidos.'
                    : 'Escolha sua forma de pagamento preferida. Transação 100% segura.'
                  }
                </p>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}

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

export default MercadoPagoPagamento
