// frontend/src/components/Dashboard.tsx
import { useState, useEffect } from 'react';
import toast from 'react-hot-toast';
import { dashboardService } from '../services/apiService';
import type { DashboardStats } from '../types/interfaces';
import OsChart from './OsChart';
import SectorChart from './SectorChart';
import CpuChart from './CpuChart';
import RamChart from './RamChart';
import styles from './Dashboard.module.css';
import skeletonStyles from './Skeleton.module.css';

const Dashboard = () => {
  const [stats, setStats] = useState<DashboardStats | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    setIsLoading(true);
    dashboardService.getStats()
      .then(data => {
        setStats(data);
      })
      .catch(() => {
        toast.error('No se pudieron cargar las estadísticas del dashboard.');
      })
      .finally(() => {
        setIsLoading(false);
      });
  }, []);

  if (isLoading) {
    return (
      <div>
        <div className={styles.dashboardHeader}>
          <h2>Dashboard de Inventario</h2>
        </div>
        <div className={styles.statsGrid}>
          {/* Replicamos la estructura de la grilla con esqueletos */}
          <div className={`${styles.chartContainer} ${skeletonStyles.skeleton}`}></div>
          <div className={`${styles.chartContainer} ${skeletonStyles.skeleton}`}></div>
          <div className={`${styles.chartContainer} ${skeletonStyles.skeleton}`}></div>
          <div className={`${styles.chartContainer} ${skeletonStyles.skeleton}`}></div>
        </div>
      </div>
    );
  }

  if (!stats) {
    return (
      <div className={styles.dashboardHeader}>
        <h2>No hay datos disponibles para mostrar.</h2>
      </div>
    );
  }
  return (
    <div>
      <div className={styles.dashboardHeader}>
        <h2>Dashboard de Inventario</h2>
      </div>
      <div className={styles.statsGrid}>
        {/* Fila 1, Columna 1 */}
        <div className={styles.chartContainer}>
          <OsChart data={stats.osStats} />
        </div>

        {/* Fila 1, Columna 2 */}
        <div className={styles.chartContainer}>
          <RamChart data={stats.ramStats} />
        </div>

        {/* Fila 2, Columna 1 */}
        <div className={`${styles.chartContainer} ${styles.scrollableChartContainer}`}>
          <CpuChart data={stats.cpuStats} />
        </div>

        {/* Fila 2, Columna 2 */}
        <div className={`${styles.chartContainer} ${styles.scrollableChartContainer}`}>
          <SectorChart data={stats.sectorStats} />
        </div>
      </div>
    </div>
  );
};

export default Dashboard;