Untitled

import { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, BarChart, Bar } from 'recharts';
import { PieChart, Pie, Cell } from 'recharts';

export default function StatsPage() {
  const [stats, setStats] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const colors = {
    bio: '#8a6849',
    recycling: '#fec20c',
    paper: '#0d7dd4',
    residual: '#3a3a3c'
  };

  useEffect(() => {
    fetch('/api/stats')
      .then(res => res.json())
      .then(data => {
        setStats(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div className="flex items-center justify-center h-screen">Loading statistics...</div>;
  if (error) return <div className="flex items-center justify-center h-screen">Error: {error}</div>;
  if (!stats) return <div className="flex items-center justify-center h-screen">No data available</div>;

  // Prepare data for the pie chart
  const pieData = Object.entries(stats.wasteTypes).map(([type, data]) => ({
    name: type.charAt(0).toUpperCase() + type.slice(1),
    value: data.total
  }));

  // Prepare monthly data for the line chart
  const monthlyData = Object.entries(stats.monthlyScans).map(([month, count]) => ({
    month,
    scans: count
  }));

  // Prepare data for waste type distribution chart
  const wasteTypeData = Object.entries(stats.wasteTypes).map(([type, data]) => ({
    name: type.charAt(0).toUpperCase() + type.slice(1),
    total: data.total
  }));

  return (
    <div className="p-8">
      <h1 className="text-4xl font-bold mb-8">Waste Classification Statistics</h1>
      
      {/* Summary Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <Card>
          <CardHeader>
            <CardTitle>Total Scans</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold">{stats.totalScans}</p>
          </CardContent>
        </Card>
        {Object.entries(stats.wasteTypes).map(([type, data]) => (
          <Card key={type}>
            <CardHeader>
              <CardTitle>{type.charAt(0).toUpperCase() + type.slice(1)}</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">{data.total}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Charts */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {/* Monthly Scans Line Chart */}
        <Card>
          <CardHeader>
            <CardTitle>Monthly Scan Trends</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-[400px]">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={monthlyData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="month" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Line type="monotone" dataKey="scans" stroke="#8884d8" />
                </LineChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>

        {/* Waste Type Distribution */}
        <Card>
          <CardHeader>
            <CardTitle>Waste Type Distribution</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-[400px]">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={pieData}
                    dataKey="value"
                    nameKey="name"
                    cx="50%"
                    cy="50%"
                    outerRadius={150}
                    label
                  >
                    {pieData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={Object.values(colors)[index]} />
                    ))}
                  </Pie>
                  <Tooltip />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}