'use client'

import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { toast } from 'react-hot-toast'
import Header from '@/components/Header'
import { useCarrinho } from '@/contexts/CarrinhoContext'
import { enderecoService } from '@/services/enderecoService'
import { pedidoApiService } from '@/services/pedidoApiService'
import { catalogoProdutoService } from '@/services/catalogoProdutoService'
import { produtosVendaService } from '@/services/produtosVendaService'
import { mercadoPagoService } from '@/services/mercadoPagoService'
import { pagamentoApiService } from '@/services/pagamentoApiService'
import MercadoPagoPaymentBrick from '@/components/MercadoPagoPaymentBrick'
import { faturaApiService } from '@/services/faturaApiService'
import { entregasApiService } from '@/services/entregasApiService'
import {
  CheckCircleIcon,
  ArrowLeftIcon,
  ShoppingCartIcon,
  UserIcon,
  MapPinIcon,
  CreditCardIcon,
  ClockIcon,
  TruckIcon,
  DocumentTextIcon
} from '@heroicons/react/24/outline'

interface DadosEntrega {
  nome: string;
  telefone: string;
  endereco: string;
  cidade: string;
  estado: string;
  cep: string;
  complemento?: string;
  email: string;
}

interface DadosPagamento {
  metodo: 'mercadopago';
}

interface OpcaoFrete {
  tipoFrete: string;
  valor: number;
  prazo?: string;
  raioEntregaKm?: number;
  taxaEntrega?: number;
  valorFreteKm?: number;
}

