import React, { useState, useEffect } from 'react';
import { 
  FiArrowLeft, 
  FiPackage, 
  FiCalendar, 
  FiUser,
  FiDollarSign,
  FiRotateCcw,
  FiCheck,
  FiX,
  FiAlertTriangle,
  FiPlus
} from 'react-icons/fi';
import toast from 'react-hot-toast';
import '../styles/devolucoes.css';

const Devolucoes = () => {
  const [vendas, setVendas] = useState([]);
  const [loading, setLoading] = useState(true);
  const [vendaSelecionada, setVendaSelecionada] = useState(null);
  const [showModal, setShowModal] = useState(false);
  const [showHistoricoModal, setShowHistoricoModal] = useState(false);
  const [historicoVenda, setHistoricoVenda] = useState([]);
  const [itensDevolucao, setItensDevolucao] = useState([]);
  const [motivo, setMotivo] = useState('');
  const [processando, setProcessando] = useState(false);
  const [tipoOperacao, setTipoOperacao] = useState('devolucao');
  const [produtos, setProdutos] = useState([]);
  const [itensTroca, setItensTroca] = useState([]);

  useEffect(() => {
    carregarVendas();
  }, []);

  const carregarVendas = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/devolucoes/vendas');
      if (response.ok) {
        const data = await response.json();
        setVendas(data);
      } else {
        toast.error('Erro ao carregar vendas');
      }
    } catch (error) {
      console.error('Erro ao carregar vendas:', error);
      toast.error('Erro ao carregar vendas');
    } finally {
      setLoading(false);
    }
  };

  const carregarHistoricoVenda = async (vendaId) => {
    try {
      const response = await fetch(`/api/devolucoes/venda/${vendaId}`);
      if (response.ok) {
        const historico = await response.json();
        setHistoricoVenda(historico);
        setShowHistoricoModal(true);
      } else {
        toast.error('Erro ao carregar histórico');
      }
    } catch (error) {
      console.error('Erro ao carregar histórico:', error);
      toast.error('Erro ao carregar histórico');
    }
  };

  const carregarProdutos = async () => {
    try {
      const response = await fetch('/api/devolucoes/produtos');
      if (response.ok) {
        const data = await response.json();
        setProdutos(data);
      }
    } catch (error) {
      console.error('Erro ao carregar produtos:', error);
    }
  };

  const abrirModalDevolucao = (venda) => {
    setVendaSelecionada(venda);
    setItensDevolucao(venda.itens.map(item => ({
      ...item,
      quantidade_devolver: 0,
      selecionado: false
    })));
    setItensTroca([]);
    setMotivo('');
    setTipoOperacao('devolucao');
    carregarProdutos();
    setShowModal(true);
  };

  const handleItemChange = (itemId, quantidade) => {
    setItensDevolucao(prev => prev.map(item => {
      if (item.id === itemId) {
        const quantidadeDevolver = Math.min(Math.max(0, parseInt(quantidade) || 0), item.quantidade);
        return {
          ...item,
          quantidade_devolver: quantidadeDevolver,
          selecionado: quantidadeDevolver > 0
        };
      }
      return item;
    }));
  };

  const calcularValorDevolucao = () => {
    return itensDevolucao.reduce((total, item) => {
      if (item.selecionado && item.quantidade_devolver > 0) {
        return total + (parseFloat(item.valor_unitario) * item.quantidade_devolver);
      }
      return total;
    }, 0);
  };

  const calcularValorTroca = () => {
    return itensTroca.reduce((total, item) => {
      return total + (parseFloat(item.valor_unitario || 0) * parseInt(item.quantidade || 0));
    }, 0);
  };

  const adicionarItemTroca = () => {
    setItensTroca(prev => [...prev, {
      id: Date.now(),
      produto_id: '',
      variacao_id: '',
      quantidade: 1,
      valor_unitario: 0,
      produto_nome: '',
      variacao_info: ''
    }]);
  };

  const removerItemTroca = (id) => {
    setItensTroca(prev => prev.filter(item => item.id !== id));
  };

  const handleTrocaChange = (id, field, value) => {
    setItensTroca(prev => prev.map(item => {
      if (item.id === id) {
        if (field === 'produto_id') {
          const produto = produtos.find(p => p.id === value);
          return {
            ...item,
            produto_id: value,
            produto_nome: produto ? `${produto.marca} - ${produto.nome}` : '',
            variacao_id: '',
            variacao_info: '',
            valor_unitario: produto ? produto.valor_revenda : 0
          };
        } else if (field === 'variacao_id') {
          const produto = produtos.find(p => p.id === item.produto_id);
          const variacao = produto?.variacoes.find(v => v.id === value);
          return {
            ...item,
            variacao_id: value,
            variacao_info: variacao ? `${variacao.tamanho} - ${variacao.cor}` : '',
            valor_unitario: variacao ? variacao.preco_venda || produto.valor_revenda : item.valor_unitario
          };
        } else if (field === 'quantidade') {
          const produto = produtos.find(p => p.id === item.produto_id);
          const variacao = produto?.variacoes.find(v => v.id === item.variacao_id);
          const quantidadeSolicitada = parseInt(value) || 0;
          
          if (variacao && quantidadeSolicitada > variacao.quantidade) {
            toast.error(`Estoque insuficiente! Disponível: ${variacao.quantidade}, solicitado: ${quantidadeSolicitada}`);
            return { ...item, [field]: variacao.quantidade };
          }
          
          return { ...item, [field]: value };
        } else {
          return { ...item, [field]: value };
        }
      }
      return item;
    }));
  };

  const processarDevolucao = async () => {
    const itensSelecionados = itensDevolucao.filter(item => item.selecionado && item.quantidade_devolver > 0);
    
    if (tipoOperacao === 'devolucao' && itensSelecionados.length === 0) {
      toast.error('Selecione pelo menos um item para devolução');
      return;
    }

    if (tipoOperacao === 'troca') {
      if (itensSelecionados.length === 0) {
        toast.error('Selecione pelo menos um item para devolver na troca');
        return;
      }
      
      const itensValidosTroca = itensTroca.filter(item => 
        item.produto_id && item.variacao_id && item.quantidade > 0
      );
      
      if (itensValidosTroca.length === 0) {
        toast.error('Adicione pelo menos um produto para troca');
        return;
      }
    }

    if (!motivo.trim()) {
      toast.error(`Informe o motivo da ${tipoOperacao}`);
      return;
    }

    try {
      setProcessando(true);
      
      const requestBody = {
        venda_id: vendaSelecionada.id,
        tipo_operacao: tipoOperacao,
        motivo: motivo.trim()
      };

      if (itensSelecionados.length > 0) {
        requestBody.itens_devolucao = itensSelecionados.map(item => ({
          item_id: item.id,
          quantidade_devolvida: item.quantidade_devolver
        }));
      }

      if (tipoOperacao === 'troca' && itensTroca.length > 0) {
        requestBody.itens_troca = itensTroca
          .filter(item => item.produto_id && item.variacao_id && item.quantidade > 0)
          .map(item => ({
            produto_id: item.produto_id,
            variacao_id: item.variacao_id,
            quantidade: parseInt(item.quantidade),
            valor_unitario: parseFloat(item.valor_unitario)
          }));
      }
      
      const response = await fetch('/api/devolucoes', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(requestBody)
      });

      if (response.ok) {
        const result = await response.json();
        toast.success(result.message);
        setShowModal(false);
        carregarVendas();
      } else {
        const error = await response.json();
        toast.error(error.message || `Erro ao processar ${tipoOperacao}`);
      }
    } catch (error) {
      console.error(`Erro ao processar ${tipoOperacao}:`, error);
      toast.error(`Erro ao processar ${tipoOperacao}`);
    } finally {
      setProcessando(false);
    }
  };

  const formatarMoeda = (valor) => {
    return new Intl.NumberFormat('pt-BR', {
      style: 'currency',
      currency: 'BRL'
    }).format(valor);
  };

  const formatarData = (data) => {
    return new Date(data).toLocaleDateString('pt-BR');
  };

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

  return (
    <div className="devolucoes-page">
      <div className="page-header">
        <div className="header-content">
          <div className="header-info">
            <h1>
              <FiRotateCcw className="page-icon" />
              Devolução/Troca
            </h1>
            <p>Gerencie devoluções e trocas de produtos vendidos</p>
          </div>
        </div>
      </div>

      <div className="vendas-container">
        {vendas.length === 0 ? (
          <div className="empty-state">
            <FiPackage className="empty-icon" />
            <h3>Nenhuma venda encontrada</h3>
            <p>Não há vendas dos últimos 30 dias disponíveis para devolução</p>
          </div>
        ) : (
          <div className="vendas-grid">
            {vendas.map(venda => (
              <div key={venda.id} className="venda-card">
                <div className="venda-header">
                  <div className="venda-info">
                    <h3>Venda #{venda.id_venda || venda.id.slice(-8)}</h3>
                    <div className="venda-meta">
                      <span className="venda-data">
                        <FiCalendar />
                        {formatarData(venda.data_venda)}
                      </span>
                      <span className="venda-cliente">
                        <FiUser />
                        {venda.cliente_nome}
                      </span>
                    </div>
                  </div>
                  <div className="venda-valor">
                    {formatarMoeda(venda.valor_total)}
                  </div>
                </div>

                <div className="venda-itens">
                  <h4>Produtos ({venda.itens.length})</h4>
                  <div className="itens-lista">
                    {venda.itens.slice(0, 3).map(item => (
                      <div key={item.id} className="item-resumo">
                        <div className="item-info-completa">
                          <span className="item-nome">{item.produto_nome}</span>
                          <span className="item-variacao">{item.variacao_info}</span>
                          <div className="item-detalhes">
                            <span className="item-quantidade">Qtd: {item.quantidade}</span>
                            <span className="item-valor">R$ {parseFloat(item.valor_unitario).toFixed(2)}</span>
                          </div>
                        </div>
                      </div>
                    ))}
                    {venda.itens.length > 3 && (
                      <div className="item-resumo mais-itens">
                        +{venda.itens.length - 3} produtos
                      </div>
                    )}
                  </div>
                </div>

                <div className="venda-actions">
                  <button 
                    className="btn-detalhes"
                    onClick={() => carregarHistoricoVenda(venda.id)}
                    title="Ver histórico de devoluções/trocas"
                  >
                    <FiPackage />
                    Detalhes
                  </button>
                  <button 
                    className="btn-devolucao"
                    onClick={() => abrirModalDevolucao(venda)}
                  >
                    <FiRotateCcw />
                    Devolução/Troca
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Modal de Devolução */}
      {showModal && vendaSelecionada && (
        <div className="modal-overlay">
          <div className="modal-devolucao">
            <div className="modal-header">
              <h2>
                <FiRotateCcw />
                Devolução/Troca
              </h2>
              <button 
                className="modal-close"
                onClick={() => setShowModal(false)}
              >
                <FiX />
              </button>
            </div>

            <div className="modal-body">
              <div className="venda-info-modal">
                <h3>Venda #{vendaSelecionada.id_venda || vendaSelecionada.id.slice(-8)}</h3>
                <div className="info-grid">
                  <div className="info-item">
                    <FiCalendar />
                    <span>{formatarData(vendaSelecionada.data_venda)}</span>
                  </div>
                  <div className="info-item">
                    <FiUser />
                    <span>{vendaSelecionada.cliente_nome}</span>
                  </div>
                  <div className="info-item">
                    <FiDollarSign />
                    <span>{formatarMoeda(vendaSelecionada.valor_total)}</span>
                  </div>
                </div>
              </div>

              <div className="tipo-operacao">
                <h4>Tipo de Operação:</h4>
                <div className="radio-group">
                  <label className="radio-option">
                    <input
                      type="radio"
                      value="devolucao"
                      checked={tipoOperacao === 'devolucao'}
                      onChange={(e) => setTipoOperacao(e.target.value)}
                    />
                    <span>Devolução (retorno do dinheiro)</span>
                  </label>
                  <label className="radio-option">
                    <input
                      type="radio"
                      value="troca"
                      checked={tipoOperacao === 'troca'}
                      onChange={(e) => setTipoOperacao(e.target.value)}
                    />
                    <span>Troca (por outro produto/tamanho)</span>
                  </label>
                </div>
              </div>

              <div className="itens-devolucao">
                <h4>Selecione os itens para devolução:</h4>
                <div className="itens-lista-modal">
                  {itensDevolucao.map(item => (
                    <div key={item.id} className="item-devolucao">
                      <div className="item-info">
                        {item.produto_foto && (
                          <div className="item-foto">
                            <img src={item.produto_foto} alt={item.produto_nome} />
                          </div>
                        )}
                        <div className="item-dados">
                          <div className="item-nome">{item.produto_nome}</div>
                          <div className="item-codigo">Código: {item.produto_codigo || 'N/A'}</div>
                          <div className="item-detalhes">
                            <span className="variacao-badge">{item.variacao_info}</span>
                            <span className="valor-badge">{formatarMoeda(item.valor_unitario)}</span>
                            <span className="quantidade-badge">Qtd: {item.quantidade}</span>
                          </div>
                        </div>
                      </div>
                      <div className="item-controles">
                        <label>Qtd. a devolver:</label>
                        <input
                          type="number"
                          min="0"
                          max={item.quantidade}
                          value={item.quantidade_devolver}
                          onChange={(e) => handleItemChange(item.id, e.target.value)}
                          className="quantidade-input"
                        />
                        <div className="valor-item">
                          {item.quantidade_devolver > 0 && (
                            <span className="valor-devolucao">
                              = {formatarMoeda(item.valor_unitario * item.quantidade_devolver)}
                            </span>
                          )}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Seção de Troca */}
              {tipoOperacao === 'troca' && (
                <div className="itens-troca">
                  <div className="troca-header">
                    <h4>Produtos para Troca:</h4>
                    <button 
                      type="button"
                      className="btn-adicionar-item"
                      onClick={adicionarItemTroca}
                    >
                      <FiPlus />
                      Adicionar Produto
                    </button>
                  </div>
                  
                  <div className="lista-troca">
                    {itensTroca.map(item => (
                      <div key={item.id} className="item-troca">
                        <div className="troca-selects">
                          <div className="select-group">
                            <label>Produto:</label>
                            <select
                              value={item.produto_id}
                              onChange={(e) => handleTrocaChange(item.id, 'produto_id', e.target.value)}
                              className="select-produto"
                            >
                              <option value="">Selecione um produto</option>
                              {produtos.map(produto => (
                                <option key={produto.id} value={produto.id}>
                                  {produto.marca} - {produto.nome}
                                </option>
                              ))}
                            </select>
                          </div>
                          
                          {item.produto_id && (
                            <div className="select-group">
                              <label>Variação:</label>
                              <select
                                value={item.variacao_id}
                                onChange={(e) => handleTrocaChange(item.id, 'variacao_id', e.target.value)}
                                className="select-variacao"
                              >
                                <option value="">Selecione uma variação</option>
                                {produtos.find(p => p.id === item.produto_id)?.variacoes.map(variacao => (
                                  <option key={variacao.id} value={variacao.id}>
                                    {variacao.tamanho} - {variacao.cor} (Estoque: {variacao.quantidade})
                                  </option>
                                ))}
                              </select>
                            </div>
                          )}
                          
                          <div className="select-group">
                            <label>Quantidade:</label>
                            <input
                              type="number"
                              min="1"
                              value={item.quantidade}
                              onChange={(e) => handleTrocaChange(item.id, 'quantidade', e.target.value)}
                              className="input-quantidade"
                            />
                          </div>
                          
                          <div className="select-group">
                            <label>Valor Unit.:</label>
                            <input
                              type="number"
                              step="0.01"
                              value={item.valor_unitario}
                              onChange={(e) => handleTrocaChange(item.id, 'valor_unitario', e.target.value)}
                              className="input-valor"
                            />
                          </div>
                        </div>
                        
                        <div className="troca-actions">
                          <div className="valor-total-item">
                            Total: {formatarMoeda(item.valor_unitario * item.quantidade)}
                          </div>
                          <button
                            type="button"
                            className="btn-remover-item"
                            onClick={() => removerItemTroca(item.id)}
                          >
                            <FiX />
                          </button>
                        </div>
                      </div>
                    ))}
                    
                    {itensTroca.length === 0 && (
                      <div className="empty-troca">
                        <p>Nenhum produto adicionado para troca</p>
                      </div>
                    )}
                  </div>
                </div>
              )}

              <div className="motivo-devolucao">
                <label>Motivo da {tipoOperacao} *</label>
                <textarea
                  value={motivo}
                  onChange={(e) => setMotivo(e.target.value)}
                  placeholder={`Descreva o motivo da ${tipoOperacao}...`}
                  rows="3"
                  className="motivo-textarea"
                />
              </div>

              <div className="resumo-devolucao">
                {tipoOperacao === 'devolucao' ? (
                  <>
                    <div className="resumo-item">
                      <span>Valor total da devolução:</span>
                      <span className="valor-total">{formatarMoeda(calcularValorDevolucao())}</span>
                    </div>
                    <div className="resumo-item">
                      <span>Novo valor da venda:</span>
                      <span className="novo-valor">
                        {formatarMoeda(vendaSelecionada.valor_total - calcularValorDevolucao())}
                      </span>
                    </div>
                  </>
                ) : (
                  <>
                    <div className="resumo-item">
                      <span>Valor dos itens devolvidos:</span>
                      <span className="valor-devolucao">{formatarMoeda(calcularValorDevolucao())}</span>
                    </div>
                    <div className="resumo-item">
                      <span>Valor dos itens de troca:</span>
                      <span className="valor-troca">{formatarMoeda(calcularValorTroca())}</span>
                    </div>
                    <div className="resumo-item">
                      <span>Diferença:</span>
                      <span className={`diferenca-valor ${calcularValorTroca() - calcularValorDevolucao() >= 0 ? 'positiva' : 'negativa'}`}>
                        {calcularValorTroca() - calcularValorDevolucao() >= 0 ? '+' : ''}
                        {formatarMoeda(calcularValorTroca() - calcularValorDevolucao())}
                      </span>
                    </div>
                    <div className="resumo-item">
                      <span>Novo valor da venda:</span>
                      <span className="novo-valor">
                        {formatarMoeda(vendaSelecionada.valor_total + (calcularValorTroca() - calcularValorDevolucao()))}
                      </span>
                    </div>
                  </>
                )}
              </div>
            </div>

            <div className="modal-footer">
              <button 
                className="btn-cancelar"
                onClick={() => setShowModal(false)}
                disabled={processando}
              >
                <FiX />
                Cancelar
              </button>
              <button 
                className="btn-processar"
                onClick={processarDevolucao}
                disabled={processando || (tipoOperacao === 'devolucao' && calcularValorDevolucao() === 0)}
              >
                {processando ? (
                  <>
                    <div className="spinner-small"></div>
                    Processando...
                  </>
                ) : (
                  <>
                    <FiCheck />
                    {tipoOperacao === 'devolucao' ? 'Processar Devolução' : 'Processar Troca'}
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Modal de Histórico de Devoluções/Trocas */}
      {showHistoricoModal && (
        <div className="modal-overlay">
          <div className="modal-content modal-historico">
            <div className="modal-header">
              <h2>📋 Histórico de Devoluções/Trocas</h2>
              <button 
                className="btn-fechar"
                onClick={() => setShowHistoricoModal(false)}
              >
                <FiX />
              </button>
            </div>

            <div className="modal-body">
              {historicoVenda.length === 0 ? (
                <div className="historico-vazio">
                  <FiPackage size={48} />
                  <h3>Nenhuma devolução ou troca encontrada</h3>
                  <p>Esta venda ainda não teve nenhuma devolução ou troca.</p>
                </div>
              ) : (
                <div className="historico-lista">
                  {historicoVenda.map((evento, index) => (
                    <div key={index} className="historico-item">
                      <div className="historico-header">
                        <div className="evento-tipo">
                          <span className={`badge ${evento.tipo_operacao === 'troca' ? 'badge-warning' : 'badge-info'}`}>
                            {evento.tipo_operacao === 'troca' ? '🔄 TROCA' : '↩️ DEVOLUÇÃO'}
                          </span>
                          <span className="evento-data">
                            📅 {new Date(evento.data_devolucao).toLocaleDateString('pt-BR')} às {new Date(evento.data_devolucao).toLocaleTimeString('pt-BR', {hour: '2-digit', minute: '2-digit'})}
                          </span>
                        </div>
                      </div>
                      
                      <div className="evento-produto">
                        <h4>🔙 Produto {evento.tipo_operacao === 'troca' ? 'Trocado' : 'Devolvido'}:</h4>
                        {evento.produto_info && (
                          <div className="produto-card">
                            <div className="produto-nome">{evento.produto_info.nome}</div>
                            <div className="produto-detalhes">
                              <span>📦 Código: {evento.produto_info.codigo || 'N/A'}</span>
                              <span>📏 Variação: {evento.produto_info.variacao}</span>
                              <span>🔢 Qtd. Devolvida: {evento.quantidade_devolvida}</span>
                              <span>💸 Valor: R$ {parseFloat(evento.valor_devolucao).toFixed(2)}</span>
                            </div>
                          </div>
                        )}
                      </div>

                      {evento.motivo && (
                        <div className="evento-motivo">
                          <h4>📝 Motivo:</h4>
                          <div className="motivo-texto">{evento.motivo}</div>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>

            <div className="modal-footer">
              <button 
                className="btn-cancelar"
                onClick={() => setShowHistoricoModal(false)}
              >
                <FiX />
                Fechar
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Devolucoes;