import React, { useState, useEffect } from 'react';
import { 
  FiDollarSign, 
  FiTrendingUp,
  FiTrendingDown,
  FiClock,
  FiPackage,
  FiUsers,
  FiCalendar,
  FiMessageSquare
} from 'react-icons/fi';
import { dashboardAPI } from '../services/api';
import toast from 'react-hot-toast';
import '../styles/dashboard-simples.css';

const DashboardSimples = () => {
  const [dashboardData, setDashboardData] = useState({
    contabilidade: {
      receitaBruta: 0,
      custosProdutos: 0,
      totalDespesas: 0,
      lucroReal: 0,
      margemLucro: 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);

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

  const carregarDashboard = async () => {
    try {
      setLoading(true);
      const response = await dashboardAPI.obterEstatisticas();
      setDashboardData(response.data);
    } catch (error) {
      console.error('Erro ao carregar dashboard:', error);
      toast.error('Erro ao carregar dados do dashboard');
    } finally {
      setLoading(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');
  };

  const enviarWhatsApp = (venda) => {
    const telefone = venda.cliente_whatsapp || venda.cliente_telefone;
    if (!telefone) {
      toast.error('Cliente não possui WhatsApp cadastrado');
      return;
    }

    const numeroLimpo = telefone.replace(/\D/g, '');
    const mensagem = `Olá! Sua compra no valor de ${formatarMoeda(venda.valor)} vence em ${formatarData(venda.vencimento)}. Obrigado!`;
    const mensagemCodificada = encodeURIComponent(mensagem);
    const url = `https://wa.me/55${numeroLimpo}?text=${mensagemCodificada}`;
    
    window.open(url, '_blank');
    toast.success('WhatsApp aberto com sucesso!');
  };

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

  const mesAtual = new Date().toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' });

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

      {/* RESUMO FINANCEIRO PRINCIPAL */}
      <div className="resumo-principal">
        <div className="card-principal receitas">
          <div className="card-icon">
            <FiTrendingUp />
          </div>
          <div className="card-content">
            <h3>Receitas do Mês</h3>
            <div className="valor-principal">{formatarMoeda(dashboardData.contabilidade.receitaBruta)}</div>
            <div className="subtexto">Vendas realizadas</div>
          </div>
        </div>

        <div className="card-principal despesas">
          <div className="card-icon">
            <FiTrendingDown />
          </div>
          <div className="card-content">
            <h3>Despesas do Mês</h3>
            <div className="valor-principal">{formatarMoeda(dashboardData.contabilidade.totalDespesas)}</div>
            <div className="subtexto">Gastos operacionais</div>
          </div>
        </div>

        <div className="card-principal lucro">
          <div className="card-icon">
            <FiDollarSign />
          </div>
          <div className="card-content">
            <h3>Lucro Real</h3>
            <div className="valor-principal">{formatarMoeda(dashboardData.contabilidade.lucroReal)}</div>
            <div className="subtexto">Margem: {dashboardData.contabilidade.margemLucro}%</div>
          </div>
        </div>
      </div>

      {/* VENDAS A PRAZO */}
      {dashboardData.vendasPrazo.quantidade > 0 && (
        <div className="secao-vendas-prazo">
          <div className="secao-header">
            <h2>📅 Vendas a Prazo & Recebimentos</h2>
            <div className="total-prazo">
              Total: {formatarMoeda(dashboardData.vendasPrazo.total)}
            </div>
          </div>
          
          <div className="lista-vendas-prazo">
            {dashboardData.vendasPrazo.vendas.slice(0, 5).map((venda, index) => (
              <div key={index} className="item-venda-prazo">
                <div className="venda-info">
                  <div className="cliente">{venda.cliente}</div>
                  <div className="valor">{formatarMoeda(venda.valor)}</div>
                </div>
                <div className="venda-vencimento">
                  <FiCalendar />
                  <span>{formatarData(venda.vencimento)}</span>
                </div>
                <button 
                  className="btn-whatsapp-simples"
                  onClick={() => enviarWhatsApp(venda)}
                  title="Enviar WhatsApp"
                >
                  <FiMessageSquare />
                </button>
              </div>
            ))}
            {dashboardData.vendasPrazo.quantidade > 5 && (
              <div className="mais-vendas">
                +{dashboardData.vendasPrazo.quantidade - 5} vendas a prazo
              </div>
            )}
          </div>
        </div>
      )}

      {/* PARCELAS PENDENTES */}
      {dashboardData.parcelasPendentes.quantidade > 0 && (
        <div className="secao-parcelas">
          <div className="secao-header">
            <h2>💳 Parcelas Pendentes</h2>
            <div className="total-parcelas">
              {dashboardData.parcelasPendentes.quantidade} parcelas
            </div>
          </div>
          
          <div className="lista-parcelas">
            {dashboardData.parcelasPendentes.parcelas.slice(0, 3).map((parcela, index) => (
              <div key={index} className="item-parcela">
                <div className="parcela-info">
                  <div className="cliente">{parcela.cliente}</div>
                  <div className="valor">{formatarMoeda(parcela.valor)}</div>
                </div>
                <div className="parcela-detalhes">
                  <span>{parcela.parcelas}x parcelas</span>
                  <span>Próximo: {formatarData(parcela.proximoVencimento)}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* ESTATÍSTICAS RÁPIDAS */}
      <div className="estatisticas-rapidas">
        <div className="stat-item">
          <FiPackage className="stat-icon" />
          <div className="stat-info">
            <div className="stat-numero">{dashboardData.estatisticas.totalProdutos}</div>
            <div className="stat-label">Produtos</div>
          </div>
        </div>

        <div className="stat-item">
          <FiUsers className="stat-icon" />
          <div className="stat-info">
            <div className="stat-numero">{dashboardData.estatisticas.totalClientes}</div>
            <div className="stat-label">Clientes</div>
          </div>
        </div>

        <div className="stat-item">
          <FiPackage className="stat-icon" />
          <div className="stat-info">
            <div className="stat-numero">{dashboardData.estatisticas.estoqueTotal}</div>
            <div className="stat-label">Estoque</div>
          </div>
        </div>
      </div>

      {/* EMPTY STATES */}
      {dashboardData.vendasPrazo.quantidade === 0 && dashboardData.parcelasPendentes.quantidade === 0 && (
        <div className="empty-recebimentos">
          <FiClock className="empty-icon" />
          <h3>Nenhum recebimento pendente</h3>
          <p>Todas as vendas foram pagas à vista</p>
        </div>
      )}
    </div>
  );
};

export default DashboardSimples;
