import React, { useState, useEffect } from 'react';
import { 
  FiPlus, 
  FiEdit, 
  FiTrash2, 
  FiShoppingCart,
  FiCalendar,
  FiDollarSign,
  FiUser,
  FiEye,
  FiMessageSquare,
  FiCreditCard,
  FiSearch
} from 'react-icons/fi';
import { vendasAPI, clientesAPI, produtosAPI } from '../services/api';
import ViewToggle from '../components/ViewToggle';
import ChatWhatsApp from '../components/ChatWhatsApp';
import toast from 'react-hot-toast';
import '../styles/vendas-melhorias.css';
import '../styles/pix-integration.css';

const Vendas = () => {

const ZONA_HORARIA_BRASIL = 'America/Sao_Paulo';

const parseDate = (valor) => {
  if (!valor) return null;

  if (valor instanceof Date && !isNaN(valor)) return valor;

  if (typeof valor === 'number') {
    const data = new Date(valor);
    return isNaN(data) ? null : data;
  }

  if (typeof valor === 'string') {
    const normalizada = valor.replace(' ', 'T');
    let data = new Date(normalizada);
    if (!isNaN(data)) return data;

    const partes = normalizada.split('-');
    if (partes.length === 3) {
      const [ano, mes, dia] = partes.map(p => parseInt(p, 10));
      if (ano && mes && dia) {
        data = new Date(ano, mes - 1, dia);
        if (!isNaN(data)) return data;
      }
    }
  }

  return null;
};

const getDataAtualISO = () => {
  // Obter data/hora atual no timezone de Brasília
  const agora = new Date();
  const opcoes = {
    timeZone: ZONA_HORARIA_BRASIL,
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  };
  
  const formatador = new Intl.DateTimeFormat('pt-BR', opcoes);
  const partes = formatador.formatToParts(agora);
  
  const dia = partes.find(p => p.type === 'day').value;
  const mes = partes.find(p => p.type === 'month').value;
  const ano = partes.find(p => p.type === 'year').value;
  
  // Retornar no formato YYYY-MM-DD
  return `${ano}-${mes}-${dia}`;
};

const formatarDataTabela = (valor) => {
  if (!valor) return 'Sem data';

  if (typeof valor === 'string') {
    const normalizada = valor.trim();
    const [parteData] = normalizada.split('T');

    if (/^\d{4}-\d{2}-\d{2}$/.test(parteData)) {
      const [ano, mes, dia] = parteData.split('-');
      return `${dia}/${mes}/${ano}`;
    }
  }

  const data = parseDate(valor);
  if (data) {
    return new Intl.DateTimeFormat('pt-BR', { timeZone: ZONA_HORARIA_BRASIL }).format(data);
  }

  const dataNormalizada = valor.toString();
  const partes = dataNormalizada.split('-');
  if (partes.length === 3) {
    const [ano, mes, dia] = partes.map(p => p.padStart(2, '0'));
    return `${dia}/${mes}/${ano}`;
  }

  return valor;
};

const formatarDataHoraCompleta = (valor) => {
  if (!valor) return 'Sem registro';
  const data = parseDate(valor);
  if (!data) return valor;
  return new Intl.DateTimeFormat('pt-BR', {
    timeZone: ZONA_HORARIA_BRASIL,
    dateStyle: 'short',
    timeStyle: 'short'
  }).format(data);
};

const formatarHoraBrasil = (valor) => {
  const data = parseDate(valor);
  if (!data) return '--:--';
  return new Intl.DateTimeFormat('pt-BR', {
    timeZone: ZONA_HORARIA_BRASIL,
    hour: '2-digit',
    minute: '2-digit'
  }).format(data);
};

  const getLocalDateString = () => getDataAtualISO();

  const [vendas, setVendas] = useState([]);
  const [clientes, setClientes] = useState([]);
  const [produtos, setProdutos] = useState([]);
  const [variacoes, setVariacoes] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [viewMode, setViewMode] = useState('list');
  const [showModal, setShowModal] = useState(false);
  const [editingSale, setEditingSale] = useState(null);
  const [showViewModal, setShowViewModal] = useState(false);
  const [showWhatsAppModal, setShowWhatsAppModal] = useState(false);
  const [selectedVenda, setSelectedVenda] = useState(null);
  const [whatsappMessage, setWhatsappMessage] = useState('');
  const [showChatModal, setShowChatModal] = useState(false);
  const [selectedCliente, setSelectedCliente] = useState(null);
  
  // Estados PIX
  const [showPixModal, setShowPixModal] = useState(false);
  const [pixData, setPixData] = useState(null);
  const [loadingPix, setLoadingPix] = useState(false);
  const [pixTimer, setPixTimer] = useState(null);
  const [enviandoWhatsapp, setEnviandoWhatsapp] = useState(false);
  
  // Estados Parcelas
  const [parcelas, setParcelas] = useState([]);
  const [selectedParcela, setSelectedParcela] = useState(null);
  const [vendasComParcelas, setVendasComParcelas] = useState([]);

  const [formData, setFormData] = useState({
    cliente_id: '',
    tipo_pagamento: 'vista',
    valor_total: 0,
    desconto: 0,
    parcelas: 1,
    valor_parcela: 0,
    data_venda: getLocalDateString(),
    data_primeiro_vencimento: getLocalDateString(),
    data_vencimento: getLocalDateString(),
    observacoes: '',
    itens: [],
    parcelas_detalhes: []
  });

  const [novoItem, setNovoItem] = useState({
    produto_id: '',
    produto_variacao_id: '',
    quantidade: 1,
    valor_unitario: 0
  });
  
  useEffect(() => {
    carregarDados();
  }, []);

  const carregarDados = async () => {
    setLoading(true);
    try {
      const [vendasResponse, clientesResponse, produtosResponse] = await Promise.all([
        vendasAPI.listar(),
        clientesAPI.listar(),
        produtosAPI.listar()
      ]);
      
      setVendas(vendasResponse.data);
      setClientes(clientesResponse.data);
      const produtosNormalizados = (produtosResponse.data || []).map(produto => ({
        ...produto,
        nome: produto.nome || produto.descricao || 'Produto sem nome'
      }));
      setProdutos(produtosNormalizados);
      
      // Carregar parcelas para vendas parceladas
      await carregarParcelasDeTodasVendas(vendasResponse.data);
    } catch (error) {
      console.error('Erro ao carregar dados:', error);
      toast.error('Erro ao carregar vendas');
    } finally {
      setLoading(false);
    }
  };

  const carregarParcelasDeTodasVendas = async (vendas) => {
    try {
      const vendasParceladas = vendas.filter(v => v.tipo_pagamento === 'parcelado');
      const vendasComParcelasData = [];
      
      for (const venda of vendasParceladas) {
        try {
          const response = await fetch(`/api/vendas/${venda.id}/parcelas`);
          const parcelas = await response.json();
          vendasComParcelasData.push({
            ...venda,
            parcelas_individuais: parcelas || []
          });
        } catch (err) {
          console.error(`Erro ao carregar parcelas da venda ${venda.id}:`, err);
          vendasComParcelasData.push({
            ...venda,
            parcelas_individuais: []
          });
        }
      }
      
      setVendasComParcelas(vendasComParcelasData);
    } catch (error) {
      console.error('Erro ao carregar parcelas:', error);
    }
  };

  // Função para agrupar vendas com trocas e devoluções no último ID
  const agruparVendasComTrocasEDevolucoes = (vendas) => {
    // Separar vendas originais de trocas/devoluções
    const vendasOriginais = vendas.filter(venda => !venda.eh_troca_devolucao);
    const trocasEDevolucoes = vendas.filter(venda => venda.eh_troca_devolucao);
    
    // Se não há trocas/devoluções, retornar vendas originais
    if (trocasEDevolucoes.length === 0) {
      return vendasOriginais;
    }
    
    // Encontrar o último ID (mais recente)
    const ultimaVenda = vendasOriginais.reduce((ultima, atual) => {
      const dataUltima = new Date(ultima.data_venda);
      const dataAtual = new Date(atual.data_venda);
      return dataAtual > dataUltima ? atual : ultima;
    });
    
    // Agrupar todas as trocas/devoluções na última venda
    const vendasComAgrupamento = vendasOriginais.map(venda => {
      if (venda.id === ultimaVenda.id) {
        return {
          ...venda,
          trocas_devolucoes_agrupadas: trocasEDevolucoes,
          tem_operacoes_agrupadas: trocasEDevolucoes.length > 0,
          total_operacoes: trocasEDevolucoes.length
        };
      }
      return venda;
    });
    
    return vendasComAgrupamento;
  };

  const carregarVariacoes = async (produtoId) => {
    try {
      const response = await produtosAPI.listarVariacoes(produtoId);
      // Filtrar apenas variações com estoque disponível
      const variacoesComEstoque = response.data.filter(variacao => variacao.quantidade > 0);
      setVariacoes(variacoesComEstoque);
      
      if (variacoesComEstoque.length === 0) {
        toast.error('Este produto não possui variações com estoque disponível');
      }
      return variacoesComEstoque;
    } catch (error) {
      console.error('Erro ao carregar variações:', error);
      setVariacoes([]);
      return [];
    }
  };

  

  const handleVariacaoChange = (variacaoId) => {
    const variacao = variacoes.find(v => v.id === variacaoId);
    const produto = produtos.find(p => p.id === novoItem.produto_id);
    
    if (variacao && produto) {
      setNovoItem({
        ...novoItem,
        produto_variacao_id: variacaoId,
        valor_unitario: produto.valor_revenda || 0
      });
    } else {
      setNovoItem({
        ...novoItem,
        produto_variacao_id: variacaoId
      });
    }
  };

  const calcularParcelasDetalhes = (numParcelas, valorTotal, dataInicio) => {
    const valorParcela = valorTotal / numParcelas;
    const parcelas = [];
    
    for (let i = 0; i < numParcelas; i++) {
      const dataVencimento = new Date(dataInicio);
      dataVencimento.setMonth(dataVencimento.getMonth() + i);
      
      parcelas.push({
        numero: i + 1,
        valor: valorParcela,
        data_vencimento: dataVencimento.toISOString().split('T')[0]
      });
    }
    
    return parcelas;
  };

  const handleTipoPagamentoChange = (tipo) => {
    const novoFormData = { ...formData, tipo_pagamento: tipo };
    
    if (tipo === 'parcelado') {
      const valorFinal = formData.valor_total - formData.desconto;
      const parcelas = calcularParcelasDetalhes(
        formData.parcelas, 
        valorFinal, 
        formData.data_primeiro_vencimento
      );
      novoFormData.parcelas_detalhes = parcelas;
    } else {
      novoFormData.parcelas_detalhes = [];
    }
    
    setFormData(novoFormData);
  };

  const handleParcelasChange = (numParcelas) => {
    const valorFinal = formData.valor_total - formData.desconto;
    const parcelas = calcularParcelasDetalhes(
      numParcelas, 
      valorFinal, 
      formData.data_primeiro_vencimento
    );
    
    setFormData({
      ...formData,
      parcelas: numParcelas,
      parcelas_detalhes: parcelas
    });
  };

  const handleDataVencimentoChange = (dataInicio) => {
    if (formData.tipo_pagamento === 'parcelado') {
      const valorFinal = formData.valor_total - formData.desconto;
      const parcelas = calcularParcelasDetalhes(
        formData.parcelas, 
        valorFinal, 
        dataInicio
      );
      
      setFormData({
        ...formData,
        data_primeiro_vencimento: dataInicio,
        parcelas_detalhes: parcelas
      });
    } else {
      setFormData({
        ...formData,
        data_primeiro_vencimento: dataInicio
      });
    }
  };

  const atualizarParcelaIndividual = (index, novaData) => {
    const novasParcelas = [...formData.parcelas_detalhes];
    novasParcelas[index].data_vencimento = novaData;
    
    setFormData({
      ...formData,
      parcelas_detalhes: novasParcelas
    });
  };

  const handleDescontoChange = (novoDesconto) => {
    let novasParcelas = formData.parcelas_detalhes;
    
    // Recalcular parcelas se for parcelado
    if (formData.tipo_pagamento === 'parcelado' && formData.parcelas_detalhes.length > 0) {
      const valorFinal = formData.valor_total - novoDesconto;
      novasParcelas = calcularParcelasDetalhes(
        formData.parcelas,
        valorFinal,
        formData.data_primeiro_vencimento
      );
    }
    
    setFormData({
      ...formData,
      desconto: novoDesconto,
      parcelas_detalhes: novasParcelas
    });
  };

  const gerarIdVenda = () => {
    const agora = new Date();
    const ano = agora.getFullYear();
    const mes = String(agora.getMonth() + 1).padStart(2, '0');
    const dia = String(agora.getDate()).padStart(2, '0');
    const hora = String(agora.getHours()).padStart(2, '0');
    const minuto = String(agora.getMinutes()).padStart(2, '0');
    const segundo = String(agora.getSeconds()).padStart(2, '0');
    
    return `VD${ano}${mes}${dia}${hora}${minuto}${segundo}`;
  };

  const handleViewVenda = async (venda) => {
    try {
      // Buscar detalhes completos da venda
      const response = await vendasAPI.buscarPorId(venda.id);
      setSelectedVenda(response.data);
      
      // Buscar parcelas se for venda parcelada
      if (response.data.tipo_pagamento === 'parcelado') {
        try {
          const parcelasResponse = await fetch(`/api/vendas/${venda.id}/parcelas`);
          const parcelasData = await parcelasResponse.json();
          setParcelas(parcelasData || []);
        } catch (err) {
          console.error('Erro ao carregar parcelas:', err);
          setParcelas([]);
        }
      } else {
        setParcelas([]);
      }
      
      setShowViewModal(true);
    } catch (error) {
      console.error('Erro ao carregar detalhes da venda:', error);
      toast.error('Erro ao carregar detalhes da venda');
    }
  };
  
  const gerarPixParcela = async (vendaContexto, parcelaOriginal) => {
    if (!parcelaOriginal) {
      toast.error('Não foi possível identificar a parcela selecionada.');
      return;
    }

    const vendaReferencia = vendaContexto || selectedVenda;
    if (!vendaReferencia && !parcelaOriginal.venda_id) {
      toast.error('Não foi possível identificar a venda desta parcela.');
      return;
    }

    const numeroParcelaReferencia = parcelaOriginal.numero_parcela || parcelaOriginal.numero;
    const vendaIdReferencia = parcelaOriginal.venda_id || vendaReferencia?.id;

    setLoadingPix(true);

    if (vendaReferencia) {
      setSelectedVenda(vendaReferencia);
    }

    let parcelaProcessada = parcelaOriginal;

    // Garantir que temos o ID real da parcela buscando novamente no backend, se necessário
    if ((!parcelaProcessada.id || parcelaProcessada.id === 'undefined') && vendaIdReferencia) {
      try {
        const parcelasResponse = await fetch(`/api/vendas/${vendaIdReferencia}/parcelas`);
        const parcelasAtualizadas = await parcelasResponse.json();
        const parcelasNormalizadas = parcelasAtualizadas || [];

        setParcelas(parcelasNormalizadas);
        setVendasComParcelas(prev => prev.map(venda =>
          venda.id === vendaIdReferencia
            ? { ...venda, parcelas_individuais: parcelasNormalizadas }
            : venda
        ));

        const parcelaEncontrada = parcelasNormalizadas.find(p =>
          (p.numero_parcela === numeroParcelaReferencia || p.numero === numeroParcelaReferencia) &&
          (!parcelaProcessada.valor || parseFloat(p.valor) === parseFloat(parcelaProcessada.valor))
        );

        if (parcelaEncontrada) {
          parcelaProcessada = parcelaEncontrada;
        }
      } catch (erroRecarregar) {
        console.error('Erro ao recarregar parcelas antes de gerar PIX:', erroRecarregar);
      }
    }

    if (!parcelaProcessada?.id || parcelaProcessada.id === 'undefined') {
      toast.error('Não foi possível localizar os dados completos desta parcela.');
      setLoadingPix(false);
      return;
    }

    // Validar se a venda ou parcela tem valor zerado (devolução total)
    if (vendaReferencia && parseFloat(vendaReferencia.valor_total) === 0) {
      toast.error('Não é possível gerar PIX para vendas com devolução total (valor zerado)');
      setLoadingPix(false);
      return;
    }

    if (parseFloat(parcelaProcessada.valor) === 0) {
      toast.error('Não é possível gerar PIX para parcelas com valor zerado');
      setLoadingPix(false);
      return;
    }

    setSelectedParcela(parcelaProcessada);
    
    try {
      const response = await fetch(`/api/parcelas/${parcelaProcessada.id}/gerar-pix`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          venda_id: vendaIdReferencia,
          numero_parcela: numeroParcelaReferencia
        })
      });
      
      const data = await response.json();
      
      if (data.success) {
        setPixData(data);
        setShowPixModal(true);
        toast.success('PIX da parcela gerado com sucesso!');
        
        if (vendaIdReferencia) {
          try {
            const parcelasResponse = await fetch(`/api/vendas/${vendaIdReferencia}/parcelas`);
            const parcelasData = await parcelasResponse.json();
            const parcelasNormalizadas = parcelasData || [];

            setParcelas(parcelasNormalizadas);
            setVendasComParcelas(prev => prev.map(venda =>
              venda.id === vendaIdReferencia
                ? { ...venda, parcelas_individuais: parcelasNormalizadas }
                : venda
            ));
          } catch (atualizacaoErro) {
            console.error('Erro ao atualizar parcelas após gerar PIX:', atualizacaoErro);
          }
        }
      } else {
        toast.error(data.error || 'Erro ao gerar PIX da parcela');
      }
    } catch (error) {
      console.error('Erro ao gerar PIX da parcela:', error);
      toast.error('Erro ao gerar PIX da parcela');
    } finally {
      setLoadingPix(false);
    }
  };
  
  const enviarPixParcelaPorWhatsapp = async () => {
    if (!pixData || !selectedParcela || !selectedVenda) return;

    const cliente = clientes.find(c => c.id === selectedVenda.cliente_id);
    if (!cliente || !cliente.whatsapp) {
      toast.error('Cliente não possui WhatsApp cadastrado.');
      return;
    }

    setEnviandoWhatsapp(true);
    try {
      const response = await fetch(`/api/parcelas/${selectedParcela.id}/enviar-whatsapp`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          telefone: cliente.whatsapp,
          valor: pixData.transaction_amount,
          qr_code_base64: pixData.qr_code_base64,
          cliente_nome: cliente.nome_completo
        })
      });

      const result = await response.json();

      if (response.ok) {
        toast.success(result.message || 'PIX da parcela enviado com sucesso!');
      } else {
        throw new Error(result.error || 'Erro desconhecido');
      }
    } catch (error) {
      console.error('Erro ao enviar PIX por WhatsApp:', error);
      toast.error(`Falha ao enviar PIX: ${error.message}`);
    } finally {
      setEnviandoWhatsapp(false);
    }
  };

  const handleWhatsApp = async (venda) => {
    setSelectedVenda(venda);
    
    console.log('🔍 DEBUG WhatsApp - Tipo de pagamento:', venda.tipo_pagamento);
    console.log('🔍 DEBUG WhatsApp - Venda completa:', venda);
    
    let infoPagamento = '';
    let infoVencimentos = '';
    
    const tipoPagamento = venda.tipo_pagamento?.toLowerCase()?.trim();
    
    // À Vista
    if (tipoPagamento === 'vista') {
      infoPagamento = '💳 Pagamento: À vista';
    }
    // A Prazo
    else if (tipoPagamento === 'prazo') {
      infoPagamento = '💳 Pagamento: A prazo';
      if (venda.data_vencimento) {
        infoVencimentos = `\n📆 Vencimento: ${formatarDataTabela(venda.data_vencimento)}`;
      }
    }
    // Parcelado
    else if (tipoPagamento === 'parcelado') {
      infoPagamento = `💳 Pagamento: ${venda.parcelas}x de R$ ${parseFloat(venda.valor_parcela || (venda.valor_total / venda.parcelas)).toFixed(2)}`;
      
      // Buscar parcelas da venda
      try {
        const response = await fetch(`/api/vendas/${venda.id}/parcelas`);
        const parcelasData = await response.json();
        
        if (parcelasData && parcelasData.length > 0) {
          infoVencimentos = '\n\n📅 Vencimentos:';
          parcelasData.forEach(parcela => {
            infoVencimentos += `\n  ${parcela.numero_parcela}ª parcela: ${formatarDataTabela(parcela.data_vencimento)} - R$ ${parseFloat(parcela.valor).toFixed(2)}`;
          });
        }
      } catch (error) {
        console.error('Erro ao buscar parcelas para mensagem:', error);
      }
    }
    else {
      // Tipo desconhecido - mostrar o que veio
      infoPagamento = `💳 Pagamento: ${venda.tipo_pagamento || 'Não informado'}`;
    }
    
    const mensagemPadrao = `Olá ${venda.cliente_nome || 'Cliente'}! 👋

Sua compra foi registrada com sucesso! 💙

Confira os detalhes abaixo:
📅 Data da compra: ${formatarDataTabela(venda.data_venda)}
💰 Valor total: R$ ${parseFloat(venda.valor_total).toFixed(2)}
${infoPagamento}${infoVencimentos}

Agradecemos pela sua preferência! 😊
Conte sempre com a Liberi Kids - Moda Infantil 👕👗`;
    
    setWhatsappMessage(mensagemPadrao);
    setShowWhatsAppModal(true);
  };

  const enviarWhatsApp = async () => {
    if (!selectedVenda?.cliente_whatsapp && !selectedVenda?.cliente_telefone) {
      toast.error('Cliente não possui WhatsApp ou telefone cadastrado');
      return;
    }
    
    try {
      const telefone = selectedVenda.cliente_whatsapp || selectedVenda.cliente_telefone;
      
      const response = await fetch('/api/whatsapp/enviar', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          telefone, 
          mensagem: whatsappMessage,
          clienteNome: selectedVenda.cliente_nome
        })
      });

      const result = await response.json();

      if (response.ok) {
        toast.success('Mensagem enviada com sucesso!');
        setShowWhatsAppModal(false);
      } else {
        throw new Error(result.error || 'Erro ao enviar mensagem');
      }
    } catch (error) {
      console.error('Erro ao enviar WhatsApp:', error);
      toast.error(`Erro ao enviar mensagem: ${error.message}`);
    }
  };

  const abrirChat = (venda) => {
    if (!venda?.cliente_whatsapp && !venda?.cliente_telefone) {
      toast.error('Cliente não possui WhatsApp ou telefone cadastrado');
      return;
    }
    
    const cliente = {
      nome: venda.cliente_nome,
      telefone: (venda.cliente_whatsapp || venda.cliente_telefone).replace(/\D/g, ''),
      id: venda.cliente_id
    };
    
    setSelectedCliente(cliente);
    setShowChatModal(true);
  };

  // Funções PIX
  const enviarWhatsappPix = async ({ telefone, mensagem }) => {
    if (!telefone || !mensagem) return false;
    try {
      const response = await fetch('/api/chat/enviar', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ telefone, mensagem, clienteNome: selectedVenda?.cliente_nome || 'Cliente' })
      });
      const data = await response.json();
      if (!response.ok) {
        console.error('Erro ao enviar WhatsApp PIX:', data.error);
        return false;
      }
      return true;
    } catch (error) {
      console.error('Erro ao enviar WhatsApp PIX:', error);
      return false;
    }
  };

  const gerarPix = async (venda) => {
    setLoadingPix(true);
    try {
      const response = await fetch('/api/pix/gerar', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          valor: venda.valor_total,
          descricao: `Venda #${venda.id_venda} - Liberi Kids`,
          cliente_email: venda.cliente_email,
          cliente_nome: venda.cliente_nome,
          cliente_cpf: venda.cliente_cpf,
          venda_id: venda.id
        })
      });
      
      const data = await response.json();
      
      if (data.success) {
        setPixData(data);
        setSelectedVenda(venda);
        setShowPixModal(true);
        
        // Iniciar timer de expiração
        if (data.expiration_date) {
          const expirationTime = new Date(data.expiration_date).getTime();
          const now = new Date().getTime();
          const timeLeft = expirationTime - now;
          
          if (timeLeft > 0) {
            const timer = setTimeout(() => {
              setPixTimer(null);
              toast.error('PIX expirado');
            }, timeLeft);
            setPixTimer(timer);
          }
        }
        
        toast.success('PIX gerado com sucesso!');
      } else {
        toast.error(data.error || 'Erro ao gerar PIX');
      }
    } catch (error) {
      console.error('Erro ao gerar PIX:', error);
      toast.error('Erro ao gerar PIX');
    }
    setLoadingPix(false);
  };

  const enviarPixPorWhatsapp = async () => {
    if (!pixData || !selectedVenda) return;

    const cliente = clientes.find(c => c.id === selectedVenda.cliente_id);
    if (!cliente || !cliente.whatsapp) {
      toast.error('Cliente não possui WhatsApp cadastrado.');
      return;
    }

    setEnviandoWhatsapp(true);
    try {
      const response = await fetch('/api/pix/enviar-whatsapp', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          telefone: cliente.whatsapp,
          valor: pixData.transaction_amount,
          qr_code_base64: pixData.qr_code_base64,
          qr_code: pixData.pix_copy_paste,
          nome_cliente: cliente.nome_completo
        })
      });

      const result = await response.json();

      if (response.ok) {
        toast.success(result.message || 'PIX enviado com sucesso!');
      } else {
        throw new Error(result.error || 'Erro desconhecido');
      }
    } catch (error) {
      console.error('Erro ao enviar PIX por WhatsApp:', error);
      toast.error(`Falha ao enviar PIX: ${error.message}`);
    } finally {
      setEnviandoWhatsapp(false);
    }
  };

  const copiarPixCode = () => {
    if (pixData?.pix_copy_paste) {
      navigator.clipboard.writeText(pixData.pix_copy_paste);
      toast.success('Código PIX copiado!');
    }
  };

  const consultarStatusPix = async () => {
    if (!pixData?.payment_id) return;
    
    try {
      const response = await fetch(`/api/pix/status/${pixData.payment_id}`);
      const data = await response.json();
      
      if (data.success) {
        if (data.status === 'approved') {
          toast.success('Pagamento confirmado!');
          setShowPixModal(false);
          carregarDados(); // Recarregar vendas para atualizar status
        } else if (data.status === 'rejected' || data.status === 'cancelled') {
          toast.error('Pagamento cancelado');
          setShowPixModal(false);
        }
      }
    } catch (error) {
      console.error('Erro ao consultar status PIX:', error);
    }
  };

  const fecharPixModal = () => {
    setShowPixModal(false);
    setPixData(null);
    if (pixTimer) {
      clearTimeout(pixTimer);
      setPixTimer(null);
    }
  };

  // Consultar status PIX periodicamente quando modal estiver aberto
  useEffect(() => {
    let interval;
    if (showPixModal && pixData?.payment_id) {
      interval = setInterval(consultarStatusPix, 5000); // Consultar a cada 5 segundos
    }
    return () => {
      if (interval) clearInterval(interval);
    };
  }, [showPixModal, pixData?.payment_id]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (formData.itens.length === 0) {
      toast.error('Adicione pelo menos um item à venda');
      return;
    }

    try {
      const valorTotalNumber = parseFloat(formData.valor_total) || 0;
      const descontoNumber = parseFloat(formData.desconto) || 0;
      const parcelasNumber = formData.tipo_pagamento === 'parcelado'
        ? parseInt(formData.parcelas) || 1
        : 1;
      const valorParcelaCalculado = formData.tipo_pagamento === 'parcelado'
        ? (valorTotalNumber - descontoNumber) / parcelasNumber
        : valorTotalNumber - descontoNumber;

      const vendaData = {
        ...formData,
        id_venda: editingSale ? editingSale.id_venda : gerarIdVenda(),
        valor_parcela: valorParcelaCalculado
      };

      if (editingSale) {
        const response = await vendasAPI.atualizar(editingSale.id, vendaData);
        toast.success(response.data?.message || 'Venda atualizada com sucesso!');
      } else {
        const response = await vendasAPI.criar(vendaData);
        toast.success(response.data?.message || 'Venda registrada com sucesso!');

        if (response.data?.pix?.payment_id) {
          const pixResponse = response.data.pix;
          const vendaCriada = response.data?.venda || {};
          const clienteRelacionada = clientes.find((c) => c.id === (vendaCriada.cliente_id || vendaData.cliente_id)) || {};
          setPixData(pixResponse);
          setSelectedParcela(null);
          setSelectedVenda({
            ...vendaCriada,
            cliente_id: vendaCriada.cliente_id || vendaData.cliente_id,
            cliente_nome:
              vendaCriada.cliente_nome || clienteRelacionada.nome_completo || '',
            cliente_whatsapp:
              vendaCriada.cliente_whatsapp || clienteRelacionada.whatsapp || '',
            cliente_telefone:
              vendaCriada.cliente_telefone || clienteRelacionada.telefone || '',
            valor_total: vendaCriada.valor_total ?? valorTotalNumber,
            desconto: vendaCriada.desconto ?? descontoNumber,
            tipo_pagamento: vendaCriada.tipo_pagamento || vendaData.tipo_pagamento
          });

          if (pixResponse?.expiration_date) {
            const expirationTime = new Date(pixResponse.expiration_date).getTime();
            const now = Date.now();
            const timeLeft = expirationTime - now;

            if (timeLeft > 0) {
              const timer = setTimeout(() => {
                setPixTimer(null);
                toast.error('PIX expirado');
              }, timeLeft);
              setPixTimer(timer);
            }
          }

          setShowPixModal(true);
        }
      }
      
      setShowModal(false);
      setEditingSale(null);
      resetForm();
      carregarDados();
    } catch (error) {
      console.error('Erro ao salvar venda:', error);
      toast.error('Erro ao salvar venda');
    }
  };

  const resetForm = () => {
    setFormData({
      cliente_id: '',
      tipo_pagamento: 'vista',
      valor_total: 0,
      desconto: 0,
      parcelas: 1,
      valor_parcela: 0,
      data_venda: getLocalDateString(),
      data_primeiro_vencimento: getLocalDateString(),
      observacoes: '',
      itens: [],
      parcelas_detalhes: []
    });
    setNovoItem({
      produto_id: '',
      produto_variacao_id: '',
      quantidade: 1,
      valor_unitario: 0
    });
    setVariacoes([]);
  };

  const handleAddItem = () => {
    if (!novoItem.produto_variacao_id || !novoItem.quantidade || !novoItem.valor_unitario) {
      toast.error('Preencha todos os campos do item');
      return;
    }

    const produto = produtos.find(p => p.id === novoItem.produto_id);
    const variacao = variacoes.find(v => v.id === novoItem.produto_variacao_id);
    
    // Validar estoque disponível
    if (!variacao) {
      toast.error('Variação não encontrada');
      return;
    }
    
    if (variacao.quantidade < parseInt(novoItem.quantidade)) {
      toast.error(`Estoque insuficiente! Disponível: ${variacao.quantidade}, solicitado: ${novoItem.quantidade}`);
      return;
    }
    
    // Verificar se já existe este item na venda para somar quantidades
    const itemExistente = formData.itens.find(item => item.produto_variacao_id === novoItem.produto_variacao_id);
    const quantidadeTotal = itemExistente ? itemExistente.quantidade + parseInt(novoItem.quantidade) : parseInt(novoItem.quantidade);
    
    if (quantidadeTotal > variacao.quantidade) {
      toast.error(`Estoque insuficiente! Disponível: ${variacao.quantidade}, total solicitado: ${quantidadeTotal}`);
      return;
    }
    
    const item = {
      ...novoItem,
      id: Date.now(),
      produto_nome: produto?.nome || '',
      variacao_info: `${variacao?.tamanho} - ${variacao?.cor}`,
      valor_total: novoItem.quantidade * novoItem.valor_unitario
    };

    const novosItens = [...formData.itens, item];
    const novoTotal = novosItens.reduce((total, item) => total + item.valor_total, 0);

    // Recalcular parcelas se for parcelado
    let novasParcelas = formData.parcelas_detalhes;
    if (formData.tipo_pagamento === 'parcelado') {
      const valorFinal = novoTotal - formData.desconto;
      novasParcelas = calcularParcelasDetalhes(
        formData.parcelas,
        valorFinal,
        formData.data_primeiro_vencimento
      );
    }

    setFormData({
      ...formData,
      itens: novosItens,
      valor_total: novoTotal,
      parcelas_detalhes: novasParcelas
    });

    setNovoItem({
      produto_id: '',
      produto_variacao_id: '',
      quantidade: 1,
      valor_unitario: 0
    });
    setVariacoes([]);
  };

  const handleRemoveItem = (itemId) => {
    const novosItens = formData.itens.filter(item => item.id !== itemId);
    const novoTotal = novosItens.reduce((total, item) => total + item.valor_total, 0);

    // Recalcular parcelas se for parcelado
    let novasParcelas = formData.parcelas_detalhes;
    if (formData.tipo_pagamento === 'parcelado') {
      const valorFinal = novoTotal - formData.desconto;
      novasParcelas = calcularParcelasDetalhes(
        formData.parcelas,
        valorFinal,
        formData.data_primeiro_vencimento
      );
    }

    setFormData({
      ...formData,
      itens: novosItens,
      valor_total: novoTotal,
      parcelas_detalhes: novasParcelas
    });
  };

  const handleEdit = (venda) => {
    setEditingSale(venda);
    setFormData({
      cliente_id: venda.cliente_id || '',
      tipo_pagamento: venda.tipo_pagamento || 'vista',
      valor_total: venda.valor_total || 0,
      desconto: venda.desconto || 0,
      parcelas: venda.parcelas || 1,
      valor_parcela: venda.valor_parcela || 0,
      data_venda: venda.data_venda || new Date().toISOString().split('T')[0],
      data_primeiro_vencimento: venda.data_primeiro_vencimento || new Date().toISOString().split('T')[0],
      observacoes: venda.observacoes || '',
      itens: venda.venda_itens || [],
      parcelas_detalhes: []
    });
    
    // Carregar itens da venda se existirem
    if (venda.venda_itens && venda.venda_itens.length > 0) {
      const itensFormatados = venda.venda_itens.map((item, index) => ({
        id: item.id || Date.now() + index,
        produto_id: item.produto_id,
        produto_variacao_id: item.variacao_id,
        quantidade: item.quantidade,
        valor_unitario: item.valor_unitario,
        valor_total: item.valor_total || (item.quantidade * item.valor_unitario),
        produto_nome: item.produtos?.nome || 'Produto',
        variacao_info: `${item.produto_variacoes?.tamanho || ''} - ${item.produto_variacoes?.cor || ''}`
      }));
      
      setFormData(prev => ({
        ...prev,
        itens: itensFormatados
      }));
    }
    
    setShowModal(true);
  };

  const handleDelete = async (id) => {
    if (window.confirm('Tem certeza que deseja excluir esta venda?')) {
      try {
        await vendasAPI.deletar(id);
        toast.success('Venda excluída com sucesso!');
        carregarDados();
      } catch (error) {
        console.error('Erro ao excluir venda:', error);
        toast.error('Erro ao excluir venda');
      }
    }
  };

  const filteredVendas = vendas.filter(venda =>
    (venda.cliente_nome && venda.cliente_nome.toLowerCase().includes(searchTerm.toLowerCase())) ||
    (venda.observacoes && venda.observacoes.toLowerCase().includes(searchTerm.toLowerCase()))
  );

  const totalVendas = filteredVendas.reduce((total, venda) => total + parseFloat(venda.valor_total), 0);

  if (loading) {
    return (
      <div className="loading">
        <div>Carregando vendas...</div>
      </div>
    );
  }

  return (
    <div className="vendas fade-in">
      <div className="page-header">
        <div>
          <h1>Vendas</h1>
          <p>Gerencie todas as vendas da loja</p>
        </div>
        <div className="header-actions">
          <ViewToggle 
            viewMode={viewMode} 
            onViewModeChange={setViewMode} 
          />
          <button 
            className="btn btn-primary"
            onClick={() => setShowModal(true)}
          >
            <FiPlus />
            Nova Venda
          </button>
        </div>
      </div>

      {/* Resumo */}
      <div className="sales-summary">
        <div className="summary-card">
          <div className="summary-icon">
            <FiShoppingCart />
          </div>
          <div className="summary-content">
            <div className="summary-value">
              R$ {totalVendas.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}
            </div>
            <div className="summary-label">Total em Vendas</div>
          </div>
        </div>
        <div className="summary-card">
          <div className="summary-icon">
            <FiDollarSign />
          </div>
          <div className="summary-content">
            <div className="summary-value">{filteredVendas.length}</div>
            <div className="summary-label">Vendas Realizadas</div>
          </div>
        </div>
      </div>

      {/* Barra de Pesquisa */}
      <div className="search-box">
        <FiSearch className="search-icon" />
        <input
          type="text"
          placeholder="Pesquisar vendas..."
          className="search-input"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
      </div>

      {/* Lista de Vendas */}
      {filteredVendas.length === 0 ? (
        <div className="empty-state">
          <FiShoppingCart size={48} />
          <h3>Nenhuma venda encontrada</h3>
          <p>Comece registrando sua primeira venda</p>
          <button 
            className="btn btn-primary"
            onClick={() => setShowModal(true)}
          >
            <FiPlus />
            Registrar Venda
          </button>
        </div>
      ) : (
        <div className="sales-table">
          <table className="table">
            <thead>
              <tr>
                <th>ID Venda</th>
                <th>Data</th>
                <th>Cliente</th>
                <th>Produtos</th>
                <th>Parcela/Pagamento</th>
                <th>Valor</th>
                <th>Vencimento</th>
                <th>Status</th>
                <th>Ações</th>
              </tr>
            </thead>
            <tbody>
              {filteredVendas.map((venda) => {
                const vendaComParcelas = vendasComParcelas.find(v => v.id === venda.id);
                const parcelas = vendaComParcelas?.parcelas_individuais || [];
                const ehParcelado = venda.tipo_pagamento === 'parcelado' && parcelas.length > 0;
                
                if (ehParcelado) {
                  // Renderizar linhas para cada parcela + linha de total
                  return (
                    <React.Fragment key={venda.id}>
                      {parcelas.map((parcela, index) => (
                        <tr key={`${venda.id}-parcela-${parcela.id}`} className="parcela-row">
                          {index === 0 && (
                            <>
                              <td rowSpan={parcelas.length + 1}>
                                <div className="sale-id">
                                  <strong>{venda.id_venda || `VD${venda.id.slice(-8)}`}</strong>
                                  {venda.tem_operacoes_agrupadas && (
                                    <div className="operacoes-badge">
                                      <span className="badge badge-info" title={`${venda.total_operacoes} troca(s)/devolução(ões) agrupada(s)`}>
                                        🔄 {venda.total_operacoes}
                                      </span>
                                    </div>
                                  )}
                                </div>
                              </td>
                              <td rowSpan={parcelas.length + 1}>
                                <div className="sale-date">
                                  <FiCalendar className="date-icon" />
                                  {formatarDataTabela(venda.data_venda)}
                                </div>
                              </td>
                              <td rowSpan={parcelas.length + 1}>
                                <div className="sale-client">
                                  <FiUser className="client-icon" />
                                  {venda.cliente_nome || 'Cliente não informado'}
                                </div>
                              </td>
                              <td rowSpan={parcelas.length + 1}>
                                <div className="sale-products">
                                  {venda.itens && venda.itens.length > 0 ? (
                                    <div className="products-summary">
                                      {venda.itens.slice(0, 2).map((item, idx) => (
                                        <div key={idx} className="product-item">
                                          <span className="product-name">{item.produto_nome}</span>
                                          <span className="product-variation">{item.variacao_info}</span>
                                          <span className="product-qty">Qtd: {item.quantidade}</span>
                                        </div>
                                      ))}
                                      {venda.itens.length > 2 && (
                                        <div className="more-products">
                                          +{venda.itens.length - 2} produto(s)
                                        </div>
                                      )}
                                    </div>
                                  ) : (
                                    <span className="no-products">Sem produtos</span>
                                  )}
                                </div>
                              </td>
                            </>
                          )}
                          <td>
                            <div className="payment-info">
                              <span className="badge badge-warning">
                                Parcela {parcela.numero_parcela}/{parcelas.length}
                              </span>
                            </div>
                          </td>
                          <td>
                            <span className="sale-value">
                              R$ {parseFloat(parcela.valor).toLocaleString('pt-BR', { minimumFractionDigits: 2 })}
                            </span>
                          </td>
                          <td>
                            <div className="sale-date">
                              {formatarDataTabela(parcela.data_vencimento)}
                            </div>
                          </td>
                          <td>
                            <span className={`badge ${parcela.status === 'pago' ? 'badge-success' : parcela.status === 'vencida' ? 'badge-danger' : 'badge-warning'}`}>
                              {parcela.status === 'pago' ? '✅ Pago' : 'Em Aberto'}
                            </span>
                          </td>
                          <td>
                            <div className="table-actions">
                              <button 
                                className="btn-icon btn-info"
                                onClick={() => handleViewVenda(venda)}
                                title="Visualizar Detalhes"
                              >
                                <FiEye />
                              </button>
                              <button
                                className="btn-icon btn-pix"
                                onClick={() => gerarPixParcela(venda, parcela)}
                                title="Gerar PIX"
                                disabled={loadingPix || parcela.status === 'pago'}
                              >
                                <FiCreditCard />
                              </button>
                              <div className="whatsapp-buttons">
                                <button 
                                  className="btn-icon btn-success"
                                  onClick={() => abrirChat(venda)}
                                  title="Abrir Chat WhatsApp"
                                >
                                  <FiMessageSquare />
                                </button>
                              </div>
                            </div>
                          </td>
                        </tr>
                      ))}
                      {/* Linha de Total */}
                      <tr className="total-row">
                        <td colSpan="2">
                          <strong>💰 TOTAL</strong>
                        </td>
                        <td>
                          <strong className="sale-value">
                            R$ {parseFloat(venda.valor_total).toLocaleString('pt-BR', { minimumFractionDigits: 2 })}
                          </strong>
                        </td>
                        <td></td>
                        <td>
                          <div className="action-buttons">
                            <button 
                              className="btn-icon btn-danger"
                              onClick={() => handleDelete(venda.id)}
                              title="Excluir venda e todas as parcelas"
                            >
                              <FiTrash2 />
                            </button>
                          </div>
                        </td>
                      </tr>
                    </React.Fragment>
                  );
                } else {
                  // Venda à vista ou sem parcelas - mostrar normal
                  return (
                    <tr key={venda.id}>
                      <td>
                        <div className="sale-id">
                          <strong>{venda.id_venda || `VD${venda.id.slice(-8)}`}</strong>
                          {venda.tem_operacoes_agrupadas && (
                            <div className="operacoes-badge">
                              <span className="badge badge-info" title={`${venda.total_operacoes} troca(s)/devolução(ões) agrupada(s)`}>
                                🔄 {venda.total_operacoes}
                              </span>
                            </div>
                          )}
                        </div>
                      </td>
                      <td>
                        <div className="sale-date">
                          <FiCalendar className="date-icon" />
                          {formatarDataTabela(venda.data_venda)}
                        </div>
                      </td>
                      <td>
                        <div className="sale-client">
                          <FiUser className="client-icon" />
                          {venda.cliente_nome || 'Cliente não informado'}
                        </div>
                      </td>
                      <td>
                        <div className="sale-products">
                          {venda.itens && venda.itens.length > 0 ? (
                            <div className="products-summary">
                              {venda.itens.slice(0, 2).map((item, index) => (
                                <div key={index} className="product-item">
                                  <span className="product-name">{item.produto_nome}</span>
                                  <span className="product-variation">{item.variacao_info}</span>
                                  <span className="product-qty">Qtd: {item.quantidade}</span>
                                </div>
                              ))}
                              {venda.itens.length > 2 && (
                                <div className="more-products">
                                  +{venda.itens.length - 2} produto(s)
                                </div>
                              )}
                            </div>
                          ) : (
                            <span className="no-products">Sem produtos</span>
                          )}
                        </div>
                      </td>
                      <td>
                        <div className="payment-info">
                          <span className="badge badge-success">
                            À Vista
                          </span>
                        </div>
                      </td>
                      <td>
                        <span className="sale-value">
                          R$ {parseFloat(venda.valor_total).toLocaleString('pt-BR', { minimumFractionDigits: 2 })}
                        </span>
                      </td>
                      <td>
                        <div className="sale-date">
                          {venda.tipo_pagamento === 'prazo' && venda.data_vencimento 
                            ? formatarDataTabela(venda.data_vencimento)
                            : formatarDataTabela(venda.data_venda)}
                        </div>
                      </td>
                      <td>
                        <span className={`badge ${venda.tipo_pagamento === 'prazo' ? 'badge-warning' : 'badge-success'}`}>
                          {venda.tipo_pagamento === 'prazo' ? '⏳ A Prazo' : '✅ Pago'}
                        </span>
                      </td>
                      <td>
                        <div className="table-actions">
                          <button 
                            className="btn-icon btn-info"
                            onClick={() => handleViewVenda(venda)}
                            title="Visualizar Detalhes"
                          >
                            <FiEye />
                          </button>
                          <div className="whatsapp-buttons">
                            <button 
                              className="btn-icon btn-success"
                              onClick={() => abrirChat(venda)}
                              title="Abrir Chat WhatsApp"
                            >
                              <FiMessageSquare />
                            </button>
                            <button 
                              className="btn-icon btn-outline-success"
                              onClick={() => handleWhatsApp(venda)}
                              title="Mensagem Rápida"
                              style={{ marginLeft: '4px' }}
                            >
                              📱
                            </button>
                          </div>
                          <button
                            className="btn-icon btn-pix"
                            onClick={() => gerarPix(venda)}
                            title="Gerar PIX"
                            disabled={loadingPix}
                          >
                            <FiCreditCard />
                          </button>
                          <button 
                            className="btn-icon"
                            onClick={() => handleEdit(venda)}
                            title="Editar"
                          >
                            <FiEdit />
                          </button>
                          <button 
                            className="btn-icon btn-danger"
                            onClick={() => handleDelete(venda.id)}
                            title="Excluir"
                          >
                            <FiTrash2 />
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                }
              })}
            </tbody>
          </table>
        </div>
      )}

      {/* Modal de Venda */}
      {showModal && (
        <div className="modal-overlay">
          <div className="modal modal-lg">
            <div className="modal-header">
              <h2 className="modal-title">
                {editingSale ? 'Editar Venda' : 'Nova Venda'}
              </h2>
              <button 
                className="modal-close"
                onClick={() => {
                  setShowModal(false);
                  setEditingSale(null);
                  resetForm();
                }}
              >
                ×
              </button>
            </div>

            <form onSubmit={handleSubmit}>
              {/* Informações da Venda */}
              <div className="sale-form-section">
                <h3>Informações da Venda</h3>
                <div className="grid grid-3">
                  <div className="form-group">
                    <label className="form-label">Cliente</label>
                    <select
                      className="form-select"
                      value={formData.cliente_id}
                      onChange={(e) => setFormData({...formData, cliente_id: e.target.value})}
                    >
                      <option value="">Selecione um cliente</option>
                      {clientes.map((cliente) => (
                        <option key={cliente.id} value={cliente.id}>
                          {cliente.nome_completo}
                        </option>
                      ))}
                    </select>
                  </div>

                  <div className="form-group">
                    <label className="form-label">Tipo de Pagamento *</label>
                    <select
                      className="form-select"
                      value={formData.tipo_pagamento}
                      onChange={(e) => handleTipoPagamentoChange(e.target.value)}
                      required
                    >
                      <option value="vista">À Vista</option>
                      <option value="parcelado">Parcelado</option>
                      <option value="prazo">A Prazo (Data Específica)</option>
                    </select>
                  </div>

                  <div className="form-group">
                    <label className="form-label">Data da Venda *</label>
                    <input
                      type="date"
                      className="form-input"
                      value={formData.data_venda}
                      onChange={(e) => setFormData({...formData, data_venda: e.target.value})}
                      required
                    />
                  </div>
                </div>

                {formData.tipo_pagamento === 'parcelado' && (
                  <div className="grid grid-2">
                    <div className="form-group">
                      <label className="form-label">Número de Parcelas *</label>
                      <input
                        type="number"
                        className="form-input"
                        value={formData.parcelas}
                        onChange={(e) => handleParcelasChange(parseInt(e.target.value))}
                        min="2"
                        max="12"
                        required
                      />
                    </div>
                    <div className="form-group">
                      <label className="form-label">Data do 1º Vencimento *</label>
                      <input
                        type="date"
                        className="form-input"
                        value={formData.data_primeiro_vencimento}
                        onChange={(e) => handleDataVencimentoChange(e.target.value)}
                        required
                      />
                    </div>
                  </div>
                )}

                {formData.tipo_pagamento === 'prazo' && (
                  <div className="form-group">
                    <label className="form-label">Data de Vencimento *</label>
                    <input
                      type="date"
                      className="form-input"
                      value={formData.data_vencimento}
                      onChange={(e) => setFormData({ ...formData, data_vencimento: e.target.value })}
                      required
                    />
                  </div>
                )}
              </div>

              {/* Adicionar Itens */}
              <div className="sale-form-section">
                <h3>Adicionar Item</h3>
                
                <div className="grid grid-4">
                  <div className="form-group">
                    <label className="form-label">Produto</label>
                    <select
                      className="form-select"
                      value={novoItem.produto_id}
                      onChange={(e) => {
                        setNovoItem({...novoItem, produto_id: e.target.value, produto_variacao_id: ''});
                        if (e.target.value) {
                          carregarVariacoes(e.target.value);
                        } else {
                          setVariacoes([]);
                        }
                      }}
                    >
                      <option value="">Selecione um produto</option>
                      {produtos.map((produto) => {
                        const codigo = produto.id_produto || produto.id;
                        const nomeCompleto = `${produto.marca} - ${produto.nome}`;
                        return (
                          <option key={produto.id} value={produto.id}>
                            {`${codigo ? `${codigo} - ` : ''}${nomeCompleto}`}
                          </option>
                        );
                      })}
                    </select>
                  </div>

                  <div className="form-group">
                    <label className="form-label">Variação</label>
                    <select
                      className="form-select"
                      value={novoItem.produto_variacao_id}
                      onChange={(e) => handleVariacaoChange(e.target.value)}
                      disabled={!novoItem.produto_id}
                    >
                      <option value="">Selecione uma variação</option>
                      {variacoes.map((variacao) => (
                        <option key={variacao.id} value={variacao.id}>
                          {variacao.tamanho} - {variacao.cor} (Estoque: {variacao.quantidade})
                        </option>
                      ))}
                    </select>
                  </div>

                  <div className="form-group">
                    <label className="form-label">Quantidade</label>
                    <input
                      type="number"
                      className="form-input"
                      value={novoItem.quantidade}
                      onChange={(e) => setNovoItem({...novoItem, quantidade: parseInt(e.target.value)})}
                      min="1"
                    />
                  </div>

                  <div className="form-group">
                    <label className="form-label">Valor Unitário</label>
                    <input
                      type="number"
                      step="0.01"
                      className={`form-input ${novoItem.produto_variacao_id ? 'valor-automatico' : ''}`}
                      value={novoItem.valor_unitario}
                      onChange={(e) => setNovoItem({...novoItem, valor_unitario: parseFloat(e.target.value)})}
                      placeholder="Selecione uma variação para preencher automaticamente"
                    />
                  </div>
                </div>

                <button 
                  type="button" 
                  className="btn btn-secondary btn-sm"
                  onClick={handleAddItem}
                >
                  <FiPlus />
                  Adicionar Item
                </button>
              </div>

              {/* Lista de Itens */}
              {formData.itens.length > 0 && (
                <div className="sale-form-section">
                  <h3>Itens da Venda</h3>
                  <div className="items-list">
                    {formData.itens.map((item) => (
                      <div key={item.id} className="sale-item">
                        <div className="item-info">
                          <span className="item-name">{item.produto_nome}</span>
                          <span className="item-variation">{item.variacao_info}</span>
                          <span className="item-quantity">Qtd: {item.quantidade}</span>
                          <span className="item-price">
                            R$ {item.valor_unitario.toFixed(2)} x {item.quantidade} = 
                            R$ {item.valor_total.toFixed(2)}
                          </span>
                        </div>
                        <button 
                          type="button"
                          className="btn-icon btn-danger"
                          onClick={() => handleRemoveItem(item.id)}
                        >
                          <FiTrash2 />
                        </button>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Totais */}
              <div className="sale-form-section">
                <div className="sale-totals">
                  <div className="grid grid-3">
                    <div className="form-group">
                      <label className="form-label">Subtotal</label>
                      <input
                        type="text"
                        className="form-input"
                        value={`R$ ${formData.valor_total.toFixed(2)}`}
                        readOnly
                      />
                    </div>

                    <div className="form-group">
                      <label className="form-label">Desconto</label>
                      <input
                        type="number"
                        step="0.01"
                        className="form-input"
                        value={formData.desconto}
                        onChange={(e) => handleDescontoChange(parseFloat(e.target.value) || 0)}
                      />
                    </div>

                    <div className="form-group">
                      <label className="form-label">Total Final</label>
                      <input
                        type="text"
                        className="form-input total-final"
                        value={`R$ ${(formData.valor_total - formData.desconto).toFixed(2)}`}
                        readOnly
                      />
                    </div>
                  </div>
                </div>

                <div className="form-group">
                  <label className="form-label">Observações</label>
                  <textarea
                    className="form-textarea"
                    value={formData.observacoes}
                    onChange={(e) => setFormData({...formData, observacoes: e.target.value})}
                    placeholder="Observações sobre a venda..."
                    rows="3"
                  />
                </div>
              </div>

              {/* Detalhamento das Parcelas */}
              {formData.tipo_pagamento === 'parcelado' && formData.parcelas_detalhes.length > 0 && (
                <div className="sale-form-section">
                  <h3>Detalhamento das Parcelas</h3>
                  <div className="parcelas-detalhes">
                    {formData.parcelas_detalhes.map((parcela, index) => (
                      <div key={index} className="parcela-item">
                        <div className="parcela-info">
                          <span className="parcela-numero">Parcela {parcela.numero}</span>
                          <span className="parcela-valor">
                            R$ {parcela.valor.toFixed(2)}
                          </span>
                        </div>
                        <div className="parcela-data">
                          <label className="form-label">Vencimento:</label>
                          <input
                            type="date"
                            className="form-input form-input-sm"
                            value={parcela.data_vencimento}
                            onChange={(e) => atualizarParcelaIndividual(index, e.target.value)}
                          />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              <div className="modal-actions">
                <button 
                  type="button" 
                  className="btn btn-secondary"
                  onClick={() => {
                    setShowModal(false);
                    setEditingSale(null);
                    resetForm();
                  }}
                >
                  Cancelar
                </button>
                <button type="submit" className="btn btn-primary">
                  {editingSale ? 'Atualizar' : 'Registrar'} Venda
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Modal de Visualização da Venda */}
      {showViewModal && selectedVenda && (
        <div className="modal-overlay">
          <div className="modal modal-lg">
            <div className="modal-header">
              <h2 className="modal-title">
                Detalhes da Venda - {selectedVenda.id_venda || `VD${selectedVenda.id.slice(-8)}`}
              </h2>
              <button 
                className="modal-close"
                onClick={() => setShowViewModal(false)}
              >
                ×
              </button>
            </div>

            <div className="modal-body">
              {/* Informações Gerais */}
              <div className="view-section">
                <h3>Informações Gerais</h3>
                <div className="info-grid">
                  <div className="info-item">
                    <label>ID da Venda:</label>
                    <span>{selectedVenda.id_venda || `VD${selectedVenda.id.slice(-8)}`}</span>
                  </div>
                  <div className="info-item">
                    <label>Data:</label>
                    <span>{formatarDataTabela(selectedVenda.data_venda)}</span>
                  </div>
                  <div className="info-item">
                    <label>Cliente:</label>
                    <span>{selectedVenda.cliente_nome || 'Cliente não informado'}</span>
                  </div>
                  <div className="info-item">
                    <label>Status:</label>
                    <span className={`badge ${
                      selectedVenda.status === 'com_troca' ? 'badge-warning' :
                      (selectedVenda.status || 'concluida') === 'concluida' ? 'badge-success' : 'badge-danger'
                    }`}>
                      {selectedVenda.status === 'com_troca' ? 'Com Troca' :
                       (selectedVenda.status || 'concluida') === 'concluida' ? 'Concluída' : 'Cancelada'}
                    </span>
                  </div>
                </div>
              </div>

              {/* Informações de Pagamento */}
              <div className="view-section">
                <h3>Informações de Pagamento</h3>
                <div className="info-grid">
                  <div className="info-item">
                    <label>Tipo:</label>
                    <span className={`badge ${selectedVenda.tipo_pagamento === 'vista' ? 'badge-success' : 'badge-warning'}`}>
                      {selectedVenda.tipo_pagamento === 'vista' ? 'À Vista' : 
                       selectedVenda.tipo_pagamento === 'parcelado' ? `${selectedVenda.parcelas}x` : 'A Prazo'}
                    </span>
                  </div>
                  <div className="info-item">
                    <label>Subtotal:</label>
                    <span>R$ {parseFloat(selectedVenda.valor_total).toFixed(2)}</span>
                  </div>
                  {selectedVenda.desconto > 0 && (
                    <div className="info-item">
                      <label>Desconto:</label>
                      <span>R$ {parseFloat(selectedVenda.desconto).toFixed(2)}</span>
                    </div>
                  )}
                  <div className="info-item">
                    <label>Valor Final:</label>
                    <span className="value-highlight">R$ {(parseFloat(selectedVenda.valor_total) - parseFloat(selectedVenda.desconto || 0)).toFixed(2)}</span>
                  </div>
                  {selectedVenda.tipo_pagamento === 'parcelado' && (
                    <div className="info-item">
                      <label>Valor da Parcela:</label>
                      <span>R$ {parseFloat(selectedVenda.valor_parcela || 0).toFixed(2)}</span>
                    </div>
                  )}
                </div>
              </div>
              
              {/* Parcelas Individuais */}
              {selectedVenda.tipo_pagamento === 'parcelado' && parcelas.length > 0 && (
                <div className="view-section">
                  <h3>💳 Parcelas Individuais</h3>
                  <div className="parcelas-list">
                    {parcelas.map((parcela) => (
                      <div key={parcela.id} className={`parcela-card ${parcela.status}`}>
                        <div className="parcela-header">
                          <div className="parcela-numero">
                            <strong>Parcela {parcela.numero_parcela}/{selectedVenda.parcelas}</strong>
                          </div>
                          <div className="parcela-status">
                            <span className={`badge ${
                              parcela.status === 'pago' ? 'badge-success' : 
                              parcela.status === 'vencida' ? 'badge-danger' : 
                              'badge-warning'
                            }`}>
                              {parcela.status === 'pago' ? '✅ Pago' : 
                               parcela.status === 'vencida' ? '⚠️ Vencida' : 
                               '🕐 Pendente'}
                            </span>
                          </div>
                        </div>
                        <div className="parcela-info">
                          <div className="parcela-valor">
                            💰 <strong>Valor:</strong> R$ {parseFloat(parcela.valor).toFixed(2)}
                          </div>
                          <div className="parcela-vencimento">
                            📅 <strong>Vencimento:</strong> {formatarDataTabela(parcela.data_vencimento)}
                          </div>
                          {parcela.data_pagamento && (
                            <div className="parcela-pagamento">
                              ✅ <strong>Pago em:</strong> {formatarDataHoraCompleta(parcela.data_pagamento)}
                            </div>
                          )}
                        </div>
                        {parcela.status !== 'pago' && (
                          <div className="parcela-actions">
                            <button
                              className="btn btn-sm btn-pix"
                              onClick={() => gerarPixParcela(selectedVenda, parcela)}
                              disabled={loadingPix}
                            >
                              <FiCreditCard />
                              {loadingPix ? 'Gerando...' : 'Gerar PIX'}
                            </button>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Operações Agrupadas */}
              {selectedVenda.trocas_devolucoes_agrupadas && selectedVenda.trocas_devolucoes_agrupadas.length > 0 && (
                <div className="view-section">
                  <h3>🔄 Trocas e Devoluções Agrupadas ({selectedVenda.trocas_devolucoes_agrupadas.length})</h3>
                  <div className="agrupamento-info">
                    <p className="info-text">
                      ℹ️ <strong>Todas as trocas e devoluções do sistema estão agrupadas nesta venda (último ID)</strong>
                    </p>
                  </div>
                  <div className="operacoes-agrupadas-view">
                    {selectedVenda.trocas_devolucoes_agrupadas.map((operacao, index) => (
                      <div key={index} className="operacao-agrupada-item">
                        <div className="operacao-header">
                          <div className="operacao-tipo">
                            <span className={`badge ${operacao.tipo_operacao === 'troca' ? 'badge-warning' : 'badge-info'}`}>
                              {operacao.tipo_operacao === 'troca' ? '🔄 TROCA' : '↩️ DEVOLUÇÃO'}
                            </span>
                            <span className="operacao-id">ID: {operacao.id_venda || `OP${operacao.id.slice(-8)}`}</span>
                          </div>
                          <div className="operacao-data">
                            📅 {formatarDataHoraCompleta(operacao.data_venda)}
                          </div>
                        </div>
                        
                        <div className="operacao-detalhes">
                          <div className="cliente-operacao">
                            <strong>👤 Cliente:</strong> {operacao.cliente_nome || 'Não informado'}
                          </div>
                          <div className="valor-operacao">
                            <strong>💰 Valor:</strong> R$ {parseFloat(operacao.valor_total || 0).toFixed(2)}
                          </div>
                          {operacao.observacoes && (
                            <div className="observacoes-operacao">
                              <strong>📝 Observações:</strong> {operacao.observacoes}
                            </div>
                          )}
                        </div>

                        {operacao.itens && operacao.itens.length > 0 && (
                          <div className="itens-operacao">
                            <h5>📦 Itens da Operação:</h5>
                            <div className="itens-lista">
                              {operacao.itens.map((item, itemIndex) => (
                                <div key={itemIndex} className="item-operacao">
                                  <div className="item-nome">{item.produto_nome}</div>
                                  <div className="item-detalhes">
                                    <span>📏 {item.variacao_info}</span>
                                    <span>🔢 Qtd: {item.quantidade}</span>
                                    <span>💰 R$ {parseFloat(item.valor_unitario).toFixed(2)}</span>
                                  </div>
                                </div>
                              ))}
                            </div>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Informações Detalhadas de Troca/Devolução */}
              {selectedVenda.devolucoes && selectedVenda.devolucoes.length > 0 && (
                <div className="view-section">
                  <h3>📋 Histórico Completo de Devoluções/Trocas</h3>
                  <div className="devolucoes-view">
                    {selectedVenda.devolucoes.map((devolucao, index) => (
                      <div key={index} className="devolucao-item-completa">
                        <div className="devolucao-header-completa">
                          <div className="operacao-info">
                            <span className={`badge ${devolucao.tipo_operacao === 'troca' ? 'badge-warning' : 'badge-info'}`}>
                              {devolucao.tipo_operacao === 'troca' ? '🔄 TROCA' : '↩️ DEVOLUÇÃO'}
                            </span>
                            <span className="devolucao-data">
                              📅 {formatarDataHoraCompleta(devolucao.data_devolucao)}
                            </span>
                          </div>
                        </div>
                        
                        <div className="produto-devolvido">
                          <h4>🔙 Produto Devolvido/Trocado:</h4>
                          {devolucao.produto_info && (
                            <div className="produto-info-card">
                              <div className="produto-nome-dev">{devolucao.produto_info.nome}</div>
                              <div className="produto-detalhes-dev">
                                <span>📦 Código: {devolucao.produto_info.codigo || 'N/A'}</span>
                                <span>📏 Variação: {devolucao.produto_info.variacao}</span>
                                <span>🔢 Qtd. Original: {devolucao.produto_info.quantidade_original}</span>
                                <span>🔢 Qtd. Devolvida: {devolucao.quantidade_devolvida}</span>
                              </div>
                              <div className="valores-dev">
                                <span>💰 Valor Unit. Original: R$ {parseFloat(devolucao.produto_info.valor_unitario_original).toFixed(2)}</span>
                                <span>💸 Valor Devolvido: R$ {parseFloat(devolucao.valor_devolucao).toFixed(2)}</span>
                              </div>
                            </div>
                          )}
                        </div>

                        {devolucao.motivo && (
                          <div className="motivo-operacao">
                            <h4>📝 Motivo da {devolucao.tipo_operacao === 'troca' ? 'Troca' : 'Devolução'}:</h4>
                            <div className="motivo-texto">{devolucao.motivo}</div>
                          </div>
                        )}

                        {devolucao.tipo_operacao === 'troca' && (
                          <div className="info-troca">
                            <div className="troca-aviso">
                              ℹ️ <strong>Produto(s) novo(s) recebido(s) na troca aparecem na seção "Itens da Venda" abaixo</strong>
                            </div>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Itens da Venda com Status Detalhado */}
              {selectedVenda.itens && selectedVenda.itens.length > 0 && (
                <div className="view-section">
                  <h3>🛍️ Todos os Itens da Venda {selectedVenda.tem_trocas ? '(Originais + Trocados)' : ''}</h3>
                  <div className="items-view">
                    {selectedVenda.itens.map((item, index) => (
                      <div key={index} className={`item-view ${(item.status_item === 'trocado' || item.status_item === 'devolvido') ? 'item-devolvido' : 'item-normal'}`}>
                        {item.produto_foto && (
                          <div className="item-photo">
                            <img src={item.produto_foto} alt={item.produto_nome} />
                          </div>
                        )}
                        <div className="item-details">
                          <div className="item-header-status">
                            <div className="item-name">{item.produto_nome}</div>
                            <div className="item-status-badge">
                              {item.status_item === 'trocado' ? (
                                <span className="badge badge-warning">🔄 Trocado</span>
                              ) : item.status_item === 'devolvido' ? (
                                <span className="badge badge-danger">↩️ Devolvido</span>
                              ) : (
                                <span className="badge badge-success">✅ Vendido</span>
                              )}
                            </div>
                          </div>
                          <div className="item-code">📦 Código: {item.produto_codigo || 'N/A'}</div>
                          <div className="item-variation">📏 Variação: {item.variacao_info}</div>
                          <div className="item-quantity">🔢 Quantidade: {item.quantidade}</div>
                          <div className="item-price">
                            💰 Valor Unit.: R$ {parseFloat(item.valor_unitario).toFixed(2)} | 
                            💸 Total: R$ {parseFloat(item.valor_total).toFixed(2)}
                          </div>
                          {(item.status_item === 'trocado' || item.status_item === 'devolvido') && (
                            <div className="item-evento">
                              <div className="evento-info">
                                📅 <strong>{item.status_item === 'trocado' ? 'Trocado' : 'Devolvido'} em:</strong> {' '}
                                {item.data_evento ? formatarDataTabela(item.data_evento) : 'Data não disponível'}
                                {item.data_evento && (
                                  <span className="evento-hora">
                                    {' às '}{formatarHoraBrasil(item.data_evento)}
                                  </span>
                                )}
                              </div>
                              <div className="evento-observacao">
                                ℹ️ <em>Veja detalhes completos no histórico acima</em>
                              </div>
                            </div>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Observações */}
              {selectedVenda.observacoes && (
                <div className="view-section">
                  <h3>Observações</h3>
                  <p className="observacoes-text">{selectedVenda.observacoes}</p>
                </div>
              )}
            </div>

            <div className="modal-actions">
              <button 
                className="btn btn-secondary"
                onClick={() => setShowViewModal(false)}
              >
                Fechar
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Modal de WhatsApp */}
      {showWhatsAppModal && selectedVenda && (
        <div className="modal-overlay">
          <div className="modal modal-md">
            <div className="modal-header">
              <h2 className="modal-title">
                Enviar WhatsApp - {selectedVenda.cliente_nome || 'Cliente'}
              </h2>
              <button 
                className="modal-close"
                onClick={() => setShowWhatsAppModal(false)}
              >
                ×
              </button>
            </div>

            <div className="modal-body">
              <div className="whatsapp-form">
                <div className="form-group">
                  <label className="form-label">Mensagem:</label>
                  <textarea
                    className="form-textarea"
                    value={whatsappMessage}
                    onChange={(e) => setWhatsappMessage(e.target.value)}
                    rows="8"
                    placeholder="Digite sua mensagem..."
                  />
                </div>
                
                <div className="whatsapp-info">
                  <p><strong>Cliente:</strong> {selectedVenda.cliente_nome || 'N/A'}</p>
                  <p><strong>Telefone:</strong> {selectedVenda.cliente_whatsapp || selectedVenda.cliente_telefone || 'Não informado'}</p>
                </div>
              </div>
            </div>

            <div className="modal-actions">
              <button 
                className="btn btn-secondary"
                onClick={() => setShowWhatsAppModal(false)}
              >
                Cancelar
              </button>
              <button 
                className="btn btn-success"
                onClick={enviarWhatsApp}
                disabled={!selectedVenda?.cliente_whatsapp && !selectedVenda?.cliente_telefone}
              >
                <FiMessageSquare />
                Enviar WhatsApp
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Modal PIX */}
      {showPixModal && pixData && (
        <div className="modal-overlay">
          <div className="modal pix-modal">
            <div className="modal-header">
              <h3>🏦 Pagamento PIX</h3>
              <button onClick={fecharPixModal}>×</button>
            </div>
            
            <div className="modal-body">
              <div className="pix-content">
                <div className="qr-code-section">
                  <h4>QR Code PIX</h4>
                  {pixData.qr_code_base64 && (
                    <img 
                      src={`data:image/png;base64,${pixData.qr_code_base64}`}
                      alt="QR Code PIX"
                      className="qr-code-image"
                    />
                  )}
                </div>
                
                <div className="pix-copy-section">
                  <h4>Código PIX (Copiar e Colar)</h4>
                  <div className="pix-code-container">
                    <input
                      type="text"
                      value={pixData.pix_copy_paste || ''}
                      readOnly
                      className="pix-code-input"
                    />
                    <button
                      onClick={copiarPixCode}
                      className="btn-copy-pix"
                    >
                      📋 Copiar
                    </button>
                  </div>
                </div>
                
                <div className="pix-info">
                  <p><strong>Valor:</strong> R$ {parseFloat(pixData.transaction_amount || 0).toFixed(2)}</p>
                  {pixData.expiration_date && (
                    <p><strong>Válido até:</strong> {new Date(pixData.expiration_date).toLocaleString('pt-BR')}</p>
                  )}
                  <p className="pix-instructions">
                    📱 <strong>Como pagar:</strong><br/>
                    1. Abra o app do seu banco<br/>
                    2. Escaneie o QR Code ou cole o código PIX<br/>
                    3. Confirme o pagamento
                  </p>
                </div>

                {pixTimer && (
                  <div className="pix-timer">
                    ⏰ PIX expira em alguns minutos
                  </div>
                )}

                <div className="pix-status pending">
                  🕐 Aguardando pagamento...
                </div>

                <div className="modal-actions pix-actions">
                  <button 
                    onClick={selectedParcela ? enviarPixParcelaPorWhatsapp : enviarPixPorWhatsapp}
                    className="btn btn-success"
                    disabled={enviandoWhatsapp}
                  >
                    {enviandoWhatsapp ? 'Enviando...' : '📲 Enviar por WhatsApp'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Chat WhatsApp */}
      <ChatWhatsApp 
        isOpen={showChatModal}
        onClose={() => setShowChatModal(false)}
        cliente={selectedCliente}
      />
    </div>
  );
};

export default Vendas;
