// frontend/src/pages/DashboardPage.tsx
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import apiClient from '../services/api';

// --- NOVO: Interface para a resposta do endpoint de estatísticas ---
interface DashboardStats {
  total_contacts: number;
  total_connections: number;
}

// --- Esta interface não é mais necessária aqui ---
// interface ConnectionType { id: number; nome: string; }

const styles = {
  card: { background: '#fff', borderRadius: '12px', padding: '24px', boxShadow: '0 4px 12px rgba(0,0,0,0.05)', flex: '1', minWidth: '200px' },
  cardTitle: { margin: '0 0 8px 0', color: '#415a77', fontSize: '16px' },
  cardValue: { margin: 0, color: '#4361ee', fontSize: '32px', fontWeight: 'bold' }
};

const DashboardPage: React.FC = () => {
  // --- Estado simplificado para guardar as estatísticas ---
  const [stats, setStats] = useState<DashboardStats | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchDashboardData = async () => {
      setLoading(true);
      try {
        // --- ALTERAÇÃO APLICADA AQUI: Chamando o novo endpoint otimizado ---
        const response = await apiClient.get<DashboardStats>('/dashboard/stats');
        setStats(response.data);
      } catch (err) {
        setError("Falha ao carregar os dados do dashboard.");
        console.error(err); // Loga o erro para depuração
      } finally {
        setLoading(false);
      }
    };
    fetchDashboardData();
  }, []);

  if (loading) return <p>Carregando Dashboard...</p>;
  if (error) return <p style={{ color: 'red' }}>Erro: {error}</p>;

  return (
    <div>
      <header style={{ marginBottom: 32 }}>
        <h1 style={{ margin: 0, fontSize: 32, color: '#21325b' }}>Dashboard</h1>
        <span style={{ color: '#415a77', fontSize: 16 }}>Bem-vindo! Aqui está o resumo da sua rede.</span>
      </header>
      <section style={{ display: 'flex', gap: '24px', marginBottom: '32px', flexWrap: 'wrap' }}>
        {/* --- ALTERAÇÃO APLICADA AQUI: Lendo os dados do novo estado 'stats' --- */}
        <div style={styles.card}>
            <h3 style={styles.cardTitle}>Total de Contatos</h3>
            <p style={styles.cardValue}>{stats?.total_contacts ?? 0}</p>
        </div>
        <div style={styles.card}>
            <h3 style={styles.cardTitle}>Total de Conexões</h3>
            <p style={styles.cardValue}>{stats?.total_connections ?? 0}</p>
        </div>
        {/* O card de Tipos de Conexão foi removido por simplicidade, 
            já que não temos um endpoint eficiente para contá-los ainda.
            Pode ser adicionado de volta se necessário. */}
      </section>
      <section>
        <h2 style={{ color: '#21325b' }}>Ações Rápidas</h2>
        <div style={{ display: 'flex', gap: '16px' }}>
          <Link to="/contacts/add"><button>+ Adicionar Contato</button></Link>
          <Link to="/import-google-contacts"><button>Importar do Google</button></Link>
          <Link to="/contacts"><button>Gerenciar Contatos</button></Link>
        </div>
      </section>
    </div>
  );
};

export default DashboardPage;