const CheckoutPage = () => {
  const router = useRouter()
  const { itens, valorTotal, limparCarrinho } = useCarrinho()
  const [user, setUser] = useState<any>(null)
  const [etapaAtual, setEtapaAtual] = useState(1)
  const [processandoPedido, setProcessandoPedido] = useState(false)
  const [pedidoId, setPedidoId] = useState<string | null>(null)
  const [dadosPedido, setDadosPedido] = useState<any>(null)
  const [carregandoPedido, setCarregandoPedido] = useState(false)
  const [produtosPedido, setProdutosPedido] = useState<any[]>([])
  const [carregandoProdutos, setCarregandoProdutos] = useState(false)
  const [pagamentoId, setPagamentoId] = useState<string | null>(null)
  const [processandoPagamento, setProcessandoPagamento] = useState(false)
  const [faturaId, setFaturaId] = useState<string | null>(null)
  const [processandoFatura, setProcessandoFatura] = useState(false)
  const [processandoEstoque, setProcessandoEstoque] = useState(false)
  const [estoqueAjustado, setEstoqueAjustado] = useState(false)
  const [processandoEntrega, setProcessandoEntrega] = useState(false)
  const [entregaId, setEntregaId] = useState<string | null>(null)
  const [dadosCarrinhoAtualizados, setDadosCarrinhoAtualizados] = useState(false)
  const [processandoMercadoPago, setProcessandoMercadoPago] = useState(false)

  // Estados para frete
  const [opcoesFrete, setOpcoesFrete] = useState<OpcaoFrete[]>([])
  const [dadosFrete, setDadosFrete] = useState<OpcaoFrete | null>(null)
  const [carregandoFrete, setCarregandoFrete] = useState(false)
  const [erroFrete, setErroFrete] = useState<string | null>(null)

  // Estados para os dados do checkout
  const [dadosEntrega, setDadosEntrega] = useState({
    nome: '',
    endereco: '',
    numero: '',
    bairro: '',
    cidade: '',
    estado: '',
    cep: '',
    complemento: '',
    telefone: '',
    email: ''
  })

  // Efeito para carregar dados do localStorage ao iniciar
  useEffect(() => {
    const dadosSalvos = localStorage.getItem('checkout_dados_entrega');
    const freteSalvo = localStorage.getItem('checkout_dados_frete');

    if (dadosSalvos) {
      try {
        setDadosEntrega(JSON.parse(dadosSalvos));
      } catch (e) {
        console.error('Erro ao carregar dados de entrega do cache', e);
      }
    }

    if (freteSalvo) {
      try {
        setDadosFrete(JSON.parse(freteSalvo));
      } catch (e) {
        console.error('Erro ao carregar dados de frete do cache', e);
      }
    }
  }, []);

  // Efeito para salvar dados no localStorage sempre que mudarem
  useEffect(() => {
    if (dadosEntrega.cep) { // Só salva se tiver pelo menos CEP
      localStorage.setItem('checkout_dados_entrega', JSON.stringify(dadosEntrega));
    }
  }, [dadosEntrega]);

  useEffect(() => {
    if (dadosFrete) {
      localStorage.setItem('checkout_dados_frete', JSON.stringify(dadosFrete));
    }
  }, [dadosFrete]);

  const [dadosPagamento, setDadosPagamento] = useState<DadosPagamento>({
    metodo: 'mercadopago'
  })

  // Mapa de estados para conversão
  const estadoParaSigla: { [key: string]: string } = {
    'São Paulo': 'SP',
    'Rio de Janeiro': 'RJ',
    'Minas Gerais': 'MG',
    'Bahia': 'BA',
    'Paraná': 'PR',
    'Rio Grande do Sul': 'RS',
    'Pernambuco': 'PE',
    'Ceará': 'CE',
    'Pará': 'PA',
    'Santa Catarina': 'SC',
    'Goiás': 'GO',
    'Maranhão': 'MA',
    'Paraíba': 'PB',
    'Amazonas': 'AM',
    'Espírito Santo': 'ES',
    'Mato Grosso': 'MT',
    'Rio Grande do Norte': 'RN',
    'Piauí': 'PI',
    'Alagoas': 'AL',
    'Distrito Federal': 'DF',
    'Mato Grosso do Sul': 'MS',
    'Sergipe': 'SE',
    'Rondônia': 'RO',
    'Tocantins': 'TO',
    'Acre': 'AC',
    'Amapá': 'AP',
    'Roraima': 'RR'
  }

  // Função para converter nome do estado para sigla
  const converterEstadoParaSigla = (estado: string): string => {
    // Se já é uma sigla (2 caracteres), retorna como está
    if (estado && estado.length === 2) {
      return estado.toUpperCase()
    }
    // Se é nome completo, converte para sigla
    return estadoParaSigla[estado] || estado
  }

  // Carregar usuário e endereço
  useEffect(() => {

    const carregarUsuario = async () => {
      try {
        const userStorage = localStorage.getItem('user')
        const token = localStorage.getItem('access_token')
        const enderecoIdStorage = localStorage.getItem('user_endereco_id')

        if (userStorage) {
          const userData = JSON.parse(userStorage)
          setUser(userData)

          // Pré-preencher dados do usuário
          setDadosEntrega(prev => ({
            ...prev,
            nome: userData.nome || userData.name || prev.nome,
            telefone: userData.telefone || prev.telefone,
            email: userData.email || prev.email
          }))

          // Buscar endereço do usuário se disponível
          // Backend pode retornar "endereco" (singular) ou "enderecos" (plural array)
          let enderecoId = enderecoIdStorage || userData.endereco

          // Se vier como array, pegar o primeiro
          if (!enderecoId && userData.enderecos && Array.isArray(userData.enderecos) && userData.enderecos.length > 0) {
            enderecoId = userData.enderecos[0]
          }



          if (enderecoId) {


            try {
              const endereco = await enderecoService.buscarPorId(enderecoId)


              if (endereco) {

                // const enderecoCompleto = `${endereco.logradouro}${endereco.numero ? `, ${endereco.numero}` : ''}`

                // Converter estado para sigla se vier como nome completo
                const estadoSigla = converterEstadoParaSigla(endereco.estado || '')



                // Pré-preencher dados de entrega com o endereço
                setDadosEntrega(prev => ({
                  ...prev,
                  endereco: endereco.logradouro || prev.endereco,
                  numero: endereco.numero || prev.numero,
                  bairro: endereco.bairro || prev.bairro,
                  cidade: endereco.cidade || prev.cidade,
                  estado: estadoSigla || prev.estado,  // Usar sigla convertida
                  cep: endereco.cep || prev.cep,
                  complemento: endereco.complemento || prev.complemento
                }))

                toast.success('Endereço carregado com sucesso!')
              } else {
                console.warn('⚠️ [CHECKOUT] API retornou null/undefined')
              }
            } catch (error) {
              console.error('❌ [CHECKOUT] Erro ao buscar endereço:', error)
              toast.error('Não foi possível carregar seu endereço')
            }
          }
        } else {
          // Tentar buscar via /me se há token
          const token = localStorage.getItem('access_token')
          if (token) {
            const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/auth/me`, {
              headers: { "Authorization": `Bearer ${token}` }
            })
            if (response.ok) {
              const userData = await response.json()
              setUser(userData)
              localStorage.setItem('user', JSON.stringify(userData))

              // Pré-preencher dados do usuário
              setDadosEntrega(prev => ({
                ...prev,
                nome: userData.nome || userData.name || prev.nome,
                telefone: userData.telefone || prev.telefone,
                email: userData.email || prev.email
              }))

              // Buscar endereço se disponível
              if (userData.endereco) {
                localStorage.setItem('user_endereco_id', userData.endereco)
                try {
                  const endereco = await enderecoService.buscarPorId(userData.endereco)
                  if (endereco) {
                    const estadoSigla = converterEstadoParaSigla(endereco.estado || '')
                    setDadosEntrega(prev => ({
                      ...prev,
                      endereco: endereco.logradouro || prev.endereco,
                      numero: endereco.numero || prev.numero,
                      bairro: endereco.bairro || prev.bairro,
                      cidade: endereco.cidade || prev.cidade,
                      estado: estadoSigla || prev.estado,  // Usar sigla convertida
                      cep: endereco.cep || prev.cep,
                      complemento: endereco.complemento || prev.complemento
                    }))
                    toast.success('Endereço carregado com sucesso!')
                  }
                } catch (error) {
                  console.error('❌ Erro ao buscar endereço:', error)
                }
              }
            }
          }
        }
      } catch (error) {
        console.error('❌ [CHECKOUT] Erro ao carregar usuário:', error)
        toast.error('Erro ao carregar dados do usuário')
      }
    }

    carregarUsuario()
      .then(() => console.log('Carregamento concluído'))
      .catch(err => console.error('❌ [CHECKOUT] Erro no carregamento:', err))
  }, [])

  // Verificar se há ID do pedido na URL
  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const pedidoIdFromUrl = urlParams.get('pedido');
    if (pedidoIdFromUrl) {
      setPedidoId(pedidoIdFromUrl);
    }
  }, []);

  // Buscar dados do pedido quando há ID
  useEffect(() => {
    const buscarDadosPedido = async () => {
      if (!pedidoId) return;

      try {
        setCarregandoPedido(true);

        const response = await pedidoApiService.buscarPorId(pedidoId);

        if (response.success) {
          setDadosPedido(response.data);
        } else {
          console.error('❌ [CHECKOUT] Erro ao buscar pedido:', response.error);
          toast.error('Erro ao carregar dados do pedido');
        }
      } catch (error) {
        console.error('💥 [CHECKOUT] Erro ao buscar pedido:', error);
        toast.error('Erro ao carregar dados do pedido');
      } finally {
        setCarregandoPedido(false);
      }
    };

    buscarDadosPedido();
  }, [pedidoId]);

  // Buscar dados dos produtos quando há dados do pedido
  useEffect(() => {
    const buscarProdutosPedido = async () => {
      if (!dadosPedido || !dadosPedido.itens || dadosPedido.itens.length === 0) {
        return;
      }

      try {
        setCarregandoProdutos(true);

        // Buscar todos os produtos completos de uma vez (otimizado)
        const produtosCompletos = await produtosVendaService.buscarProdutosCompletos();

        // Mapear os produtos do pedido com os dados completos
        const produtosPedidoMapeados = dadosPedido.itens.map((produtoId: string, index: number) => {
          // Encontrar o produto pelos possíveis IDs
          const produtoEncontrado = produtosCompletos.find(p =>
            p.id === produtoId ||
            p.catalogo_id === produtoId ||
            p.$id === produtoId
          );

          if (produtoEncontrado) {
            return {
              produto: {
                ...produtoEncontrado,
                // Garantir compatibilidade com estrutura anterior
                $id: produtoEncontrado.id,
                "codigo-ean": produtoEncontrado.codigo_ean,
                "codigo-interno": produtoEncontrado.codigo_interno,
                // Garantir que preco_final existe, usando preco_venda como fallback
                preco_final: produtoEncontrado.preco_final || produtoEncontrado.preco_venda || 0,
                // IDs necessários para ajuste de estoque
                estoque_id: produtoEncontrado.id,
                venda_id: produtoEncontrado.id,
                produto_venda_id: produtoEncontrado.id
              },
              quantidade: dadosPedido.quantidade ? dadosPedido.quantidade[index] : 1
            };
          } else {
            console.warn(`⚠️ [CHECKOUT] Produto não encontrado: ${produtoId}`);
            return {
              produto: {
                id: produtoId,
                $id: produtoId,
                nome: `Produto não encontrado (${produtoId.substring(0, 8)}...)`,
                descricao: 'Produto não disponível',
                preco_venda: 0,
                preco_base: 0,
                preco_final: 0,
                quantidade_estoque: 0,
                "codigo-ean": 'N/A',
                "codigo-interno": produtoId,
                // IDs para estoque mesmo quando não encontrado
                estoque_id: produtoId,
                catalogo_id: null,
                venda_id: produtoId,
                produto_venda_id: produtoId
              },
              quantidade: dadosPedido.quantidade ? dadosPedido.quantidade[index] : 1
            };
          }
        });

        setProdutosPedido(produtosPedidoMapeados);

      } catch (error) {
        console.error('💥 [CHECKOUT] Erro ao buscar produtos:', error);

        // Fallback: criar produtos básicos mesmo em caso de erro
        const produtosFallback = dadosPedido.itens.map((produtoId: string, index: number) => ({
          produto: {
            id: produtoId,
            $id: produtoId,
            nome: `Produto ${produtoId.substring(0, 8)}...`,
            descricao: `Erro ao carregar dados`,
            preco_venda: 0,
            preco_base: 0,
            preco_final: 0,
            quantidade_estoque: 0,
            "codigo-ean": 'N/A',
            "codigo-interno": produtoId,
            estoque_id: produtoId,
            catalogo_id: null,
            venda_id: produtoId,
            produto_venda_id: produtoId
          },
          quantidade: dadosPedido.quantidade ? dadosPedido.quantidade[index] : 1
        }));

        setProdutosPedido(produtosFallback);
      } finally {
        setCarregandoProdutos(false);
      }
    };

    buscarProdutosPedido();
  }, [dadosPedido]);

  // Verificar se carrinho está vazio (só redireciona se não há pedido criado)
  useEffect(() => {
    if (itens.length === 0 && !pedidoId) {
      toast.error('Seu carrinho está vazio')
      router.push('/produtos')
    }
  }, [itens, router, pedidoId])

  // Sincronizar dados do carrinho com pedido existente quando itens mudam
  useEffect(() => {

    // Se há pedido criado e itens no carrinho mudaram, verificar se precisa atualizar
    if (pedidoId && itens.length > 0 && dadosPedido) {

      // Comparar se os itens mudaram
      const itensCarrinhoIds = itens.map(item => item.produto.id).sort()
      const itensPedidoIds = (dadosPedido.itens || []).sort()
      const quantidadesCarrinho = itens.map(item => item.quantidade)
      const quantidadesPedido = dadosPedido.quantidade || []

      const itensIguais = JSON.stringify(itensCarrinhoIds) === JSON.stringify(itensPedidoIds)
      const quantidadesIguais = JSON.stringify(quantidadesCarrinho) === JSON.stringify(quantidadesPedido)

      // Verificar também se valores estão sincronizados (usar valor do contexto como fonte da verdade)
      const valorCarrinhoAtual = valorTotal; // Valor já calculado corretamente no contexto
      const valorPedidoAtual = dadosPedido['valor-total'] || 0
      const valoresIguais = Math.abs(valorCarrinhoAtual - valorPedidoAtual) < 0.01 // tolerância de 1 centavo



      if (!itensIguais || !quantidadesIguais || !valoresIguais) {

        setDadosCarrinhoAtualizados(true)

        // Atualizar produtos do pedido com dados do carrinho atual
        const produtosAtualizados = itens.map(item => ({
          produto: {
            ...item.produto,
            $id: item.produto.id,
            "codigo-ean": item.produto.codigo_ean,
            "codigo-interno": item.produto.codigo_interno,
            estoque_id: item.produto.id,
            venda_id: item.produto.id,
            produto_venda_id: item.produto.id
          },
          quantidade: item.quantidade
        }))

        setProdutosPedido(produtosAtualizados)

        // Atualizar valor total baseado no contexto do carrinho (fonte da verdade)
        const novoValorTotal = valorTotal; // Usar valor já calculado no contexto



        // Atualizar dados do pedido com novos valores
        setDadosPedido((prev: any) => ({
          ...prev,
          itens: itens.map(item => item.produto.id),
          quantidade: itens.map(item => item.quantidade),
          'valor-total': novoValorTotal
        }))

        toast.success('Dados do pedido atualizados com as modificações do carrinho')

        // Reset do indicador após um tempo
        setTimeout(() => {
          setDadosCarrinhoAtualizados(false)
        }, 3000)
      }
    }
  }, [itens, pedidoId, dadosPedido])

  const handleBuscarCep = async (e: React.FocusEvent<HTMLInputElement>) => {
    const cep = e.target.value.replace(/\D/g, '');
    if (cep.length === 8) {
      try {
        toast.loading('Buscando CEP...', { id: 'busca-cep' });
        const endereco = await enderecoService.buscarPorCep(cep);

        if (endereco) {
          const estadoSigla = converterEstadoParaSigla(endereco.estado || '');

          setDadosEntrega(prev => ({
            ...prev,
            endereco: endereco.logradouro || prev.endereco,
            bairro: endereco.bairro || prev.bairro,
            cidade: endereco.cidade || prev.cidade,
            estado: estadoSigla || prev.estado,
          }));
          toast.success('Endereço encontrado!', { id: 'busca-cep' });
        } else {
          toast.error('CEP não encontrado', { id: 'busca-cep' });
        }
      } catch (error) {
        console.error('Erro ao buscar CEP', error);
        toast.error('Erro ao buscar CEP', { id: 'busca-cep' });
      }
    }
  };

  const validarEtapa1 = () => {
    const { nome, email, endereco, numero, bairro, cidade, estado, cep } = dadosEntrega
    const valido = nome && email && endereco && numero && bairro && cidade && estado && cep
    return !!valido
  }

  // Função para calcular valor total baseado nos dados disponíveis
  const calcularValorTotal = () => {
    // SEMPRE usar o valor do contexto do carrinho como fonte da verdade
    const valorContextoCarrinho = valorTotal;

    if (itens.length > 0) {
      return valorContextoCarrinho + (dadosFrete?.valor || 0);
    }

    // Se carrinho vazio, usar produtos do pedido como fallback
    if (produtosPedido.length > 0) {
      const valorCalculado = produtosPedido.reduce((total, item) => {
        const preco = (item.produto as any).preco_final || 0;
        return total + (preco * item.quantidade);
      }, 0);
      return valorCalculado + (dadosFrete?.valor || 0);
    }

    // Último fallback - dados da API
    if (dadosPedido && dadosPedido['valor-total']) {
      return dadosPedido['valor-total'] + (dadosFrete?.valor || 0);
    }

    return 0;
  };

  const buscarFrete = async () => {
    setErroFrete(null);
    if (!dadosEntrega.cep || !itens.length) return;

    try {
      setCarregandoFrete(true);
      setOpcoesFrete([]);
      setDadosFrete(null);

      // Pegar empresaId do primeiro item (assumindo mesmo vendedor)
      const empresaId = itens[0].produto.empresa_id;

      if (!empresaId) {
        console.warn('⚠️ Produto sem empresa_id, não é possível calcular frete');
        const msg = 'Não foi possível identificar o vendedor para cálculo de frete';
        toast.error(msg);
        setErroFrete(msg);
        return;
      }

      // Buscar coordenadas
      const coords = await entregasApiService.buscarCoordenadas(dadosEntrega.cep);

      if (!coords) {
        const msg = 'CEP não encontrado ou inválido para cálculo de frete';
        toast.error(msg);
        setErroFrete(msg);
        return;
      }

      // Preparar dados para cotação
      const dadosCotacao = {
        empresaId,
        destino: {
          enderecoEntrega: dadosEntrega.endereco,
          numeroEntrega: '0', // Pode ser atualizado se tiver campo número separado
          bairroEntrega: 'Bairro', // Pode ser atualizado se tiver campo bairro
          cidadeEntrega: dadosEntrega.cidade,
          estadoEntrega: dadosEntrega.estado,
          cepEntrega: dadosEntrega.cep,
          paisEntrega: 'Brasil',
          latitude: parseFloat(coords.lat),
          longitude: parseFloat(coords.lng)
        }
      };

      const cotacao = await entregasApiService.cotacao(dadosCotacao);

      if (cotacao) {
        setOpcoesFrete([cotacao]); // API retorna um objeto único, mas tratamos como array para futuro
        // Selecionar automaticamente se for a única opção ou grátis
        if (cotacao.tipoFrete === 'gratis') {
          setDadosFrete(cotacao);
        }
      } else {
        const msg = 'Não foi possível calcular o frete para este endereço';
        toast.error(msg);
        setErroFrete(msg);
      }

    } catch (error) {
      console.error('❌ Erro ao buscar frete:', error);
      const msg = (error as any).message || 'Erro ao calcular frete';
      toast.error(msg);
      setErroFrete(msg);
    } finally {
      setCarregandoFrete(false);
    }
  };



  const validarEtapa2 = () => {
    return dadosFrete !== null;
  }

  const validarEtapa3 = () => {
    return dadosPagamento.metodo && dadosPagamento.metodo.length > 0
  }

  const proximaEtapa = async () => {

    if (etapaAtual === 1 && validarEtapa1()) {
      await buscarFrete();
      setEtapaAtual(2)
    } else if (etapaAtual === 2 && validarEtapa2()) {
      // Atualizar pedido com valor do frete ao avançar para pagamento
      try {
        if (pedidoId) {
          const dadosAtualizacaoValores: any = {
            "valor-frete": dadosFrete?.valor || 0,
            "valor-total": calcularValorTotal()
          };

          console.log('🔄 [CHECKOUT] Atualizando valores do pedido após seleção de frete:', dadosAtualizacaoValores);
          // Não usar await para não bloquear a UI, mas idealmente deveria ter um loading
          pedidoApiService.atualizar(pedidoId, dadosAtualizacaoValores).catch(err =>
            console.error('❌ [CHECKOUT] Erro ao atualizar frete no pedido (background):', err)
          );
        }
      } catch (error) {
        console.error('❌ [CHECKOUT] Erro ao tentar atualizar pedido:', error);
      }

      setEtapaAtual(3)
    } else if (etapaAtual === 3 && validarEtapa3()) {

      // Se for Mercado Pago, pular para etapa 4 (será processado pelo botão específico)
      if (dadosPagamento.metodo === 'mercadopago') {
        setEtapaAtual(4)
        return
      }

      try {
        setProcessandoPagamento(true);

        // Verificar se há pedido ID
        if (!pedidoId) {
          toast.error('ID do pedido não encontrado');
          return;
        }

        // Mapear método de pagamento para formato da API (Mercado Pago usa 'credito' como padrão)
        const metodoApi = 'credito';
        const valorTotal = calcularValorTotal();

        // Criar pagamento na API
        const response = await pagamentoApiService.criar(metodoApi, valorTotal, pedidoId);

        if (response.success) {
          const pagamentoIdCriado = response.data?.$id || response.data?.id;
          setPagamentoId(pagamentoIdCriado);


          toast.success('Pagamento criado com sucesso via Mercado Pago!');

          // Mock de processamento de pagamento
          const resultadoMock = await pagamentoApiService.processarPagamentoMock(metodoApi, valorTotal);

          if (resultadoMock.success) {
            toast.success(`Pagamento processado via Mercado Pago! ID: ${resultadoMock.transactionId?.substring(0, 10)}...`);
          } else {
            toast.error('Falha no processamento do pagamento (simulação)');
          }

          // Avançar para confirmação
          setEtapaAtual(4);
        } else {
          console.error('❌ [CHECKOUT] Erro ao criar pagamento:', response.error);
          toast.error(`Erro ao criar pagamento: ${response.error}`);
        }
      } catch (error) {
        console.error('💥 [CHECKOUT] Erro no processamento do pagamento:', error);
        toast.error('Erro ao processar pagamento. Tente novamente.');
      } finally {
        setProcessandoPagamento(false);
      }
    } else {
      toast.error('Preencha todos os campos obrigatórios')
    }
  }

  const etapaAnterior = () => {
    if (etapaAtual > 1) {
      setEtapaAtual(etapaAtual - 1)
    }
  }

  const finalizarPedido = async () => {
    // Evitar múltiplas execuções simultâneas
    if (processandoPedido || processandoFatura || processandoEstoque || processandoEntrega) {
      return;
    }

    setProcessandoPedido(true)

    try {
      // Verificar se há pedido ID
      if (!pedidoId) {
        toast.error('ID do pedido não encontrado');
        return;
      }


      // 0. Atualizar valores do pedido (frete e total) ANTES de criar fatura
      try {
        const dadosAtualizacaoValores: any = {
          "valor-frete": dadosFrete?.valor || 0,
          "valor-total": calcularValorTotal()
        };

        console.log('🔄 [CHECKOUT] Atualizando valores do pedido antes da finalização:', dadosAtualizacaoValores);
        await pedidoApiService.atualizar(pedidoId, dadosAtualizacaoValores);
      } catch (error) {
        console.error('❌ [CHECKOUT] Erro ao atualizar valores do pedido:', error);
        // Continuar mesmo com erro, mas logar
      }

      // 1. Criar fatura para o pedido (se ainda não existe)
      if (!faturaId) {
        setProcessandoFatura(true);

        const faturaResponse = await faturaApiService.criar(pedidoId);

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

          toast.success('📄 Fatura gerada com sucesso!');

          // 1.1. Atualizar status da fatura para "pago"
          const faturaUpdateResponse = await faturaApiService.atualizarStatus(faturaIdCriada, 'pago');

          if (faturaUpdateResponse.success) {
            toast.success('💰 Fatura paga com sucesso!');
          } else {
            console.error('❌ [CHECKOUT] Erro ao atualizar status da fatura:', faturaUpdateResponse.error);
            toast.error(`Erro ao marcar fatura como paga: ${faturaUpdateResponse.error}`);
          }
        } else {
          console.error('❌ [CHECKOUT] Erro ao criar fatura:', faturaResponse.error);
          toast.error(`Erro ao criar fatura: ${faturaResponse.error}`);
          // Não interromper o fluxo por causa da fatura
        }

        setProcessandoFatura(false);
      }

      // 2. Atualizar status do pedido para "aprovado"
      const pedidoUpdateResponse = await pedidoApiService.atualizarStatus(pedidoId, 'aprovado');

      if (pedidoUpdateResponse.success) {
        toast.success('✅ Pedido aprovado com sucesso!');

        // Atualizar dados locais do pedido
        setDadosPedido((prev: any) => prev ? { ...prev, status: 'aprovado' } : null);
      } else {
        console.error('❌ [CHECKOUT] Erro ao aprovar pedido:', pedidoUpdateResponse.error);
        toast.error(`Erro ao aprovar pedido: ${pedidoUpdateResponse.error}`);
      }

      // 3. Ajustar estoque dos produtos
      setProcessandoEstoque(true);

      // Usar produtos do pedido se disponível, senão usar carrinho local
      const itensParaAjuste = produtosPedido.length > 0 ? produtosPedido :
        itens.map(item => ({ produto: item.produto, quantidade: item.quantidade }));

      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('❌ [CHECKOUT] Falha ao ajustar estoque:', resultadoEstoque.detalhes);
        toast.error('Erro ao ajustar estoque dos produtos');
      }

      setProcessandoEstoque(false);

      // 4. Criar entrega para o pedido
      setProcessandoEntrega(true);

      try {
        // Tentar diferentes formatos de dados para descobrir o que a API aceita

        // Dados completos da entrega seguindo o formato correto da API
        const dadosEntregaBasicos = {
          entregadorId: "entregador_padrao",
          empresaId: user?.empresaId || "empresa_padrao",
          enderecoEntrega: dadosEntrega.endereco || "Endereço não informado",
          cidadeEntrega: dadosEntrega.cidade || "Cidade",
          estadoEntrega: dadosEntrega.estado || "SP",
          cepEntrega: (dadosEntrega.cep || "00000000").replace(/\D/g, ''),
          paisEntrega: "Brasil",
          bairroEntrega: dadosEntrega.bairro || "Centro",
          numeroEntrega: dadosEntrega.numero || "S/N",
          complementoEntrega: dadosEntrega.complemento || "",
          nomeDestinatario: dadosEntrega.nome || "Cliente",
          telefoneDestinatario: dadosEntrega.telefone || "(00) 00000-0000",
          emailDestinatario: user?.email || "cliente@exemplo.com",
          status: "pendente",
          codigoRastreamento: `BR${Date.now()}${Math.floor(Math.random() * 1000)}BR`,
          dataEntregaEstimativa: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toISOString(),
          dataEntregaReal: null,
          dataColeta: new Date().toISOString(),
          dataAtribuicao: new Date().toISOString(),
          dataCriacao: new Date().toISOString(),
          dataAtualizacao: new Date().toISOString(),
          taxaEntrega: dadosFrete?.valor || 0,
          distancia: 0,
          observacoesEntrega: `Entrega do pedido ${pedidoId}`,
          urlComprovanteEntrega: null,
          assinaturaEntrega: null,
          motivoFalha: "",
          motivoCancelamento: ""
        };


        const entregaResponse = await entregasApiService.criar(dadosEntregaBasicos);

        if (entregaResponse.success && entregaResponse.data) {
          const entregaIdCriada = entregaResponse.data.id;
          setEntregaId(entregaIdCriada);

          toast.success(`🚚 Entrega criada! ID: ${entregaIdCriada.substring(0, 8)}...`);
        } else {
          console.warn('⚠️ [CHECKOUT] API de entrega não configurada ainda:', entregaResponse.error);

          // Criar um ID mock para manter o fluxo funcionando
          const mockEntregaId = `entrega_mock_${Date.now()}`;
          setEntregaId(mockEntregaId);

          toast.success('🚚 Entrega registrada! (será processada pela equipe)');

          // Continuar o fluxo com ID mock
        }
      } catch (error) {
        console.warn('⚠️ [CHECKOUT] Entrega automática não disponível:', error);
        toast('📋 Entrega será processada manualmente', {
          icon: '🚚',
          duration: 3000,
        });
        // Não interromper o fluxo - a entrega pode ser criada manualmente depois
      }

      setProcessandoEntrega(false);

      // 5. Atualizar pedido com IDs de referência (fatura, pagamento, carrinho, usuário, entrega)

      try {
        const dadosAtualizacao: any = {
          status: 'aprovado'
          // Valores já foram atualizados no passo 0
        };

        // Adicionar IDs de referência apenas se existirem (somente campos aceitos pela API)
        if (faturaId) dadosAtualizacao.faturas = faturaId;
        if (pagamentoId) dadosAtualizacao.pagamentos = pagamentoId;
        if (entregaId) dadosAtualizacao.entregas = entregaId;
        if (dadosPedido?.carrinhos) dadosAtualizacao.carrinhos = dadosPedido.carrinhos;
        if (user?.$id || user?.id) dadosAtualizacao.usuarios = user.$id || user.id;


        const atualizacaoResponse = await pedidoApiService.atualizar(pedidoId, dadosAtualizacao);

        if (atualizacaoResponse.success) {
          toast.success('📋 Pedido atualizado com dados de referência');
        } else {
          console.warn('⚠️ [CHECKOUT] Falha ao atualizar pedido com referências:', atualizacaoResponse.error);
          // Não bloquear o fluxo por este erro
        }
      } catch (error) {
        console.error('❌ [CHECKOUT] Erro ao atualizar pedido com referências:', error);
        // Não bloquear o fluxo por este erro
      }

      // 6. Simular processamento final do pedido
      await new Promise(resolve => setTimeout(resolve, 1500));

      // 7. Montar dados do pedido finalizado
      const pedidoData = {
        id: pedidoId,
        itens: itens.map(item => ({
          produto_id: item.produto.id,
          quantidade: item.quantidade,
          preco_unitario: item.produto.preco_venda || item.produto.preco_base
        })),
        dadosEntrega,
        dadosPagamento,
        valorTotal,
        faturaId: faturaId,
        pagamentoId: pagamentoId,
        entregaId: entregaId,
        usuarioId: user?.$id || user?.id || null,
        estoqueAjustado: estoqueAjustado,
        timestamp: new Date().toISOString()
      }


      // 8. Não limpar carrinho aqui - será limpo na página de sucesso após confirmação do pagamento
      // await limparCarrinho(); // Removido - carrinho mantido até sucesso do pagamento

      toast.success('🎉 Pedido criado! Redirecionando para pagamento...');

      // 9. Redirecionar para a página de sucesso (que irá limpar o carrinho)
      setTimeout(() => {
        router.push('/pagamento/sucesso');
      }, 2000);

    } catch (error) {
      console.error('❌ [CHECKOUT] Erro ao finalizar pedido:', error);
      toast.error('Erro ao processar pedido. Tente novamente.');
    } finally {
      setProcessandoPedido(false);
      setProcessandoFatura(false);
      setProcessandoEstoque(false);
      setProcessandoEntrega(false);
    }
  }

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

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

      <main className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        {/* Header da página */}
        <div className="mb-8">
          <button
            onClick={() => router.back()}
            className="flex items-center text-blue-600 hover:text-blue-700 mb-4"
          >
            <ArrowLeftIcon className="h-5 w-5 mr-2" />
            Voltar
          </button>

          <h1 className="text-3xl font-bold text-gray-900">Finalizar Compra</h1>
          <p className="mt-2 text-gray-600">
            Complete os dados para finalizar seu pedido
          </p>

        </div>

        {/* Indicador de etapas */}
        <div className="mb-8">
          <nav className="flex items-center justify-center">
            <ol className="flex items-center space-x-4">
              {[
                { id: 1, name: 'Entrega', icon: MapPinIcon },
                { id: 2, name: 'Frete', icon: TruckIcon },
                { id: 3, name: 'Pagamento', icon: CreditCardIcon },
                { id: 4, name: 'Confirmação', icon: CheckCircleIcon }
              ].map((step, stepIdx) => (
                <li key={step.id} className="flex items-center">
                  <div className={`flex h-10 w-10 items-center justify-center rounded-full border-2 ${etapaAtual >= step.id
                    ? 'border-blue-600 bg-blue-600 text-white'
                    : 'border-gray-300 bg-white text-gray-500'
                    }`}>
                    <step.icon className="h-5 w-5" />
                  </div>
                  <span className={`ml-2 text-sm font-medium ${etapaAtual >= step.id ? 'text-blue-600' : 'text-gray-500'
                    }`}>
                    {step.name}
                  </span>
                  {stepIdx < 3 && (
                    <div className={`ml-4 h-0.5 w-16 ${etapaAtual > step.id ? 'bg-blue-600' : 'bg-gray-300'
                      }`} />
                  )}
                </li>
              ))}
            </ol>
          </nav>
        </div>

        {/* Detalhes do pedido quando disponível */}
        {dadosPedido && (
          <div className="mb-8">
            <div className="bg-white rounded-lg shadow p-6">
              <h2 className="text-xl font-semibold text-gray-900 mb-4">Detalhes do Pedido</h2>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {/* Informações básicas */}
                <div className="space-y-3">
                  <h3 className="text-sm font-medium text-gray-700 uppercase tracking-wide">Informações</h3>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-sm text-gray-600">Status:</span>
                      <span className={`text-sm font-medium capitalize px-2 py-1 rounded-full ${dadosPedido.status === 'pendente' ? 'bg-yellow-100 text-yellow-800' :
                        dadosPedido.status === 'confirmado' ? 'bg-green-100 text-green-800' :
                          'bg-gray-100 text-gray-800'
                        }`}>
                        {dadosPedido.status || 'Pendente'}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm text-gray-600">Data do pedido:</span>
                      <span className="text-sm text-gray-900">
                        {dadosPedido.$createdAt ?
                          new Date(dadosPedido.$createdAt).toLocaleString('pt-BR') :
                          new Date().toLocaleString('pt-BR')
                        }
                      </span>
                    </div>
                  </div>
                </div>

                {/* Valores */}
                <div className="space-y-3">
                  <h3 className="text-sm font-medium text-gray-700 uppercase tracking-wide">Valores</h3>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-sm text-gray-600">Valor total:</span>
                      <span className="text-sm font-semibold text-green-600">
                        R$ {dadosPedido['valor-total']?.toFixed(2) || '0,00'}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm text-gray-600">Frete:</span>
                      <span className="text-sm text-green-600">Grátis</span>
                    </div>
                  </div>
                </div>

                {/* Itens */}
                <div className="space-y-3">
                  <h3 className="text-sm font-medium text-gray-700 uppercase tracking-wide">Itens</h3>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-sm text-gray-600">Produtos diferentes:</span>
                      <span className="text-sm font-medium text-gray-900">
                        {dadosPedido.itens ? dadosPedido.itens.length : 0}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm text-gray-600">Total de itens:</span>
                      <span className="text-sm font-medium text-gray-900">
                        {dadosPedido.quantidade ? dadosPedido.quantidade.reduce((a: number, b: number) => a + b, 0) : 0} itens
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Área principal */}
          <div className="lg:col-span-2">
            {/* Etapa 1: Dados de Entrega */}
            {etapaAtual === 1 && (
              <div className="bg-white rounded-lg shadow p-6">
                <div className="flex items-center mb-6">
                  <MapPinIcon className="h-6 w-6 text-blue-600 mr-3" />
                  <h2 className="text-xl font-semibold text-gray-900">
                    Dados de Entrega
                  </h2>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="md:col-span-2">
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      CEP *
                    </label>
                    <input
                      type="text"
                      value={dadosEntrega.cep}
                      onChange={(e) => setDadosEntrega({ ...dadosEntrega, cep: e.target.value })}
                      onBlur={handleBuscarCep}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="00000-000"
                      maxLength={9}
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Nome Completo *
                    </label>
                    <input
                      type="text"
                      value={dadosEntrega.nome}
                      onChange={(e) => setDadosEntrega({ ...dadosEntrega, nome: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="Seu nome completo"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Telefone *
                    </label>
                    <input
                      type="text"
                      value={dadosEntrega.telefone}
                      onChange={(e) => setDadosEntrega({ ...dadosEntrega, telefone: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="(00) 00000-0000"
                    />
                  </div>

                  <div className="md:col-span-2 grid grid-cols-3 gap-4">
                    <div className="col-span-2">
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Endereço *
                      </label>
                      <input
                        type="text"
                        value={dadosEntrega.endereco}
                        onChange={(e) => setDadosEntrega({ ...dadosEntrega, endereco: e.target.value })}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="Rua, Avenida"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Número *
                      </label>
                      <input
                        type="text"
                        value={dadosEntrega.numero}
                        onChange={(e) => setDadosEntrega({ ...dadosEntrega, numero: e.target.value })}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="123"
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Bairro *
                    </label>
                    <input
                      type="text"
                      value={dadosEntrega.bairro}
                      onChange={(e) => setDadosEntrega({ ...dadosEntrega, bairro: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="Seu bairro"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Cidade *
                    </label>
                    <input
                      type="text"
                      value={dadosEntrega.cidade}
                      onChange={(e) => setDadosEntrega({ ...dadosEntrega, cidade: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="Sua cidade"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Estado *
                    </label>
                    <select
                      value={dadosEntrega.estado}
                      onChange={(e) => setDadosEntrega({ ...dadosEntrega, estado: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                      <option value="">Selecione o estado</option>
                      <option value="AC">Acre</option>
                      <option value="AL">Alagoas</option>
                      <option value="AP">Amapá</option>
                      <option value="AM">Amazonas</option>
                      <option value="BA">Bahia</option>
                      <option value="CE">Ceará</option>
                      <option value="DF">Distrito Federal</option>
                      <option value="ES">Espírito Santo</option>
                      <option value="GO">Goiás</option>
                      <option value="MA">Maranhão</option>
                      <option value="MT">Mato Grosso</option>
                      <option value="MS">Mato Grosso do Sul</option>
                      <option value="MG">Minas Gerais</option>
                      <option value="PA">Pará</option>
                      <option value="PB">Paraíba</option>
                      <option value="PR">Paraná</option>
                      <option value="PE">Pernambuco</option>
                      <option value="PI">Piauí</option>
                      <option value="RJ">Rio de Janeiro</option>
                      <option value="RN">Rio Grande do Norte</option>
                      <option value="RS">Rio Grande do Sul</option>
                      <option value="RO">Rondônia</option>
                      <option value="RR">Roraima</option>
                      <option value="SC">Santa Catarina</option>
                      <option value="SP">São Paulo</option>
                      <option value="SE">Sergipe</option>
                      <option value="TO">Tocantins</option>
                    </select>
                  </div>

                  <div className="md:col-span-2">
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Complemento
                    </label>
                    <input
                      type="text"
                      value={dadosEntrega.complemento}
                      onChange={(e) => setDadosEntrega({ ...dadosEntrega, complemento: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="Apartamento, bloco, etc."
                    />
                  </div>
                </div>

                <div className="mt-6 flex justify-end gap-4">
                  <button
                    onClick={() => {
                      proximaEtapa()
                    }}
                    disabled={!validarEtapa1()}
                    className={`px-6 py-2 rounded-md transition-colors ${validarEtapa1()
                      ? 'bg-blue-600 text-white hover:bg-blue-700 cursor-pointer'
                      : 'bg-gray-300 text-gray-500 cursor-not-allowed'
                      }`}
                  >
                    Continuar
                  </button>
                </div>
              </div>
            )}

            {/* Etapa 2: Seleção de Frete */}
            {etapaAtual === 2 && (
              <div className="bg-white rounded-lg shadow p-6">
                <div className="flex items-center mb-6">
                  <TruckIcon className="h-6 w-6 text-blue-600 mr-3" />
                  <h2 className="text-xl font-semibold text-gray-900">
                    Opções de Frete
                  </h2>
                </div>

                {carregandoFrete ? (
                  <div className="flex flex-col items-center justify-center py-8">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
                    <p className="text-gray-600">Calculando opções de frete...</p>
                  </div>
                ) : opcoesFrete.length > 0 ? (
                  <div className="space-y-4">
                    {opcoesFrete.map((opcao, index) => (
                      <div
                        key={index}
                        onClick={() => setDadosFrete(opcao)}
                        className={`border-2 rounded-lg p-4 cursor-pointer transition-all ${dadosFrete?.tipoFrete === opcao.tipoFrete
                          ? 'border-blue-600 bg-blue-50'
                          : 'border-gray-200 hover:border-blue-300'
                          }`}
                      >
                        <div className="flex justify-between items-center">
                          <div className="flex items-center">
                            <div className={`h-5 w-5 rounded-full border-2 mr-3 flex items-center justify-center ${dadosFrete?.tipoFrete === opcao.tipoFrete
                              ? 'border-blue-600'
                              : 'border-gray-300'
                              }`}>
                              {dadosFrete?.tipoFrete === opcao.tipoFrete && (
                                <div className="h-2.5 w-2.5 rounded-full bg-blue-600" />
                              )}
                            </div>
                            <div>
                              <p className="font-semibold text-gray-900 capitalize">
                                {opcao.tipoFrete === 'gratis' ? 'Frete Grátis' :
                                  opcao.tipoFrete === 'fixo' ? 'Entrega Fixa' :
                                    'Entrega Expressa'}
                              </p>
                              <p className="text-sm text-gray-600">
                                {opcao.prazo || 'Até 5 dias úteis'}
                              </p>
                            </div>
                          </div>
                          <span className={`font-bold ${opcao.tipoFrete === 'gratis' ? 'text-green-600' : 'text-gray-900'
                            }`}>
                            {opcao.valor === 0 ? 'Grátis' : formatarPreco(opcao.valor)}
                          </span>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-8 text-gray-500">
                    {erroFrete ? (
                      <div className="mb-4 p-4 bg-red-50 text-red-700 rounded-md border border-red-200 mx-auto max-w-md">
                        <p className="font-medium">Não foi possível calcular o frete</p>
                        <p className="text-sm mt-1">{erroFrete}</p>
                      </div>
                    ) : (
                      <p>Nenhuma opção de frete disponível para este endereço.</p>
                    )}
                    <button
                      onClick={buscarFrete}
                      className="mt-4 text-blue-600 hover:underline"
                    >
                      Tentar novamente
                    </button>
                  </div>
                )}

                <div className="mt-6 flex justify-between">
                  <button
                    onClick={etapaAnterior}
                    className="px-6 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50"
                  >
                    Voltar
                  </button>
                  <button
                    onClick={proximaEtapa}
                    disabled={!validarEtapa2() || carregandoFrete}
                    className={`px-6 py-2 rounded-md transition-colors ${validarEtapa2() && !carregandoFrete
                      ? 'bg-blue-600 text-white hover:bg-blue-700 cursor-pointer'
                      : 'bg-gray-300 text-gray-500 cursor-not-allowed'
                      }`}
                  >
                    Continuar
                  </button>
                </div>
              </div>
            )}

            {/* Etapa 3: Dados de Pagamento */}
            {etapaAtual === 3 && (
              <div className="bg-white rounded-lg shadow p-6">
                <div className="flex items-center mb-6">
                  <CreditCardIcon className="h-6 w-6 text-blue-600 mr-3" />
                  <h2 className="text-xl font-semibold text-gray-900">
                    Forma de Pagamento
                  </h2>
                </div>

                <div className="space-y-4">
                  <div>
                    <label className="flex items-center p-4 border-2 border-blue-500 bg-blue-50 rounded-lg cursor-pointer">
                      <input
                        type="radio"
                        name="metodo"
                        value="mercadopago"
                        checked={true}
                        onChange={(e) => setDadosPagamento({ ...dadosPagamento, metodo: e.target.value as any })}
                        className="mr-3"
                      />
                      <div className="h-5 w-5 bg-blue-500 rounded mr-3"></div>
                      <div>
                        <p className="font-semibold text-gray-900">Mercado Pago</p>
                        <p className="text-sm text-gray-600">Cartão à vista, PIX - Processamento seguro</p>
                      </div>
                    </label>
                  </div>
                </div>

                <div className="mt-6 flex justify-between">
                  <button
                    onClick={etapaAnterior}
                    className="px-6 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50"
                  >
                    Voltar
                  </button>
                  <button
                    onClick={proximaEtapa}
                    disabled={!validarEtapa3() || processandoPagamento}
                    className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center"
                  >
                    {processandoPagamento && (
                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                    )}
                    {processandoPagamento ? 'Processando Pagamento...' : 'Continuar'}
                  </button>
                </div>
              </div>
            )}

            {/* Etapa 4: Confirmação */}
            {etapaAtual === 4 && (
              <div className="bg-white rounded-lg shadow p-6">
                <div className="flex items-center mb-6">
                  <CheckCircleIcon className="h-6 w-6 text-blue-600 mr-3" />
                  <h2 className="text-xl font-semibold text-gray-900">
                    Confirmar Pedido
                  </h2>
                </div>

                {/* Dados de Entrega */}
                <div className="mb-6">
                  <h3 className="font-semibold text-gray-900 mb-3">Dados de Entrega</h3>
                  <div className="bg-gray-50 p-4 rounded-lg space-y-2">
                    <p className="text-gray-800"><strong className="text-gray-900">Nome:</strong> {dadosEntrega.nome}</p>
                    <p className="text-gray-800"><strong className="text-gray-900">Telefone:</strong> {dadosEntrega.telefone}</p>
                    <p className="text-gray-800"><strong className="text-gray-900">Endereço:</strong> {dadosEntrega.endereco}</p>
                    <p className="text-gray-800"><strong className="text-gray-900">Cidade:</strong> {dadosEntrega.cidade} - {dadosEntrega.estado}</p>
                    <p className="text-gray-800"><strong className="text-gray-900">CEP:</strong> {dadosEntrega.cep}</p>
                    {dadosEntrega.complemento && (
                      <p className="text-gray-800"><strong className="text-gray-900">Complemento:</strong> {dadosEntrega.complemento}</p>
                    )}
                  </div>
                </div>

                {/* Dados de Frete */}
                <div className="mb-6">
                  <h3 className="font-semibold text-gray-900 mb-3">Frete Escolhido</h3>
                  <div className="bg-gray-50 p-4 rounded-lg space-y-2">
                    <p className="text-gray-800"><strong className="text-gray-900">Tipo:</strong> {dadosFrete?.tipoFrete === 'gratis' ? 'Grátis' : 'Padrão'}</p>
                    <p className="text-gray-800"><strong className="text-gray-900">Valor:</strong> {dadosFrete?.valor === 0 ? 'Grátis' : formatarPreco(dadosFrete?.valor || 0)}</p>
                    <p className="text-gray-800"><strong className="text-gray-900">Prazo:</strong> {dadosFrete?.prazo || 'Até 5 dias úteis'}</p>
                  </div>
                </div>

                {/* Dados de Pagamento */}
                <div className="mb-6">
                  <h3 className="font-semibold text-gray-900 mb-3">Forma de Pagamento</h3>
                  <div className="bg-gray-50 p-4 rounded-lg space-y-2">
                    <p className="text-gray-800"><strong className="text-gray-900">Método:</strong> Mercado Pago</p>
                    <p className="text-gray-800"><strong className="text-gray-900">Opções:</strong> Cartão à vista, PIX</p>
                    <p className="text-gray-800"><strong className="text-gray-900">Valor:</strong> {formatarPreco(calcularValorTotal())}</p>
                  </div>
                </div>

                {/* Status do Pagamento */}
                {pagamentoId && (
                  <div className="mb-6">
                    <h3 className="font-semibold text-gray-900 mb-3">Status do Pagamento</h3>
                    <div className="bg-green-50 border border-green-200 p-4 rounded-lg">
                      <div className="flex items-center">
                        <CheckCircleIcon className="h-5 w-5 text-green-500 mr-2" />
                        <div>
                          <p className="text-green-800 font-medium">Pagamento aprovado com sucesso!</p>
                          <p className="text-green-700 text-sm mt-1">
                            Status: <strong>Aprovado</strong> ✅ - Pagamento confirmado via Mercado Pago
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                )}

                {/* Status da Fatura */}
                {faturaId && (
                  <div className="mb-6">
                    <h3 className="font-semibold text-gray-900 mb-3">Fatura</h3>
                    <div className="bg-green-50 border border-green-200 p-4 rounded-lg">
                      <div className="flex items-center">
                        <DocumentTextIcon className="h-5 w-5 text-green-500 mr-2" />
                        <div>
                          <p className="text-green-800 font-medium">Fatura paga com sucesso!</p>

                          <p className="text-green-700 text-sm">
                            Status: <strong>Pago</strong> ✅
                          </p>
                          <p className="text-green-700 text-sm">
                            � Pagamento processado com sucesso
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                )}

                {/* Status de Processamento da Fatura */}
                {processandoFatura && (
                  <div className="mb-6">
                    <h3 className="font-semibold text-gray-900 mb-3">Processando Fatura</h3>
                    <div className="bg-yellow-50 border border-yellow-200 p-4 rounded-lg">
                      <div className="flex items-center">
                        <ClockIcon className="h-5 w-5 text-yellow-500 mr-2 animate-spin" />
                        <div>
                          <p className="text-yellow-800 font-medium">Gerando fatura...</p>
                          <p className="text-yellow-700 text-sm mt-1">
                            Por favor, aguarde enquanto criamos sua fatura
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                )}

                {/* Status do Ajuste de Estoque */}
                {processandoEstoque && (
                  <div className="mb-6">
                    <h3 className="font-semibold text-gray-900 mb-3">Ajustando Estoque</h3>
                    <div className="bg-blue-50 border border-blue-200 p-4 rounded-lg">
                      <div className="flex items-center">
                        <ClockIcon className="h-5 w-5 text-blue-500 mr-2 animate-spin" />
                        <div>
                          <p className="text-blue-800 font-medium">Ajustando estoque dos produtos...</p>
                          <p className="text-blue-700 text-sm mt-1">
                            Atualizando quantidades disponíveis no estoque
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                )}

                {/* Status do Estoque Ajustado */}
                {estoqueAjustado && !processandoEstoque && (
                  <div className="mb-6">
                    <h3 className="font-semibold text-gray-900 mb-3">Estoque</h3>
                    <div className="bg-purple-50 border border-purple-200 p-4 rounded-lg">
                      <div className="flex items-center">
                        <CheckCircleIcon className="h-5 w-5 text-purple-500 mr-2" />
                        <div>
                          <p className="text-purple-800 font-medium">Estoque ajustado com sucesso!</p>
                          <p className="text-purple-700 text-sm mt-1">
                            📦 Quantidades dos produtos atualizadas no estoque
                          </p>
                          <p className="text-purple-700 text-sm">
                            ✅ Produtos reservados para sua compra
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                )}

                {/* Status de Processamento da Entrega */}
                {processandoEntrega && (
                  <div className="mb-6">
                    <h3 className="font-semibold text-gray-900 mb-3">Criando Entrega</h3>
                    <div className="bg-green-50 border border-green-200 p-4 rounded-lg">
                      <div className="flex items-center">
                        <TruckIcon className="h-5 w-5 text-green-500 mr-2 animate-pulse" />
                        <div>
                          <p className="text-green-800 font-medium">Organizando sua entrega...</p>
                          <p className="text-green-700 text-sm mt-1">
                            Gerando código de rastreamento e agendando a entrega
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                )}

                {/* Status da Entrega Criada */}
                {entregaId && !processandoEntrega && (
                  <div className="mb-6">
                    <h3 className="font-semibold text-gray-900 mb-3">Entrega</h3>
                    <div className="bg-green-50 border border-green-200 p-4 rounded-lg">
                      <div className="flex items-center">
                        <TruckIcon className="h-5 w-5 text-green-500 mr-2" />
                        <div>
                          <p className="text-green-800 font-medium">Entrega criada com sucesso!</p>
                          <p className="text-green-700 text-sm mt-1">
                            🚚 Sua entrega foi registrada no sistema
                          </p>
                          <p className="text-green-700 text-sm">
                            📦 Acompanhe o status na seção "Entregas"
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                )}

                <div className="mt-6 flex justify-between">
                  <button
                    onClick={etapaAnterior}
                    className="px-6 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50"
                  >
                    Voltar
                  </button>

                  {/* Botão específico para Mercado Pago */}
                  {dadosPagamento.metodo === 'mercadopago' ? (
                    <div className="flex-1 ml-4">
                      <MercadoPagoPaymentBrick
                        pedidoId={pedidoId || ''}
                        valorTotal={calcularValorTotal()}
                        faturaId={faturaId}
                        dadosComprador={{
                          nome: dadosEntrega.nome,
                          email: user?.email
                        }}
                        onProcessingChange={(status) => setProcessandoMercadoPago(status)}
                        onSuccess={(payment) => {
                          const paymentId = payment?.id
                          const status = payment?.status

                          if (status === 'approved') {
                            router.push(`/pagamento/sucesso?payment_id=${paymentId}&external_reference=${pedidoId}`)
                          } else {
                            router.push(`/pagamento/mercadopago/pendente?payment_id=${paymentId}&external_reference=${pedidoId}&status=${status}`)
                          }
                        }}
                        onError={(errorMessage) => {
                          console.error('❌ [CHECKOUT] Mercado Pago - Erro:', errorMessage)
                          toast.error(errorMessage || 'Erro ao processar pagamento via Mercado Pago')
                        }}
                      />
                    </div>
                  ) : (
                    <button
                      onClick={finalizarPedido}
                      disabled={processandoPedido || processandoFatura || processandoEstoque || processandoEntrega}
                      className="px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center"
                    >
                      {processandoPedido ? (
                        <>
                          <ClockIcon className="h-5 w-5 mr-2 animate-spin" />
                          {processandoFatura ? 'Criando fatura...' :
                            processandoEstoque ? 'Ajustando estoque...' :
                              processandoEntrega ? 'Criando entrega...' :
                                'Processando...'}
                        </>
                      ) : (
                        <>
                          <CheckCircleIcon className="h-5 w-5 mr-2" />
                          Finalizar Pedido
                        </>
                      )}
                    </button>
                  )}
                </div>
              </div>
            )}
          </div>

          {/* Resumo do pedido */}
          <div className="lg:col-span-1">
            <div className="bg-white rounded-lg shadow p-6 sticky top-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">
                Resumo do Pedido
              </h3>

              {/* Indicador de dados atualizados */}
              {dadosCarrinhoAtualizados && (
                <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg">
                  <div className="flex items-center">
                    <CheckCircleIcon className="h-5 w-5 text-green-500 mr-2" />
                    <div>
                      <p className="text-green-800 font-medium text-sm">Dados Atualizados!</p>
                      <p className="text-green-700 text-xs mt-1">
                        Pedido sincronizado com as modificações do carrinho
                      </p>
                    </div>
                  </div>
                </div>
              )}

              {/* Informações do pedido se disponível */}
              {dadosPedido && (
                <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm font-medium text-blue-800">Status:</span>
                    <span className={`text-sm capitalize px-2 py-1 rounded-full ${dadosPedido.status === 'aprovado' ? 'bg-green-100 text-green-800' :
                      dadosPedido.status === 'pendente' ? 'bg-yellow-100 text-yellow-800' :
                        dadosPedido.status === 'confirmado' ? 'bg-blue-100 text-blue-800' :
                          'bg-gray-100 text-gray-800'
                      }`}>
                      {dadosPedido.status || 'Pendente'}
                    </span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-medium text-blue-800">Valor:</span>
                    <span className="text-sm text-blue-700 font-semibold">
                      R$ {dadosPedido['valor-total']?.toFixed(2) || '0,00'}
                    </span>
                  </div>
                </div>
              )}

              {/* Loading state */}
              {carregandoPedido && (
                <div className="mb-4 p-3 bg-gray-50 border border-gray-200 rounded-lg">
                  <div className="flex items-center justify-center">
                    <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600 mr-2"></div>
                    <span className="text-sm text-gray-600">Carregando dados do pedido...</span>
                  </div>
                </div>
              )}

              {/* Lista de produtos */}
              <div className="space-y-3 mb-4">
                {/* Loading state para produtos */}
                {carregandoProdutos && (
                  <div className="p-4 bg-gray-50 border border-gray-200 rounded-lg">
                    <div className="flex items-center justify-center">
                      <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600 mr-2"></div>
                      <span className="text-sm text-gray-600">Carregando produtos...</span>
                    </div>
                  </div>
                )}

                {/* Mostrar produtos do pedido quando disponível */}
                {produtosPedido.length > 0 ? (
                  produtosPedido.map((item, index) => (
                    <div key={item.produto.id || index} className="flex justify-between items-center py-2 border-b border-gray-100 last:border-b-0">
                      <div className="flex-1">
                        <p className="text-sm font-medium text-gray-900 truncate">
                          {item.produto.nome || item.produto.descricao || 'Nome não disponível'}
                        </p>
                        <p className="text-xs text-gray-500 mt-1">
                          Qtd: {item.quantidade}
                        </p>
                      </div>
                      <div className="text-right ml-2">
                        <p className="text-sm font-medium text-gray-900">
                          {formatarPreco(((item.produto as any).preco_final || 0) * item.quantidade)}
                        </p>
                        <p className="text-xs text-gray-500">
                          {formatarPreco((item.produto as any).preco_final || 0)} cada
                        </p>
                      </div>
                    </div>
                  ))
                ) : (
                  /* Fallback para produtos do carrinho local */
                  itens.map((item) => (
                    <div key={item.produto.id} className="flex justify-between items-center py-2 border-b border-gray-100 last:border-b-0">
                      <div className="flex-1">
                        <p className="text-sm font-medium text-gray-900 truncate">
                          {item.produto.nome || item.produto.descricao || 'Produto'}
                        </p>
                        <p className="text-xs text-gray-500">
                          Qtd: {item.quantidade}
                        </p>
                      </div>
                      <p className="text-sm font-medium text-gray-900 ml-2">
                        {formatarPreco(((item.produto as any).preco_final || 0) * item.quantidade)}
                      </p>
                    </div>
                  ))
                )}

                {/* Mensagem quando não há produtos */}
                {!carregandoProdutos && produtosPedido.length === 0 && itens.length === 0 && (
                  <div className="p-4 bg-gray-50 border border-gray-200 rounded-lg text-center">
                    <p className="text-sm text-gray-600">Nenhum produto encontrado</p>
                  </div>
                )}
              </div>

              <div className="border-t pt-4">
                <div className="flex justify-between items-center mb-2">
                  <span className="text-sm text-gray-600">Subtotal:</span>
                  <span className="text-sm text-gray-900">{formatarPreco(valorTotal)}</span>
                </div>
                <div className="flex justify-between items-center mb-2">
                  <span className="text-sm text-gray-600">Frete:</span>
                  <span className={`text-sm ${dadosFrete?.valor === 0 ? 'text-green-600' : 'text-gray-900'}`}>
                    {dadosFrete ? (dadosFrete.valor === 0 ? 'Grátis' : formatarPreco(dadosFrete.valor)) : 'Calculando...'}
                  </span>
                </div>
                <div className="border-t pt-2">
                  <div className="flex justify-between items-center">
                    <span className="text-lg font-semibold text-gray-900">Total:</span>
                    <span className="text-lg font-semibold text-blue-600">{formatarPreco(calcularValorTotal())}</span>
                  </div>
                </div>
              </div>

              {/* Informações de entrega */}
              {dadosFrete && (
                <div className="mt-4 p-3 bg-blue-50 rounded-lg">
                  <div className="flex items-center text-blue-800">
                    <TruckIcon className="h-5 w-5 mr-2" />
                    <span className="text-sm font-medium">
                      {dadosFrete.tipoFrete === 'gratis' ? 'Entrega Grátis' : 'Entrega Selecionada'}
                    </span>
                  </div>
                  <p className="text-xs text-blue-600 mt-1">
                    Prazo de entrega: {dadosFrete.prazo || '5-7 dias úteis'}
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}

export default CheckoutPage