import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import type { Session } from '../../types';

interface ActivityChartProps {
  sessions: Session[];
}

function ActivityChart({ sessions }: ActivityChartProps) {
  const monthCounts: Record<string, number> = {};

  sessions.forEach((s) => {
    if (s.sessionDateAsString) {
      const date = new Date(s.sessionDateAsString);
      const key = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
      monthCounts[key] = (monthCounts[key] || 0) + 1;
    }
  });

  const data = Object.entries(monthCounts)
    .sort(([a], [b]) => a.localeCompare(b))
    .slice(-12)
    .map(([month, count]) => ({
      month,
      sessions: count,
    }));

  if (data.length === 0) return <p className="text-muted-custom text-center">Aucune donnée</p>;

  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" stroke="#333" />
        <XAxis dataKey="month" stroke="#888" />
        <YAxis stroke="#888" allowDecimals={false} />
        <Tooltip contentStyle={{ backgroundColor: '#1a1a2e', border: '1px solid #333' }} />
        <Bar dataKey="sessions" fill="#4a90d9" name="Sessions" />
      </BarChart>
    </ResponsiveContainer>
  );
}

export default ActivityChart;
