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

const DashboardNovo = () => {
  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);

  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>
    );
  }

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

      {/* CONTABILIDADE COMPLETA */}
      <div className="contabilidade-section">
        <h2>📊 Contabilidade Completa - {new Date().toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' })}</h2>
        <div className="contabilidade-grid">
          <div className="contabilidade-card receita">
            <div className="card-header">
              <FiTrendingUp className="card-icon" />
              <span>Receita Bruta</span>
            </div>
            <div className="card-value">{formatarMoeda(dashboardData.contabilidade.receitaBruta)}</div>
            <div className="card-subtitle">Vendas do mês</div>
          </div>

          <div className="contabilidade-card custo">
            <div className="card-header">
              <FiPackage className="card-icon" />
              <span>Custos dos Produtos</span>
            </div>
            <div className="card-value">{formatarMoeda(dashboardData.contabilidade.custosProdutos)}</div>
            <div className="card-subtitle">Custo das mercadorias vendidas</div>
          </div>

          <div className="contabilidade-card despesa">
            <div className="card-header">
              <FiTrendingDown className="card-icon" />
              <span>Despesas</span>
            </div>
            <div className="card-value">{formatarMoeda(dashboardData.contabilidade.totalDespesas)}</div>
            <div className="card-subtitle">Gastos operacionais</div>
          </div>

          <div className="contabilidade-card lucro">
            <div className="card-header">
              <FiDollarSign className="card-icon" />
              <span>Lucro Real</span>
            </div>
            <div className="card-value">{formatarMoeda(dashboardData.contabilidade.lucroReal)}</div>
            <div className="card-subtitle">
              Margem: {dashboardData.contabilidade.margemLucro}%
            </div>
          </div>
        </div>
      </div>

      {/* RESUMO FINANCEIRO */}
      <div className="resumo-section">
        <h2>💰 Resumo Financeiro</h2>
        <div className="resumo-grid">
          <div className="resumo-card">
            <div className="resumo-header">
              <span>Receitas do Mês</span>
              <FiTrendingUp className="resumo-icon success" />
            </div>
            <div className="resumo-value success">
              {formatarMoeda(dashboardData.resumoFinanceiro.receitasMes)}
            </div>
          </div>

          <div className="resumo-card">
            <div className="resumo-header">
              <span>Despesas do Mês</span>
              <FiTrendingDown className="resumo-icon danger" />
            </div>
            <div className="resumo-value danger">
              {formatarMoeda(dashboardData.resumoFinanceiro.despesasMes)}
            </div>
          </div>

          <div className="resumo-card">
            <div className="resumo-header">
              <span>Lucro Estimado</span>
              <FiDollarSign className="resumo-icon primary" />
            </div>
            <div className="resumo-value primary">
              {formatarMoeda(dashboardData.resumoFinanceiro.lucroEstimado)}
            </div>
          </div>
        </div>
      </div>

      {/* VENDAS A PRAZO & RECEBIMENTOS */}
      <div className="vendas-prazo-section">
        <h2>📅 Vendas a Prazo & Recebimentos</h2>
        
        {dashboardData.vendasPrazo.quantidade > 0 ? (
          <div className="vendas-prazo-container">
            <div className="vendas-prazo-header">
              <div className="prazo-summary">
                <span className="prazo-count">{dashboardData.vendasPrazo.quantidade} vendas</span>
                <span className="prazo-total">{formatarMoeda(dashboardData.vendasPrazo.total)}</span>
              </div>
            </div>

            <div className="vendas-prazo-list">
              {dashboardData.vendasPrazo.vendas.map((venda, index) => (
                <div key={index} className="venda-prazo-item">
                  <div className="venda-info">
                    <div className="cliente-nome">{venda.cliente}</div>
                    <div className="venda-valor">{formatarMoeda(venda.valor)}</div>
                  </div>
                  <div className="venda-vencimento">
                    <FiCalendar className="vencimento-icon" />
                    <span>Vence em: {formatarData(venda.vencimento)}</span>
                  </div>
                  <div className="venda-actions">
                    <button 
                      className="btn-whatsapp"
                      onClick={() => enviarWhatsApp(venda)}
                      title="Enviar cobrança via WhatsApp"
                    >
                      <FiMessageSquare />
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ) : (
          <div className="empty-state">
            <FiClock className="empty-icon" />
            <p>Nenhuma venda a prazo encontrada</p>
          </div>
        )}
      </div>

      {/* PARCELAS PENDENTES */}
      {dashboardData.parcelasPendentes.quantidade > 0 && (
        <div className="parcelas-section">
          <h2>💳 Parcelas Pendentes</h2>
          <div className="parcelas-list">
            {dashboardData.parcelasPendentes.parcelas.map((parcela, index) => (
              <div key={index} className="parcela-item">
                <div className="parcela-info">
                  <div className="parcela-cliente">{parcela.cliente}</div>
                  <div className="parcela-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>
      )}

      {/* EMPRÉSTIMOS */}
      <div className="emprestimos-section">
        <h2>🏦 Empréstimos</h2>
        <div className="emprestimos-grid">
          <div className="emprestimo-card aberto">
            <div className="emprestimo-header">
              <FiAlertCircle className="emprestimo-icon" />
              <span>Em Aberto</span>
            </div>
            <div className="emprestimo-value">
              {formatarMoeda(dashboardData.emprestimos.totalAberto)}
            </div>
            <div className="emprestimo-count">
              {dashboardData.emprestimos.quantidade} empréstimos
            </div>
          </div>

          <div className="emprestimo-card quitado">
            <div className="emprestimo-header">
              <FiTrendingUp className="emprestimo-icon" />
              <span>Quitados</span>
            </div>
            <div className="emprestimo-value">
              {formatarMoeda(dashboardData.emprestimos.totalQuitado)}
            </div>
          </div>
        </div>
      </div>

      {/* ESTATÍSTICAS GERAIS */}
      <div className="estatisticas-section">
        <h2>📈 Estatísticas Gerais</h2>
        <div className="estatisticas-grid">
          <div className="stat-card">
            <FiPackage className="stat-icon" />
            <div className="stat-info">
              <div className="stat-value">{dashboardData.estatisticas.totalProdutos}</div>
              <div className="stat-label">Produtos</div>
            </div>
          </div>

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

          <div className="stat-card">
            <FiTruck className="stat-icon" />
            <div className="stat-info">
              <div className="stat-value">{dashboardData.estatisticas.totalFornecedores}</div>
              <div className="stat-label">Fornecedores</div>
            </div>
          </div>

          <div className="stat-card">
            <FiPackage className="stat-icon" />
            <div className="stat-info">
              <div className="stat-value">{dashboardData.estatisticas.estoqueTotal}</div>
              <div className="stat-label">Estoque Total</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DashboardNovo;
