"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { 
  PieChart, 
  Pie, 
  Cell, 
  ResponsiveContainer, 
  Tooltip, 
  Legend 
} from "recharts";

interface UserActivityChartProps {
  activeUsers: number;
  inactiveUsers: number;
}

export function UserActivityChart({ activeUsers, inactiveUsers }: UserActivityChartProps) {
  const data = [
    { 
      name: 'Utilisateurs actifs', 
      value: activeUsers, 
      color: '#22c55e' // Vert clair pour actifs
    },
    { 
      name: 'Utilisateurs inactifs', 
      value: inactiveUsers, 
      color: '#ef4444' // Rouge pour inactifs
    },
  ];

  const total = activeUsers + inactiveUsers;

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base font-medium">Activité des utilisateurs</CardTitle>
        <p className="text-sm text-muted-foreground">
          Actifs = connectés dans les 7 derniers jours
        </p>
      </CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={300}>
          <PieChart>
            <Pie
              data={data}
              cx="50%"
              cy="50%"
              innerRadius={60}
              outerRadius={100}
              paddingAngle={5}
              dataKey="value"
            >
              {data.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.color} />
              ))}
            </Pie>
            <Tooltip 
              contentStyle={{
                backgroundColor: 'hsl(var(--background))',
                border: '1px solid hsl(var(--border))',
                borderRadius: '8px',
              }}
              formatter={(value: number) => [
                `${value} utilisateurs (${((value / total) * 100).toFixed(1)}%)`,
                ''
              ]}
            />
            <Legend 
              formatter={(value, entry) => (
                <span style={{ color: entry.color }}>
                  {value}: {entry.payload?.value} ({((entry.payload?.value / total) * 100).toFixed(1)}%)
                </span>
              )}
            />
          </PieChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}