import React, { useState, useEffect } from 'react';
import { 
  FiPlus, 
  FiEdit, 
  FiTrash2, 
  FiSearch, 
  FiImage,
  FiPackage,
  FiEye,
  FiChevronLeft,
  FiChevronRight
} from 'react-icons/fi';
import { produtosAPI, fornecedoresAPI } from '../services/api';
import ViewToggle from '../components/ViewToggle';
import toast from 'react-hot-toast';

const BASE_MEDIA_URL = process.env.NODE_ENV === 'production' ? '' : 'http://localhost:5000';

const resolveImageUrl = (url) => {
  if (!url) return null;
  return url.startsWith('http') ? url : `${BASE_MEDIA_URL}${url}`;
};

const Produtos = () => {
  const [produtos, setProdutos] = useState([]);
  const [fornecedores, setFornecedores] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [viewMode, setViewMode] = useState('list');
  const [showModal, setShowModal] = useState(false);
  const [showVariacaoModal, setShowVariacaoModal] = useState(false);
  const [showImageModal, setShowImageModal] = useState(false);
  const [editingProduct, setEditingProduct] = useState(null);
  const [selectedImages, setSelectedImages] = useState([]);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const [selectedProduct, setSelectedProduct] = useState(null);
  const [variacoes, setVariacoes] = useState([]);

  const [formData, setFormData] = useState({
    id_produto: '',
    marca: '',
    nome: '',
    descricao: '',
    estacao: 'Verão',
    genero: 'Unissex',
    fornecedor_id: '',
    valor_compra: '',
    valor_revenda: '',
    tipo_calculo: 'porcentagem', // 'porcentagem' ou 'valor'
    margem_lucro: '',
    fotos_variacoes: []
  });

  const [variacaoData, setVariacaoData] = useState({
    tamanho: '',
    cor: '',
    quantidade: '',
    foto: null
  });

  const [novaFotoVariacao, setNovaFotoVariacao] = useState({
    fotos: [],
    tamanho: '',
    cor: '',
    quantidade: ''
  });

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

  // Navegação por teclado no modal de imagens
  useEffect(() => {
    const handleKeyPress = (e) => {
      if (showImageModal) {
        switch (e.key) {
          case 'Escape':
            setShowImageModal(false);
            break;
          case 'ArrowLeft':
            e.preventDefault();
            setCurrentImageIndex((prev) => 
              prev > 0 ? prev - 1 : selectedImages.length - 1
            );
            break;
          case 'ArrowRight':
            e.preventDefault();
            setCurrentImageIndex((prev) => 
              prev < selectedImages.length - 1 ? prev + 1 : 0
            );
            break;
        }
      }
    };

    if (showImageModal) {
      document.addEventListener('keydown', handleKeyPress);
      return () => document.removeEventListener('keydown', handleKeyPress);
    }
  }, [showImageModal, selectedImages.length]);

  const carregarDados = async () => {
    try {
      setLoading(true);
      const [produtosRes, fornecedoresRes] = await Promise.all([
        produtosAPI.listar(),
        fornecedoresAPI.listar()
      ]);
      setProdutos(produtosRes.data);
      setFornecedores(fornecedoresRes.data);
    } catch (error) {
      console.error('Erro ao carregar dados:', error);
      toast.error('Erro ao carregar produtos');
    } finally {
      setLoading(false);
    }
  };

  // Função para calcular valor de revenda automaticamente
  const calcularValorRevenda = (valorCompra, tipoCalculo, margemLucro) => {
    const compra = parseFloat(valorCompra) || 0;
    const margem = parseFloat(margemLucro) || 0;
    
    if (compra === 0 || margem === 0) return '';
    
    if (tipoCalculo === 'porcentagem') {
      return (compra * (1 + margem / 100)).toFixed(2);
    } else {
      return (compra + margem).toFixed(2);
    }
  };

  // Handler para mudança no valor de compra
  const handleValorCompraChange = (e) => {
    const novoValorCompra = e.target.value;
    const novoValorRevenda = calcularValorRevenda(novoValorCompra, formData.tipo_calculo, formData.margem_lucro);
    
    setFormData({
      ...formData, 
      valor_compra: novoValorCompra,
      valor_revenda: novoValorRevenda
    });
  };

  // Handler para mudança na margem de lucro
  const handleMargemChange = (e) => {
    const novaMargem = e.target.value;
    const novoValorRevenda = calcularValorRevenda(formData.valor_compra, formData.tipo_calculo, novaMargem);
    
    setFormData({
      ...formData, 
      margem_lucro: novaMargem,
      valor_revenda: novoValorRevenda
    });
  };

  // Função para gerar descrição com IA
  const handleGenerateDescription = async () => {
    if (!formData.marca || !formData.nome) {
      toast.error('Preencha marca e nome do produto primeiro');
      return;
    }

    try {
      const response = await fetch('/api/chatgpt/gerar-descricao', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          marca: formData.marca,
          nome: formData.nome,
          estacao: formData.estacao,
          genero: formData.genero
        }),
      });

      if (!response.ok) {
        throw new Error('Erro ao gerar descrição');
      }

      const data = await response.json();
      setFormData({...formData, descricao: data.descricao});
      toast.success('Descrição gerada com sucesso!');
    } catch (error) {
      console.error('Erro ao gerar descrição:', error);
      toast.error('Erro ao gerar descrição. Verifique as configurações da API.');
    }
  };

  const handleAddFotoVariacao = () => {
    if (!novaFotoVariacao.tamanho || !novaFotoVariacao.cor || !novaFotoVariacao.quantidade) {
      toast.error('Preencha tamanho, cor e quantidade');
      return;
    }

    const novaVariacao = {
      id: Date.now(),
      fotos: novaFotoVariacao.fotos ? [...novaFotoVariacao.fotos] : [],
      tamanho: novaFotoVariacao.tamanho,
      cor: novaFotoVariacao.cor,
      quantidade: parseInt(novaFotoVariacao.quantidade)
    };

    setFormData({
      ...formData,
      fotos_variacoes: [...formData.fotos_variacoes, novaVariacao]
    });

    setNovaFotoVariacao({
      fotos: [],
      tamanho: '',
      cor: '',
      quantidade: ''
    });

    toast.success('Variação adicionada! Adicione mais variações ou salve o produto.');
  };

  const handleRemoveFotoVariacao = (id) => {
    setFormData({
      ...formData,
      fotos_variacoes: formData.fotos_variacoes.filter(variacao => variacao.id !== id)
    });
  };

  const handleFotosChange = (e) => {
    const files = Array.from(e.target.files);
    setNovaFotoVariacao({
      ...novaFotoVariacao,
      fotos: files
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // Para edição, não exigir variações se já existem no produto
    if (!editingProduct && formData.fotos_variacoes.length === 0) {
      toast.error('Adicione pelo menos uma variação (tamanho, cor e quantidade)');
      return;
    }

    try {
      console.log('Iniciando envio do produto...', formData);
      
      // Usar armazenamento local
      
      const formDataToSend = new FormData();
      formDataToSend.append('id_produto', formData.id_produto || '');
      formDataToSend.append('marca', formData.marca);
      formDataToSend.append('nome', formData.nome);
      formDataToSend.append('descricao', formData.descricao || '');
      formDataToSend.append('estacao', formData.estacao);
      formDataToSend.append('genero', formData.genero);
      formDataToSend.append('fornecedor_id', formData.fornecedor_id || '');
      formDataToSend.append('valor_compra', formData.valor_compra);
      formDataToSend.append('valor_revenda', formData.valor_revenda);
      
      // Adicionar dados das variações apenas para criação
      if (!editingProduct) {
        const variacoesData = formData.fotos_variacoes.map(v => ({
          tamanho: v.tamanho,
          cor: v.cor,
          quantidade: v.quantidade,
          num_fotos: v.fotos.length
        }));
        
        console.log('Dados das variações:', variacoesData);
        formDataToSend.append('variacoes_data', JSON.stringify(variacoesData));
      }

      // Adicionar todas as fotos (apenas para criação)
      if (!editingProduct) {
        formData.fotos_variacoes.forEach((variacao, varIndex) => {
          variacao.fotos.forEach((foto, fotoIndex) => {
            console.log(`Adicionando foto ${fotoIndex} da variação ${varIndex}:`, foto.name);
            formDataToSend.append(`variacao_${varIndex}_foto_${fotoIndex}`, foto);
          });
        });
      }

      if (editingProduct) {
        await produtosAPI.atualizarComFoto(editingProduct.id, formDataToSend);
        toast.success('Produto atualizado com sucesso!');
      } else {
        const response = await produtosAPI.criarComFoto(formDataToSend);
        console.log('Resposta do servidor:', response);
        
        toast.success('Produto criado com sucesso!');
      }
      
      setShowModal(false);
      setEditingProduct(null);
      resetForm();
      carregarDados();
    } catch (error) {
      console.error('Erro completo ao salvar produto:', error);
      
      let errorMessage = 'Erro ao salvar produto';
      if (error.response && error.response.data && error.response.data.error) {
        errorMessage = error.response.data.error;
      } else if (error.message) {
        errorMessage = error.message;
      }
      
      toast.error(errorMessage);
    }
  };

  const resetForm = () => {
    setFormData({
      id_produto: '',
      marca: '',
      nome: '',
      estacao: 'Verão',
      genero: 'Unissex',
      fornecedor_id: '',
      valor_compra: '',
      valor_revenda: '',
      fotos_variacoes: []
    });
    setNovaFotoVariacao({
      fotos: [],
      tamanho: '',
      cor: '',
      quantidade: ''
    });
  };

  const handleEdit = (produto) => {
    setEditingProduct(produto);
    setFormData({
      id_produto: produto.id_produto || '',
      marca: produto.marca,
      nome: produto.nome,
      descricao: produto.descricao || '',
      estacao: produto.estacao,
      genero: produto.genero || 'Unissex',
      fornecedor_id: produto.fornecedor_id || '',
      valor_compra: produto.valor_compra,
      valor_revenda: produto.valor_revenda,
      tipo_calculo: 'porcentagem',
      margem_lucro: '',
      fotos_variacoes: []
    });
    setShowModal(true);
  };

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

  const handleViewImages = (produto) => {
    try {
      console.log('Produto selecionado:', produto);
      
      // Coletar todas as imagens do produto e suas variações
      const images = [];
      
      // Adicionar foto principal se existir
      if (produto.foto_principal_url) {
        images.push({
          url: resolveImageUrl(produto.foto_principal_url),
          title: `${produto.marca} - ${produto.nome}`,
          type: 'principal'
        });
      }
      
      // Adicionar fotos das variações
      if (produto.produto_variacoes && produto.produto_variacoes.length > 0) {
        produto.produto_variacoes.forEach((variacao) => {
          const fotosVariacao = Array.isArray(variacao.fotos) ? variacao.fotos : [];

          if (fotosVariacao.length > 0) {
            fotosVariacao.forEach((fotoUrl, index) => {
              images.push({
                url: resolveImageUrl(fotoUrl),
                title: `${produto.marca} - ${produto.nome} (${variacao.tamanho} - ${variacao.cor})` + (fotosVariacao.length > 1 ? ` - Foto ${index + 1}` : ''),
                type: 'variacao',
                variacao: variacao
              });
            });
          } else if (variacao.foto_url) {
            images.push({
              url: resolveImageUrl(variacao.foto_url),
              title: `${produto.marca} - ${produto.nome} (${variacao.tamanho} - ${variacao.cor})`,
              type: 'variacao',
              variacao: variacao
            });
          }
        });
      }
      
      console.log('Imagens encontradas:', images);
      
      if (images.length > 0) {
        setSelectedImages(images);
        setCurrentImageIndex(0);
        setSelectedProduct(produto);
        setShowImageModal(true);
      } else {
        // Criar uma imagem placeholder mais atrativa
        const placeholderImages = [{
          url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDQwMCA0MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIiBmaWxsPSIjRjNGNEY2Ii8+CjxwYXRoIGQ9Ik0xNjAgMTYwSDI0MFYyNDBIMTYwVjE2MFoiIGZpbGw9IiM5Q0EzQUYiLz4KPHBhdGggZD0iTTE4MCAyMDBMMjAwIDE4MEwyMjAgMjAwTDIwMCAyMjBMMTgwIDIwMFoiIGZpbGw9IiM2QjcyODAiLz4KPHN2ZyB4PSIxNzAiIHk9IjI4MCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjIwIj4KPHRleHQgeD0iMzAiIHk9IjE1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNkI3MjgwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTQiPkZvdG88L3RleHQ+Cjwvc3ZnPgo8L3N2Zz4=',
          title: `${produto.marca} - ${produto.nome}`,
          type: 'placeholder'
        }];
        
        setSelectedImages(placeholderImages);
        setCurrentImageIndex(0);
        setSelectedProduct(produto);
        setShowImageModal(true);
      }
    } catch (error) {
      console.error('Erro ao abrir modal de imagens:', error);
      alert('Erro ao carregar imagens do produto');
    }
  };

  const nextImage = () => {
    setCurrentImageIndex((prev) => 
      prev < selectedImages.length - 1 ? prev + 1 : 0
    );
  };

  const prevImage = () => {
    setCurrentImageIndex((prev) => 
      prev > 0 ? prev - 1 : selectedImages.length - 1
    );
  };

  const handleViewVariacoes = async (produto) => {
    try {
      setSelectedProduct(produto);
      const response = await produtosAPI.listarVariacoes(produto.id);
      setVariacoes(response.data);
      setShowVariacaoModal(true);
    } catch (error) {
      console.error('Erro ao carregar variações:', error);
      toast.error('Erro ao carregar variações do produto');
    }
  };

  const handleAddVariacao = async (e) => {
    e.preventDefault();
    try {
      const formDataToSend = new FormData();
      formDataToSend.append('tamanho', variacaoData.tamanho);
      formDataToSend.append('cor', variacaoData.cor);
      formDataToSend.append('quantidade', variacaoData.quantidade);
      if (variacaoData.foto) {
        formDataToSend.append('foto', variacaoData.foto);
      }

      await produtosAPI.adicionarVariacao(selectedProduct.id, formDataToSend);
      toast.success('Variação adicionada com sucesso!');
      
      // Recarregar variações
      const response = await produtosAPI.listarVariacoes(selectedProduct.id);
      setVariacoes(response.data);
      
      setVariacaoData({
        tamanho: '',
        cor: '',
        quantidade: '',
        foto: null
      });
    } catch (error) {
      console.error('Erro ao adicionar variação:', error);
      toast.error('Erro ao adicionar variação');
    }
  };

  const filteredProdutos = produtos.filter(produto =>
    produto.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
    produto.marca.toLowerCase().includes(searchTerm.toLowerCase())
  );

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

  return (
    <div className="produtos fade-in">
      <div className="page-header">
        <div>
          <h1>Produtos</h1>
          <p>Gerencie o catálogo de produtos da loja</p>
        </div>
        <div className="header-actions">
          <ViewToggle 
            viewMode={viewMode} 
            onViewModeChange={setViewMode} 
          />
          <button 
            className="btn btn-secondary btn-sm"
            onClick={async () => {
              try {
                const response = await fetch('/api/test');
                const data = await response.json();
                toast.success('API funcionando: ' + data.message);
              } catch (error) {
                toast.error('Erro na API: ' + error.message);
              }
            }}
          >
            Testar API
          </button>
          <button 
            className="btn btn-primary"
            onClick={() => setShowModal(true)}
          >
            <FiPlus />
            Novo Produto
          </button>
        </div>
      </div>

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

      {/* Lista de Produtos */}
      {filteredProdutos.length === 0 ? (
        <div className="empty-state">
          <FiPackage size={48} />
          <h3>Nenhum produto encontrado</h3>
          <p>Comece adicionando seu primeiro produto ao catálogo</p>
          <button 
            className="btn btn-primary"
            onClick={() => setShowModal(true)}
          >
            <FiPlus />
            Adicionar Produto
          </button>
        </div>
      ) : viewMode === 'cards' ? (
        <div className="products-grid">
          {filteredProdutos.map((produto) => (
            <div key={produto.id} className="product-card">
              <div className="product-image">
                <FiImage size={48} color="#9ca3af" />
                <span className="no-image-text">Clique em "Ver variações" para ver as fotos</span>
              </div>
              
              <div className="product-header">
                <div className="product-info">
                  <h3>{produto.nome}</h3>
                  <p className="product-brand">{produto.marca}</p>
                  {produto.id_produto && (
                    <p className="product-id">ID: {produto.id_produto}</p>
                  )}
                  <div className="product-badges">
                    <span className={`badge badge-${produto.estacao === 'Verão' ? 'warning' : produto.estacao === 'Inverno' ? 'info' : 'success'}`}>
                      {produto.estacao}
                    </span>
                    <span className={`badge badge-${produto.genero === 'Menino' ? 'info' : produto.genero === 'Menina' ? 'danger' : 'secondary'}`}>
                      {produto.genero || 'Unissex'}
                    </span>
                  </div>
                </div>
                <div className="product-actions">
                  <button 
                    className="btn-icon"
                    onClick={() => handleViewVariacoes(produto)}
                    title="Ver variações"
                  >
                    <FiEye />
                  </button>
                  <button 
                    className="btn-icon"
                    onClick={() => handleEdit(produto)}
                    title="Editar"
                  >
                    <FiEdit />
                  </button>
                  <button 
                    className="btn-icon btn-danger"
                    onClick={() => handleDelete(produto.id)}
                    title="Excluir"
                  >
                    <FiTrash2 />
                  </button>
                </div>
              </div>

              <div className="product-details">
                <div className="product-prices">
                  <div className="price-item">
                    <span className="price-label">Compra:</span>
                    <span className="price-value">
                      R$ {parseFloat(produto.valor_compra).toFixed(2)}
                    </span>
                  </div>
                  <div className="price-item">
                    <span className="price-label">Venda:</span>
                    <span className="price-value">
                      R$ {parseFloat(produto.valor_revenda).toFixed(2)}
                    </span>
                  </div>
                </div>

                <div className="product-stats">
                  <div className="stat-item">
                    <span className="stat-label">Variações:</span>
                    <span className="stat-value">{produto.total_variacoes || 0}</span>
                  </div>
                  <div className="stat-item">
                    <span className="stat-label">Estoque:</span>
                    <span className="stat-value">{produto.estoque_total || 0}</span>
                  </div>
                </div>

                {produto.fornecedor_nome && (
                  <div className="product-supplier">
                    <span className="supplier-label">Fornecedor:</span>
                    <span className="supplier-name">{produto.fornecedor_nome}</span>
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="list-view">
          <div className="list-header produtos-list-header">
            <span>Foto</span>
            <span>Produto</span>
            <span>Marca</span>
            <span>Estação</span>
            <span>Gênero</span>
            <span>Estoque</span>
            <span>Ações</span>
          </div>
          {filteredProdutos.map((produto) => (
            <div key={produto.id} className="list-item produtos-list-item">
              <div 
                className="list-item-image clickable-image" 
                onClick={() => handleViewImages(produto)}
                title="Clique para ver as imagens"
              >
                {produto.foto_principal_url || (produto.produto_variacoes && produto.produto_variacoes.find(v => v.foto_url)) ? (
                  <img 
                    src={resolveImageUrl(produto.foto_principal_url || produto.produto_variacoes.find(v => v.foto_url)?.foto_url)}
                    alt={produto.nome}
                    className="product-thumbnail"
                    onError={(e) => {
                      e.target.style.display = 'none';
                      e.target.nextSibling.style.display = 'block';
                    }}
                  />
                ) : null}
                <FiImage size={24} className={produto.foto_principal_url || (produto.produto_variacoes && produto.produto_variacoes.find(v => v.foto_url)) ? 'image-overlay' : ''} />
              </div>
              <div>
                <div style={{ fontWeight: '600' }}>{produto.nome}</div>
                {produto.id_produto && (
                  <div style={{ fontSize: '12px', color: '#6b7280' }}>ID: {produto.id_produto}</div>
                )}
              </div>
              <span>{produto.marca}</span>
              <span className={`list-item-badge ${produto.estacao.toLowerCase().replace(' ', '-')}`}>
                {produto.estacao}
              </span>
              <span className={`list-item-badge ${produto.genero?.toLowerCase() || 'unissex'}`}>
                {produto.genero || 'Unissex'}
              </span>
              <span>{produto.estoque_total || 0}</span>
              <div className="list-item-actions">
                <button 
                  className="btn-icon btn-sm"
                  onClick={() => handleViewVariacoes(produto)}
                  title="Ver variações"
                >
                  <FiEye />
                </button>
                <button 
                  className="btn-icon btn-sm"
                  onClick={() => handleEdit(produto)}
                  title="Editar"
                >
                  <FiEdit />
                </button>
                <button 
                  className="btn-icon btn-sm btn-danger"
                  onClick={() => handleDelete(produto.id)}
                  title="Excluir"
                >
                  <FiTrash2 />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Modal de Produto */}
      {showModal && (
        <div className="modal-overlay">
          <div className="modal">
            <div className="modal-header">
              <h2 className="modal-title">
                {editingProduct ? 'Editar Produto' : 'Novo Produto'}
              </h2>
              <button 
                className="modal-close"
                onClick={() => {
                  setShowModal(false);
                  setEditingProduct(null);
                  setFormData({
                    id_produto: '',
                    marca: '',
                    nome: '',
                    descricao: '',
                    estacao: 'Verão',
                    genero: 'Unissex',
                    fornecedor_id: '',
                    valor_compra: '',
                    valor_revenda: '',
                    tipo_calculo: 'porcentagem',
                    margem_lucro: '',
                    fotos_variacoes: []
                  });
                }}
              >
                ×
              </button>
            </div>

            <form onSubmit={handleSubmit}>
              <div className="form-group">
                <label className="form-label">ID do Produto</label>
                <input
                  type="text"
                  className="form-input"
                  value={formData.id_produto}
                  onChange={(e) => setFormData({...formData, id_produto: e.target.value})}
                  placeholder="Ex: LK001, VEST001, etc."
                />
              </div>

              <div className="grid grid-2">
                <div className="form-group">
                  <label className="form-label">Marca *</label>
                  <input
                    type="text"
                    className="form-input"
                    value={formData.marca}
                    onChange={(e) => setFormData({...formData, marca: e.target.value})}
                    required
                  />
                </div>

                <div className="form-group">
                  <label className="form-label">Nome do Produto *</label>
                  <input
                    type="text"
                    className="form-input"
                    value={formData.nome}
                    onChange={(e) => setFormData({...formData, nome: e.target.value})}
                    required
                  />
                </div>
              </div>

              <div className="form-group">
                <label className="form-label">Descrição do Produto</label>
                <div className="description-input-group">
                  <textarea
                    className="form-textarea"
                    rows={3}
                    value={formData.descricao}
                    onChange={(e) => setFormData({...formData, descricao: e.target.value})}
                    placeholder="Descreva o produto (opcional)"
                  />
                  <button
                    type="button"
                    className="btn btn-secondary btn-sm ai-description-btn"
                    onClick={handleGenerateDescription}
                    disabled={!formData.marca || !formData.nome}
                    title="Gerar descrição com IA"
                  >
                    ✨ Gerar com IA
                  </button>
                </div>
                <small className="form-help">
                  Preencha marca e nome do produto para gerar descrição automática com IA
                </small>
              </div>

              <div className="grid grid-2">

                <div className="form-group">
                  <label className="form-label">Estação *</label>
                  <select
                    className="form-select"
                    value={formData.estacao}
                    onChange={(e) => setFormData({...formData, estacao: e.target.value})}
                    required
                  >
                    <option value="Verão">Verão</option>
                    <option value="Inverno">Inverno</option>
                    <option value="Meia Estação">Meia Estação</option>
                  </select>
                </div>

                <div className="form-group">
                  <label className="form-label">Gênero *</label>
                  <select
                    className="form-select"
                    value={formData.genero}
                    onChange={(e) => setFormData({...formData, genero: e.target.value})}
                    required
                  >
                    <option value="Menino">Menino</option>
                    <option value="Menina">Menina</option>
                    <option value="Unissex">Unissex</option>
                  </select>
                </div>

                <div className="form-group">
                  <label className="form-label">Fornecedor</label>
                  <select
                    className="form-select"
                    value={formData.fornecedor_id}
                    onChange={(e) => setFormData({...formData, fornecedor_id: e.target.value})}
                  >
                    <option value="">Selecione um fornecedor</option>
                    {fornecedores.map((fornecedor) => (
                      <option key={fornecedor.id} value={fornecedor.id}>
                        {fornecedor.nome}
                      </option>
                    ))}
                  </select>
                </div>

                <div className="form-group">
                  <label className="form-label">Valor de Compra *</label>
                  <input
                    type="number"
                    step="0.01"
                    className="form-input"
                    value={formData.valor_compra}
                    onChange={handleValorCompraChange}
                    required
                  />
                </div>

                <div className="form-group">
                  <label className="form-label">Tipo de Cálculo</label>
                  <select
                    className="form-select"
                    value={formData.tipo_calculo}
                    onChange={(e) => setFormData({...formData, tipo_calculo: e.target.value})}
                  >
                    <option value="porcentagem">Margem em %</option>
                    <option value="valor">Valor Fixo</option>
                  </select>
                </div>

                <div className="form-group">
                  <label className="form-label">
                    {formData.tipo_calculo === 'porcentagem' ? 'Margem de Lucro (%)' : 'Lucro (R$)'}
                  </label>
                  <input
                    type="number"
                    step={formData.tipo_calculo === 'porcentagem' ? '0.1' : '0.01'}
                    className="form-input"
                    value={formData.margem_lucro}
                    onChange={handleMargemChange}
                    placeholder={formData.tipo_calculo === 'porcentagem' ? 'Ex: 50 (para 50%)' : 'Ex: 25.00'}
                  />
                </div>

                <div className="form-group">
                  <label className="form-label">Valor de Revenda *</label>
                  <input
                    type="number"
                    step="0.01"
                    className="form-input valor-revenda-calculado"
                    value={formData.valor_revenda}
                    onChange={(e) => setFormData({...formData, valor_revenda: e.target.value})}
                    required
                  />
                  <small className="form-help">
                    {formData.valor_compra && formData.valor_revenda && (
                      <span className="lucro-info">
                        Lucro: R$ {(parseFloat(formData.valor_revenda || 0) - parseFloat(formData.valor_compra || 0)).toFixed(2)} 
                        ({formData.valor_compra > 0 ? (((parseFloat(formData.valor_revenda || 0) - parseFloat(formData.valor_compra || 0)) / parseFloat(formData.valor_compra)) * 100).toFixed(1) : 0}%)
                      </span>
                    )}
                  </small>
                </div>
              </div>

              {/* Sistema de Fotos com Variações */}
              <div className="fotos-variacoes-section">
                <h3>Fotos e Variações do Produto</h3>
                <p className="form-description">
                  Adicione conjuntos de fotos para cada variação (cor, tamanho, quantidade). 
                  Cada conjunto pode ter múltiplas fotos da mesma variação.
                </p>

                {/* Formulário para adicionar nova variação */}
                <div className="add-foto-variacao-form">
                  <h4>Adicionar Nova Variação</h4>
                  
                  <div className="grid grid-3">
                    <div className="form-group">
                      <label className="form-label">Tamanho *</label>
                      <input
                        type="text"
                        className="form-input"
                        value={novaFotoVariacao.tamanho}
                        onChange={(e) => setNovaFotoVariacao({...novaFotoVariacao, tamanho: e.target.value})}
                        placeholder="Ex: P, M, G, 2, 4, 6"
                      />
                    </div>

                    <div className="form-group">
                      <label className="form-label">Cor *</label>
                      <input
                        type="text"
                        className="form-input"
                        value={novaFotoVariacao.cor}
                        onChange={(e) => setNovaFotoVariacao({...novaFotoVariacao, cor: e.target.value})}
                        placeholder="Ex: Azul, Rosa, Branco"
                      />
                    </div>

                    <div className="form-group">
                      <label className="form-label">Quantidade *</label>
                      <input
                        type="number"
                        className="form-input"
                        value={novaFotoVariacao.quantidade}
                        onChange={(e) => setNovaFotoVariacao({...novaFotoVariacao, quantidade: e.target.value})}
                        min="0"
                        placeholder="Qtd em estoque"
                      />
                    </div>
                  </div>

                  <div className="form-group">
                    <label className="form-label">Fotos desta Variação (Opcional)</label>
                    <input
                      type="file"
                      className="form-input"
                      accept="image/*"
                      multiple
                      onChange={handleFotosChange}
                    />
                    <small className="form-help">
                      Selecione uma ou mais fotos para esta variação específica (Ctrl+clique para múltiplas fotos). As fotos são opcionais.
                    </small>
                    {novaFotoVariacao.fotos.length > 0 && (
                      <div className="selected-files">
                        <strong>{novaFotoVariacao.fotos.length} foto(s) selecionada(s):</strong>
                        <ul>
                          {Array.from(novaFotoVariacao.fotos).map((file, index) => (
                            <li key={index}>{file.name}</li>
                          ))}
                        </ul>
                      </div>
                    )}
                  </div>

                  <button 
                    type="button" 
                    className="btn btn-secondary btn-sm"
                    onClick={handleAddFotoVariacao}
                  >
                    <FiPlus />
                    Adicionar Variação
                  </button>
                </div>

                {/* Lista de variações adicionadas */}
                {formData.fotos_variacoes.length > 0 && (
                  <div className="variacoes-adicionadas">
                    <h4>Variações Adicionadas ({formData.fotos_variacoes.length})</h4>
                    <div className="variacoes-list-form">
                      {formData.fotos_variacoes.map((variacao) => (
                        <div key={variacao.id} className="variacao-item">
                          <div className="variacao-info">
                            <strong>{variacao.tamanho} - {variacao.cor}</strong>
                            <span>Quantidade: {variacao.quantidade}</span>
                            <span>{variacao.fotos.length} foto(s)</span>
                          </div>
                          <button 
                            type="button"
                            className="btn-icon btn-danger"
                            onClick={() => handleRemoveFotoVariacao(variacao.id)}
                            title="Remover variação"
                          >
                            <FiTrash2 />
                          </button>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>

              <div className="modal-actions">
                <button 
                  type="button" 
                  className="btn btn-secondary"
                  onClick={() => {
                    setShowModal(false);
                    setEditingProduct(null);
                  }}
                >
                  Cancelar
                </button>
                <button type="submit" className="btn btn-primary">
                  {editingProduct ? 'Atualizar' : 'Criar'} Produto
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Modal de Variações */}
      {showVariacaoModal && selectedProduct && (
        <div className="modal-overlay">
          <div className="modal modal-lg">
            <div className="modal-header">
              <h2 className="modal-title">
                Variações - {selectedProduct.nome}
              </h2>
              <button 
                className="modal-close"
                onClick={() => {
                  setShowVariacaoModal(false);
                  setSelectedProduct(null);
                  setVariacoes([]);
                }}
              >
                ×
              </button>
            </div>

            <div className="variacao-content">
              {/* Formulário para adicionar variação */}
              <div className="add-variacao-form">
                <h3>Adicionar Nova Variação com Foto</h3>
                <p className="form-description">
                  Cada variação representa uma combinação única de tamanho, cor e quantidade. 
                  Você pode adicionar uma foto específica para cada variação.
                </p>
                <form onSubmit={handleAddVariacao}>
                  <div className="grid grid-2">
                    <div className="form-group">
                      <label className="form-label">Tamanho *</label>
                      <input
                        type="text"
                        className="form-input"
                        value={variacaoData.tamanho}
                        onChange={(e) => setVariacaoData({...variacaoData, tamanho: e.target.value})}
                        placeholder="Ex: P, M, G, 2, 4, 6, 8, 10, 12"
                        required
                      />
                    </div>

                    <div className="form-group">
                      <label className="form-label">Cor *</label>
                      <input
                        type="text"
                        className="form-input"
                        value={variacaoData.cor}
                        onChange={(e) => setVariacaoData({...variacaoData, cor: e.target.value})}
                        placeholder="Ex: Azul, Rosa, Branco, Vermelho"
                        required
                      />
                    </div>

                    <div className="form-group">
                      <label className="form-label">Quantidade em Estoque *</label>
                      <input
                        type="number"
                        className="form-input"
                        value={variacaoData.quantidade}
                        onChange={(e) => setVariacaoData({...variacaoData, quantidade: e.target.value})}
                        min="0"
                        placeholder="Quantidade disponível"
                        required
                      />
                    </div>

                    <div className="form-group">
                      <label className="form-label">Foto da Variação</label>
                      <input
                        type="file"
                        className="form-input"
                        accept="image/*"
                        onChange={(e) => setVariacaoData({...variacaoData, foto: e.target.files[0]})}
                      />
                      <small className="form-help">
                        Adicione uma foto específica para esta combinação de cor e tamanho
                      </small>
                    </div>
                  </div>

                  <button type="submit" className="btn btn-primary btn-sm">
                    <FiPlus />
                    Adicionar Variação
                  </button>
                </form>
              </div>

              {/* Lista de variações */}
              <div className="variacoes-list">
                <h3>Variações Existentes</h3>
                {variacoes.length === 0 ? (
                  <div className="empty-variacoes">
                    <FiImage size={32} />
                    <p>Nenhuma variação cadastrada</p>
                  </div>
                ) : (
                  <div className="variacoes-grid">
                    {variacoes.map((variacao) => (
                      <div key={variacao.id} className="variacao-card">
                        {variacao.foto_url && (
                          <div className="variacao-image">
                            <img 
                              src={resolveImageUrl(variacao.foto_url)} 
                              alt={`${variacao.cor} - ${variacao.tamanho}`}
                              onError={(e) => {
                                e.target.style.display = 'none';
                                e.target.nextSibling.style.display = 'flex';
                              }}
                            />
                            <div className="no-image" style={{ display: 'none' }}>
                              <FiImage />
                            </div>
                          </div>
                        )}
                        <div className="variacao-info">
                          <div className="variacao-details">
                            <span className="variacao-size">{variacao.tamanho}</span>
                            <span className="variacao-color">{variacao.cor}</span>
                          </div>
                          <div className="variacao-stock">
                            <span className="stock-label">Estoque:</span>
                            <span className="stock-value">{variacao.quantidade}</span>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Modal de Visualização de Imagens */}
      {showImageModal && (
        <div className="modal-overlay" onClick={() => setShowImageModal(false)}>
          <div className="image-modal" onClick={(e) => e.stopPropagation()}>
            <div className="image-modal-header">
              <div className="image-modal-info">
                <h3>{selectedProduct?.marca} - {selectedProduct?.nome}</h3>
                {selectedImages[currentImageIndex] && (
                  <p>{selectedImages[currentImageIndex].title}</p>
                )}
                <span className="image-counter">
                  {currentImageIndex + 1} de {selectedImages.length}
                </span>
              </div>
              <button 
                className="modal-close"
                onClick={() => setShowImageModal(false)}
              >
                ×
              </button>
            </div>
            
            <div className="image-modal-content">
              {selectedImages[currentImageIndex] && (
                <div className="image-container">
                  <img 
                    src={selectedImages[currentImageIndex].url} 
                    alt={selectedImages[currentImageIndex].title}
                    className="modal-image"
                  />
                  
                  {selectedImages.length > 1 && (
                    <>
                      <button 
                        className="image-nav prev"
                        onClick={prevImage}
                        title="Imagem anterior"
                      >
                        <FiChevronLeft size={24} />
                      </button>
                      <button 
                        className="image-nav next"
                        onClick={nextImage}
                        title="Próxima imagem"
                      >
                        <FiChevronRight size={24} />
                      </button>
                    </>
                  )}
                </div>
              )}
              
              <div className="image-details">
                {selectedImages[currentImageIndex]?.type === 'variacao' && (
                  <>
                    <h4>Detalhes da Variação:</h4>
                    <p><strong>Tamanho:</strong> {selectedImages[currentImageIndex].variacao.tamanho}</p>
                    <p><strong>Cor:</strong> {selectedImages[currentImageIndex].variacao.cor}</p>
                    <p><strong>Quantidade:</strong> {selectedImages[currentImageIndex].variacao.quantidade}</p>
                  </>
                )}
                
                {selectedImages[currentImageIndex]?.type === 'placeholder' && (
                  <>
                    <h4>📷 Sem Imagens</h4>
                    <p>Este produto ainda não possui imagens cadastradas.</p>
                    <p>Para adicionar imagens, edite o produto e faça upload das fotos nas variações.</p>
                    <div style={{ marginTop: '16px' }}>
                      <button 
                        className="btn btn-primary"
                        onClick={() => {
                          setShowImageModal(false);
                          handleEdit(selectedProduct);
                        }}
                      >
                        <FiEdit />
                        Editar Produto e Adicionar Fotos
                      </button>
                    </div>
                  </>
                )}
                
                {selectedImages[currentImageIndex]?.type === 'principal' && (
                  <>
                    <h4>Foto Principal</h4>
                    <p>Esta é a imagem principal do produto.</p>
                  </>
                )}
              </div>
            </div>
            
            {selectedImages.length > 1 && (
              <div className="image-thumbnails">
                {selectedImages.map((image, index) => (
                  <div 
                    key={index}
                    className={`thumbnail ${index === currentImageIndex ? 'active' : ''}`}
                    onClick={() => setCurrentImageIndex(index)}
                  >
                    <img src={image.url} alt={image.title} />
                    <span className="thumbnail-label">
                      {image.type === 'principal' ? 'Principal' : 
                       `${image.variacao.tamanho} - ${image.variacao.cor}`}
                    </span>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
};

export default Produtos;
