import React, { useEffect, useRef } from 'react';
import { Chart, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
import { Bar } from 'react-chartjs-2';
import Navbar from '../components/Navbar';

Chart.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

const Dashboard = () => {
  const userStats = { totalUsers: 100, totalAds: 50, totalRevenue: 5000 };

  const chartData = {
    labels: ['Users', 'Revenue'],
    datasets: [
      {
        label: 'Statistics',
        data: [userStats.totalUsers, userStats.totalRevenue],
        backgroundColor: ['rgba(75,192,192,0.6)', 'rgba(153,102,255,0.6)'],
      },
    ],
  };

  const chartRef = useRef(null);

  useEffect(() => {
    const chartInstance = chartRef.current.chartInstance;

    return () => {
      if (chartInstance) {
        chartInstance.destroy();
      }
    };
  }, []);

  return (
    <div>
      <Navbar />
      <div className="container mt-5">
        <h4 className="mb-4">Dashboard</h4>
        <div className="mb-4">
          <h6>Total Users: {userStats.totalUsers}</h6>
          <h6>Total Ads: {userStats.totalAds}</h6>
          <h6>Total Revenue: {userStats.totalRevenue}</h6>
        </div>
        <div>
          <Bar ref={chartRef} data={chartData} />
        </div>
      </div>
    </div>
  );
};

export default Dashboard;