import React, { useState, useEffect } from 'react';
import { 
  FiPackage, 
  FiUsers, 
  FiTruck, 
  FiDollarSign, 
  FiShoppingCart,
  FiTrendingUp,
  FiTrendingDown,
  FiBox,
  FiX,
  FiPlus,
  FiMessageCircle,
  FiCalendar,
  FiClock,
  FiAlertCircle
} from 'react-icons/fi';
import { 
  BarChart, 
  Bar, 
  XAxis, 
  YAxis, 
  CartesianGrid, 
  Tooltip, 
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell
} from 'recharts';
import { dashboardAPI, clientesAPI, despesasAPI, fornecedoresAPI } from '../services/api';
import toast from 'react-hot-toast';

const Dashboard = () => {

  const enviarWhatsAppAutomatico = 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: 'Cliente' })
      });
      const data = await response.json();
      if (!response.ok) {
        console.error('Erro ao enviar WhatsApp automático:', data.error);
        return false;
      }
      return true;
    } catch (error) {
      console.error('Erro ao enviar WhatsApp automático:', error);
      return false;
    }
  };
  const [dashboardData, setDashboardData] = useState({
    contabilidade: {
      receitaBruta: 0,
      custosProdutos: 0,
      totalDespesas: 0,
      lucroReal: 0,
      margemLucro: 0
    },
    resumoFinanceiro: {
      receitasMes: 0,
      despesasMes: 0,
      lucroEstimado: 0,
      totalVendas: 0
    },
    emprestimos: {
      totalAberto: 0,
      totalQuitado: 0,
      quantidade: 0
    },
    vendasPrazo: {
      total: 0,
      quantidade: 0,
      vendas: []
    },
    parcelasPendentes: {
      quantidade: 0,
      parcelas: []
    },
    estatisticas: {
      totalProdutos: 0,
      totalClientes: 0,
      totalFornecedores: 0,
      estoqueTotal: 0
    }
  });
  const [loading, setLoading] = useState(true);
  
  // Estados dos modais
  const [showProdutoModal, setShowProdutoModal] = useState(false);
  const [showClienteModal, setShowClienteModal] = useState(false);
  const [showDespesaModal, setShowDespesaModal] = useState(false);
  const [showVendaModal, setShowVendaModal] = useState(false);
  
  // Estados dos formulários
  const [fornecedores, setFornecedores] = useState([]);
  const [tiposDespesas, setTiposDespesas] = useState([]);
  const [clientes, setClientes] = useState([]);
  const [vendasPrazo, setVendasPrazo] = useState([]);
  const [loadingVendasPrazo, setLoadingVendasPrazo] = useState(false);

  useEffect(() => {
    carregarDashboard();
    carregarVendasPrazo();
  }, []);

  const carregarDashboard = async () => {
    try {
      setLoading(true);
      const [dashboardRes, fornecedoresRes, tiposRes, clientesRes] = await Promise.all([
        dashboardAPI.obterEstatisticas(),
        fornecedoresAPI.listar(),
        despesasAPI.listarTipos(),
        clientesAPI.listar()
      ]);
      
      setDashboardData(dashboardRes.data);
      setFornecedores(fornecedoresRes.data);
      setTiposDespesas(tiposRes.data);
      setClientes(clientesRes.data);
    } catch (error) {
      console.error('Erro ao carregar dashboard:', error);
      toast.error('Erro ao carregar dados do dashboard');
    } finally {
      setLoading(false);
    }
  };

  const carregarVendasPrazo = async () => {
    try {
      setLoadingVendasPrazo(true);
      const response = await fetch('/api/vendas/prazo');
      if (response.ok) {
        const data = await response.json();
        setVendasPrazo(data);
      }
    } catch (error) {
      console.error('Erro ao carregar vendas a prazo:', error);
    } finally {
      setLoadingVendasPrazo(false);
    }
  };

  const enviarWhatsApp = async (venda) => {
    try {
      const telefone = (venda?.cliente_whatsapp || venda?.cliente_telefone || '').replace(/\D/g, '');
      if (!telefone) {
        toast.error('Cliente sem telefone/whatsapp cadastrado');
        return;
      }

      const valorFinal = parseFloat(venda.valor_total) - parseFloat(venda.desconto || 0);
      const valorFormatado = valorFinal.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
      const mensagem = `Olá ${venda.cliente_nome || ''}! Lembramos que sua parcela de ${valorFormatado} está próxima do vencimento. Entre em contato conosco se precisar de ajuda.`;

      const enviado = await enviarWhatsAppAutomatico({ telefone, mensagem });
      if (enviado) {
        toast.success('Mensagem enviada com sucesso!');
      } else {
        toast.error('Não foi possível enviar a mensagem.');
      }
    } catch (error) {
      console.error('Erro ao enviar WhatsApp:', error);
      toast.error('Erro ao enviar mensagem');
    }
  };

  const formatarDataVencimento = (data) => {
    const dataVencimento = new Date(data);
    const hoje = new Date();
    const diffTime = dataVencimento - hoje;
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    
    if (diffDays < 0) {
      return { texto: `${Math.abs(diffDays)} dias em atraso`, classe: 'vencido' };
    } else if (diffDays === 0) {
      return { texto: 'Vence hoje', classe: 'hoje' };
    } else if (diffDays === 1) {
      return { texto: 'Vence amanhã', classe: 'amanha' };
    } else if (diffDays <= 7) {
      return { texto: `${diffDays} dias`, classe: 'proximo' };
    } else {
      return { texto: `${diffDays} dias`, classe: 'futuro' };
    }
  };

  // Dados mockados para os gráficos (em um cenário real, viriam da API)
  const vendasPorMes = [
    { mes: 'Jan', vendas: 12, valor: 2400 },
    { mes: 'Fev', vendas: 19, valor: 3800 },
    { mes: 'Mar', vendas: 15, valor: 3200 },
    { mes: 'Abr', vendas: 25, valor: 5100 },
    { mes: 'Mai', vendas: 22, valor: 4600 },
    { mes: 'Jun', vendas: 30, valor: 6200 },
  ];

  const produtosPorCategoria = [
    { name: 'Verão', value: 45, color: '#667eea' },
    { name: 'Inverno', value: 35, color: '#764ba2' },
    { name: 'Meia Estação', value: 20, color: '#f093fb' },
  ];

  const contabilidade = dashboardData?.contabilidade || {};
  const resumoFinanceiro = dashboardData?.resumoFinanceiro || {};
  const emprestimosResumo = dashboardData?.emprestimos || {};
  const vendasPrazoResumo = dashboardData?.vendasPrazo || {};
  const parcelasResumo = dashboardData?.parcelasPendentes || {};
  const estatisticasResumo = dashboardData?.estatisticas || {};

  const formatCurrency = (valor) =>
    Number(valor || 0).toLocaleString('pt-BR', {
      style: 'currency',
      currency: 'BRL'
    });

  const stats = {
    totalProdutos: { count: estatisticasResumo.totalProdutos || 0 },
    totalClientes: { count: estatisticasResumo.totalClientes || 0 },
    totalFornecedores: { count: estatisticasResumo.totalFornecedores || 0 },
    vendasMes: {
      total: resumoFinanceiro.receitasMes || 0,
      count: resumoFinanceiro.totalVendas || 0
    },
    estoqueTotal: { total: estatisticasResumo.estoqueTotal || 0 },
    despesasMes: { total: contabilidade.totalDespesas || 0 }
  };

  const estatisticas = [
    {
      title: 'Total de Produtos',
      value: stats.totalProdutos?.count || 0,
      icon: FiPackage,
      color: '#667eea',
      bgColor: '#eef2ff',
      trend: '+12%',
      trendUp: true
    },
    {
      title: 'Clientes Cadastrados',
      value: stats.totalClientes?.count || 0,
      icon: FiUsers,
      color: '#10b981',
      bgColor: '#ecfdf5',
      trend: '+8%',
      trendUp: true
    },
    {
      title: 'Fornecedores',
      value: stats.totalFornecedores?.count || 0,
      icon: FiTruck,
      color: '#f59e0b',
      bgColor: '#fffbeb',
      trend: '+2%',
      trendUp: true
    },
    {
      title: 'Vendas do Mês',
      value: stats.vendasMes?.count || 0,
      icon: FiShoppingCart,
      color: '#ef4444',
      bgColor: '#fef2f2',
      trend: '-5%',
      trendUp: false
    },
    {
      title: 'Estoque Total',
      value: stats.estoqueTotal?.total || 0,
      icon: FiBox,
      color: '#8b5cf6',
      bgColor: '#f5f3ff',
      trend: '+15%',
      trendUp: true
    },
    {
      title: 'Faturamento Mensal',
      value: formatCurrency(resumoFinanceiro.receitasMes),
      icon: FiDollarSign,
      color: '#06b6d4',
      bgColor: '#ecfeff',
      trend: '+18%',
      trendUp: true
    }
  ];

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

  return (
    <div className="dashboard fade-in">
      <div className="dashboard-header">
        <h1>Dashboard</h1>
        <p>Visão geral do seu negócio</p>
      </div>

      {/* Resumo Financeiro e Ações Rápidas - MOVIDO PARA O TOPO */}
      <div className="quick-summary">
        <div className="summary-card">
          <h3>Resumo Financeiro</h3>
          <div className="summary-items">
            <div className="summary-item">
              <span className="summary-label">Receita do Mês:</span>
              <span className="summary-value positive">
                {formatCurrency(resumoFinanceiro.receitasMes)}
              </span>
            </div>
            <div className="summary-item">
              <span className="summary-label">Despesas do Mês:</span>
              <span className="summary-value negative">
                {formatCurrency(resumoFinanceiro.despesasMes || contabilidade.totalDespesas)}
              </span>
            </div>
            <div className="summary-item">
              <span className="summary-label">Lucro Estimado:</span>
              <span className="summary-value positive">
                {formatCurrency(resumoFinanceiro.lucroEstimado ?? contabilidade.lucroReal)}
              </span>
            </div>
          </div>
        </div>

        {/* Vendas a Prazo e Recebimentos */}
        <div className="summary-card vendas-prazo-card">
          <div className="vendas-prazo-header">
            <h3>
              <FiCalendar />
              Vendas a Prazo & Recebimentos
            </h3>
            <button 
              className="btn btn-sm btn-secondary"
              onClick={carregarVendasPrazo}
              disabled={loadingVendasPrazo}
            >
              {loadingVendasPrazo ? 'Carregando...' : 'Atualizar'}
            </button>
          </div>
          
          <div className="vendas-prazo-content">
            <div className="vendas-prazo-stats">
              <span>Total pendente: {formatCurrency(vendasPrazoResumo.total)}</span>
              <span>Vendas: {vendasPrazoResumo.quantidade || 0}</span>
              <span>Parcelas pendentes: {parcelasResumo.quantidade || 0}</span>
            </div>
            {loadingVendasPrazo ? (
              <div className="loading-vendas">Carregando vendas...</div>
            ) : vendasPrazo.length === 0 ? (
              <div className="empty-vendas">
                <FiClock />
                <p>Nenhuma venda a prazo encontrada</p>
              </div>
            ) : (
              <div className="vendas-prazo-list">
                {vendasPrazo.slice(0, 5).map((venda) => {
                  const vencimento = formatarDataVencimento(venda.data_vencimento);
                  return (
                    <div key={venda.id} className={`venda-prazo-item ${vencimento.classe}`}>
                      <div className="venda-info">
                        <div className="cliente-nome">{venda.cliente_nome}</div>
                        <div className="venda-detalhes">
                          <span className="valor">
                            R$ {parseFloat(venda.valor_parcela).toLocaleString('pt-BR', { minimumFractionDigits: 2 })}
                          </span>
                          <span className="parcela">
                            {venda.parcela_atual}/{venda.total_parcelas}
                          </span>
                        </div>
                      </div>
                      <div className="venda-vencimento">
                        <span className={`vencimento-badge ${vencimento.classe}`}>
                          {vencimento.texto}
                        </span>
                        {(venda.cliente_whatsapp || venda.cliente_telefone) && (
                          <button
                            className="btn-whatsapp"
                            onClick={() => enviarWhatsApp(venda)}
                            title="Enviar lembrete via WhatsApp"
                          >
                            <FiMessageCircle />
                          </button>
                        )}
                      </div>
                    </div>
                  );
                })}
                {vendasPrazo.length > 5 && (
                  <div className="ver-mais">
                    <button className="btn btn-link">
                      Ver todas as {vendasPrazo.length} vendas a prazo
                    </button>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>

        <div className="summary-card">
          <h3>Empréstimos</h3>
          <div className="summary-items">
            <div className="summary-item">
              <span className="summary-label">Em aberto:</span>
              <span className="summary-value negative">
                {formatCurrency(emprestimosResumo.totalAberto)}
              </span>
            </div>
            <div className="summary-item">
              <span className="summary-label">Quitado:</span>
              <span className="summary-value positive">
                {formatCurrency(emprestimosResumo.totalQuitado)}
              </span>
            </div>
            <div className="summary-item">
              <span className="summary-label">Contratos:</span>
              <span className="summary-value">
                {emprestimosResumo.quantidade || 0}
              </span>
            </div>
          </div>
        </div>
      </div>


      <div className="stats-grid">
        {estatisticas.map((item) => (
          <div key={item.title} className="stat-card" style={{ backgroundColor: item.bgColor }}>
            <div className="stat-icon" style={{ color: item.color }}>
              <item.icon size={22} />
            </div>
            <div className="stat-content">
              <span className="stat-title">{item.title}</span>
              <span className="stat-value">{item.value}</span>
              <span className={`stat-trend ${item.trendUp ? 'up' : 'down'}`}>
                {item.trend}
              </span>
            </div>
          </div>
        ))}
      </div>


      {/* Gráficos */}
      <div className="charts-grid">
        {/* Gráfico de Vendas por Mês */}
        <div className="chart-card">
          <div className="chart-header">
            <h3>Vendas por Mês</h3>
            <p>Últimos 6 meses</p>
          </div>
          <div className="chart-container">
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={vendasPorMes}>
                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                <XAxis 
                  dataKey="mes" 
                  stroke="#6b7280"
                  fontSize={12}
                />
                <YAxis 
                  stroke="#6b7280"
                  fontSize={12}
                />
                <Tooltip 
                  contentStyle={{
                    backgroundColor: 'white',
                    border: '1px solid #e5e7eb',
                    borderRadius: '8px',
                    boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'
                  }}
                />
                <Bar 
                  dataKey="vendas" 
                  fill="url(#colorGradient)"
                  radius={[4, 4, 0, 0]}
                />
                <defs>
                  <linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="#667eea" stopOpacity={0.9}/>
                    <stop offset="95%" stopColor="#764ba2" stopOpacity={0.9}/>
                  </linearGradient>
                </defs>
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>

        {/* Gráfico de Produtos por Categoria */}
        <div className="chart-card">
          <div className="chart-header">
            <h3>Produtos por Estação</h3>
            <p>Distribuição do estoque</p>
          </div>
          <div className="chart-container">
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={produtosPorCategoria}
                  cx="50%"
                  cy="50%"
                  innerRadius={60}
                  outerRadius={100}
                  paddingAngle={5}
                  dataKey="value"
                >
                  {produtosPorCategoria.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip 
                  contentStyle={{
                    backgroundColor: 'white',
                    border: '1px solid #e5e7eb',
                    borderRadius: '8px',
                    boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'
                  }}
                />
              </PieChart>
            </ResponsiveContainer>
            <div className="pie-legend">
              {produtosPorCategoria.map((item, index) => (
                <div key={index} className="legend-item">
                  <div 
                    className="legend-color"
                    style={{ backgroundColor: item.color }}
                  ></div>
                  <span>{item.name}</span>
                  <span className="legend-value">{item.value}%</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Modais */}
      {showClienteModal && (
        <div className="modal-overlay">
          <div className="modal">
            <div className="modal-header">
              <h2>Novo Cliente</h2>
              <button 
                className="btn-icon"
                onClick={() => setShowClienteModal(false)}
              >
                <FiX />
              </button>
            </div>
            <div className="modal-content">
              <form onSubmit={async (e) => {
                e.preventDefault();
                const formData = new FormData(e.target);
                try {
                  await clientesAPI.criar({
                    nome_completo: formData.get('nome_completo'),
                    email: formData.get('email'),
                    telefone: formData.get('telefone'),
                    whatsapp: formData.get('whatsapp'),
                    endereco: formData.get('endereco')
                  });
                  toast.success('Cliente criado com sucesso!');
                  setShowClienteModal(false);
                  carregarDashboard();
                } catch (error) {
                  toast.error('Erro ao criar cliente');
                }
              }}>
                <div className="form-group">
                  <label className="form-label">Nome Completo *</label>
                  <input type="text" name="nome_completo" className="form-input" required />
                </div>
                <div className="grid grid-2">
                  <div className="form-group">
                    <label className="form-label">Email</label>
                    <input type="email" name="email" className="form-input" />
                  </div>
                  <div className="form-group">
                    <label className="form-label">Telefone</label>
                    <input type="text" name="telefone" className="form-input" />
                  </div>
                </div>
                <div className="grid grid-2">
                  <div className="form-group">
                    <label className="form-label">WhatsApp</label>
                    <input type="text" name="whatsapp" className="form-input" />
                  </div>
                  <div className="form-group">
                    <label className="form-label">Endereço</label>
                    <input type="text" name="endereco" className="form-input" />
                  </div>
                </div>
                <div className="modal-actions">
                  <button type="button" className="btn btn-secondary" onClick={() => setShowClienteModal(false)}>
                    Cancelar
                  </button>
                  <button type="submit" className="btn btn-primary">
                    <FiPlus />
                    Criar Cliente
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      )}

      {showDespesaModal && (
        <div className="modal-overlay">
          <div className="modal">
            <div className="modal-header">
              <h2>Nova Despesa</h2>
              <button 
                className="btn-icon"
                onClick={() => setShowDespesaModal(false)}
              >
                <FiX />
              </button>
            </div>
            <div className="modal-content">
              <form onSubmit={async (e) => {
                e.preventDefault();
                const formData = new FormData(e.target);
                try {
                  await despesasAPI.criar({
                    tipo_despesa_id: formData.get('tipo_despesa_id'),
                    fornecedor_id: formData.get('fornecedor_id') || null,
                    data_despesa: formData.get('data_despesa'),
                    valor: parseFloat(formData.get('valor')),
                    descricao: formData.get('descricao')
                  });
                  toast.success('Despesa criada com sucesso!');
                  setShowDespesaModal(false);
                  carregarDashboard();
                } catch (error) {
                  toast.error('Erro ao criar despesa');
                }
              }}>
                <div className="grid grid-2">
                  <div className="form-group">
                    <label className="form-label">Tipo de Despesa *</label>
                    <select name="tipo_despesa_id" className="form-select" required>
                      <option value="">Selecione o tipo</option>
                      {tiposDespesas.map(tipo => (
                        <option key={tipo.id} value={tipo.id}>{tipo.nome}</option>
                      ))}
                    </select>
                  </div>
                  <div className="form-group">
                    <label className="form-label">Fornecedor</label>
                    <select name="fornecedor_id" className="form-select">
                      <option value="">Selecione o fornecedor</option>
                      {fornecedores.map(fornecedor => (
                        <option key={fornecedor.id} value={fornecedor.id}>{fornecedor.razao_social}</option>
                      ))}
                    </select>
                  </div>
                </div>
                <div className="grid grid-2">
                  <div className="form-group">
                    <label className="form-label">Data da Despesa *</label>
                    <input type="date" name="data_despesa" className="form-input" required />
                  </div>
                  <div className="form-group">
                    <label className="form-label">Valor *</label>
                    <input type="number" step="0.01" name="valor" className="form-input" required />
                  </div>
                </div>
                <div className="form-group">
                  <label className="form-label">Descrição</label>
                  <textarea name="descricao" className="form-textarea" rows="3"></textarea>
                </div>
                <div className="modal-actions">
                  <button type="button" className="btn btn-secondary" onClick={() => setShowDespesaModal(false)}>
                    Cancelar
                  </button>
                  <button type="submit" className="btn btn-primary">
                    <FiPlus />
                    Criar Despesa
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      )}

      {/* Modal Novo Produto */}
      {showProdutoModal && (
        <div className="modal-overlay">
          <div className="modal">
            <div className="modal-header">
              <h2>Novo Produto</h2>
              <button 
                className="btn-icon"
                onClick={() => setShowProdutoModal(false)}
              >
                <FiX />
              </button>
            </div>
            <div className="modal-content">
              <form onSubmit={async (e) => {
                e.preventDefault();
                const formData = new FormData(e.target);
                
                // Criar FormData para envio
                const produtoFormData = new FormData();
                produtoFormData.append('id_produto', formData.get('id_produto') || '');
                produtoFormData.append('marca', formData.get('marca'));
                produtoFormData.append('nome', formData.get('nome'));
                produtoFormData.append('estacao', formData.get('estacao'));
                produtoFormData.append('genero', formData.get('genero'));
                produtoFormData.append('fornecedor_id', formData.get('fornecedor_id') || '');
                produtoFormData.append('valor_compra', formData.get('valor_compra'));
                produtoFormData.append('valor_revenda', formData.get('valor_revenda'));
                
                // Adicionar variação básica
                const variacaoBasica = [{
                  tamanho: formData.get('tamanho') || 'Único',
                  cor: formData.get('cor') || 'Padrão',
                  quantidade: parseInt(formData.get('quantidade')) || 1
                }];
                produtoFormData.append('variacoes_data', JSON.stringify(variacaoBasica));
                
                try {
                  const response = await fetch('/api/produtos', {
                    method: 'POST',
                    body: produtoFormData
                  });
                  
                  if (response.ok) {
                    toast.success('Produto criado com sucesso!');
                    setShowProdutoModal(false);
                    carregarDashboard();
                  } else {
                    const error = await response.json();
                    toast.error(error.error || 'Erro ao criar produto');
                  }
                } catch (error) {
                  console.error('Erro ao criar produto:', error);
                  toast.error('Erro ao criar produto');
                }
              }}>
                <div className="grid grid-2">
                  <div className="form-group">
                    <label className="form-label">ID do Produto</label>
                    <input type="text" name="id_produto" className="form-input" placeholder="Ex: LK001" />
                  </div>
                  <div className="form-group">
                    <label className="form-label">Marca *</label>
                    <input type="text" name="marca" className="form-input" required placeholder="Ex: Nike" />
                  </div>
                </div>
                
                <div className="form-group">
                  <label className="form-label">Nome do Produto *</label>
                  <input type="text" name="nome" className="form-input" required placeholder="Ex: Camiseta Infantil" />
                </div>
                
                <div className="grid grid-3">
                  <div className="form-group">
                    <label className="form-label">Estação *</label>
                    <select name="estacao" className="form-select" 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 name="genero" className="form-select" 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 name="fornecedor_id" className="form-select">
                      <option value="">Selecione</option>
                      {fornecedores.map(fornecedor => (
                        <option key={fornecedor.id} value={fornecedor.id}>{fornecedor.razao_social}</option>
                      ))}
                    </select>
                  </div>
                </div>
                
                <div className="grid grid-2">
                  <div className="form-group">
                    <label className="form-label">Valor de Compra *</label>
                    <input type="number" step="0.01" name="valor_compra" className="form-input" required placeholder="0,00" />
                  </div>
                  <div className="form-group">
                    <label className="form-label">Valor de Revenda *</label>
                    <input type="number" step="0.01" name="valor_revenda" className="form-input" required placeholder="0,00" />
                  </div>
                </div>
                
                <div className="form-section">
                  <h4>Variação Básica</h4>
                  <div className="grid grid-3">
                    <div className="form-group">
                      <label className="form-label">Tamanho</label>
                      <input type="text" name="tamanho" className="form-input" placeholder="Ex: M, 6, 8" />
                    </div>
                    <div className="form-group">
                      <label className="form-label">Cor</label>
                      <input type="text" name="cor" className="form-input" placeholder="Ex: Azul, Rosa" />
                    </div>
                    <div className="form-group">
                      <label className="form-label">Quantidade</label>
                      <input type="number" name="quantidade" className="form-input" placeholder="1" min="0" />
                    </div>
                  </div>
                </div>
                
                <div className="modal-actions">
                  <button type="button" className="btn btn-secondary" onClick={() => setShowProdutoModal(false)}>
                    Cancelar
                  </button>
                  <button type="submit" className="btn btn-primary">
                    <FiPlus />
                    Criar Produto
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      )}

      {/* Modal Nova Venda */}
      {showVendaModal && (
        <div className="modal-overlay">
          <div className="modal">
            <div className="modal-header">
              <h2>Nova Venda</h2>
              <button 
                className="btn-icon"
                onClick={() => setShowVendaModal(false)}
              >
                <FiX />
              </button>
            </div>
            <div className="modal-content">
              <form onSubmit={async (e) => {
                e.preventDefault();
                const formData = new FormData(e.target);
                
                const vendaData = {
                  cliente_id: formData.get('cliente_id') || null,
                  tipo_pagamento: formData.get('tipo_pagamento'),
                  valor_total: parseFloat(formData.get('valor_total')),
                  desconto: parseFloat(formData.get('desconto')) || 0,
                  parcelas: parseInt(formData.get('parcelas')) || 1,
                  valor_parcela: parseFloat(formData.get('valor_parcela')) || 0,
                  data_venda: formData.get('data_venda'),
                  observacoes: formData.get('observacoes') || '',
                  itens: [] // Venda simples sem itens específicos
                };
                
                try {
                  const response = await fetch('/api/vendas', {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(vendaData)
                  });
                  
                  if (response.ok) {
                    toast.success('Venda registrada com sucesso!');
                    setShowVendaModal(false);
                    carregarDashboard();
                  } else {
                    const error = await response.json();
                    toast.error(error.error || 'Erro ao registrar venda');
                  }
                } catch (error) {
                  console.error('Erro ao registrar venda:', error);
                  toast.error('Erro ao registrar venda');
                }
              }}>
                <div className="grid grid-2">
                  <div className="form-group">
                    <label className="form-label">Cliente</label>
                    <select name="cliente_id" className="form-select">
                      <option value="">Venda sem cliente cadastrado</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">Data da Venda *</label>
                    <input 
                      type="date" 
                      name="data_venda" 
                      className="form-input" 
                      required 
                      defaultValue={new Date().toISOString().split('T')[0]}
                    />
                  </div>
                </div>
                
                <div className="grid grid-2">
                  <div className="form-group">
                    <label className="form-label">Tipo de Pagamento *</label>
                    <select name="tipo_pagamento" className="form-select" required onChange={(e) => {
                      const parcelasField = document.querySelector('input[name="parcelas"]');
                      const valorParcelaField = document.querySelector('input[name="valor_parcela"]');
                      if (e.target.value === 'vista') {
                        parcelasField.value = '1';
                        parcelasField.disabled = true;
                        valorParcelaField.disabled = true;
                      } else {
                        parcelasField.disabled = false;
                        valorParcelaField.disabled = false;
                      }
                    }}>
                      <option value="">Selecione</option>
                      <option value="vista">À Vista</option>
                      <option value="parcelado">Parcelado</option>
                    </select>
                  </div>
                  <div className="form-group">
                    <label className="form-label">Valor Total *</label>
                    <input 
                      type="number" 
                      step="0.01" 
                      name="valor_total" 
                      className="form-input" 
                      required 
                      placeholder="0,00"
                      onChange={(e) => {
                        const parcelas = parseInt(document.querySelector('input[name="parcelas"]').value) || 1;
                        const desconto = parseFloat(document.querySelector('input[name="desconto"]').value) || 0;
                        const valorTotal = parseFloat(e.target.value) || 0;
                        const valorFinal = valorTotal - desconto;
                        const valorParcela = valorFinal / parcelas;
                        document.querySelector('input[name="valor_parcela"]').value = valorParcela.toFixed(2);
                      }}
                    />
                  </div>
                </div>
                
                <div className="grid grid-3">
                  <div className="form-group">
                    <label className="form-label">Desconto</label>
                    <input 
                      type="number" 
                      step="0.01" 
                      name="desconto" 
                      className="form-input" 
                      placeholder="0,00"
                      onChange={(e) => {
                        const parcelas = parseInt(document.querySelector('input[name="parcelas"]').value) || 1;
                        const valorTotal = parseFloat(document.querySelector('input[name="valor_total"]').value) || 0;
                        const desconto = parseFloat(e.target.value) || 0;
                        const valorFinal = valorTotal - desconto;
                        const valorParcela = valorFinal / parcelas;
                        document.querySelector('input[name="valor_parcela"]').value = valorParcela.toFixed(2);
                      }}
                    />
                  </div>
                  <div className="form-group">
                    <label className="form-label">Parcelas</label>
                    <input 
                      type="number" 
                      name="parcelas" 
                      className="form-input" 
                      min="1" 
                      defaultValue="1"
                      onChange={(e) => {
                        const valorTotal = parseFloat(document.querySelector('input[name="valor_total"]').value) || 0;
                        const desconto = parseFloat(document.querySelector('input[name="desconto"]').value) || 0;
                        const parcelas = parseInt(e.target.value) || 1;
                        const valorFinal = valorTotal - desconto;
                        const valorParcela = valorFinal / parcelas;
                        document.querySelector('input[name="valor_parcela"]').value = valorParcela.toFixed(2);
                      }}
                    />
                  </div>
                  <div className="form-group">
                    <label className="form-label">Valor por Parcela</label>
                    <input type="number" step="0.01" name="valor_parcela" className="form-input" readOnly />
                  </div>
                </div>
                
                <div className="form-group">
                  <label className="form-label">Observações</label>
                  <textarea name="observacoes" className="form-textarea" rows="3" placeholder="Observações sobre a venda..."></textarea>
                </div>
                
                <div className="modal-actions">
                  <button type="button" className="btn btn-secondary" onClick={() => setShowVendaModal(false)}>
                    Cancelar
                  </button>
                  <button type="submit" className="btn btn-primary">
                    <FiPlus />
                    Registrar Venda
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Dashboard;
