"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: '#000000' // Noir pour actifs
    },
    { 
      name: 'Utilisateurs inactifs', 
      value: inactiveUsers, 
      color: '#666666' // Gris 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 30 derniers jours
        </p>
      </CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={300}>
          <PieChart>
            <Pie
              data={data}
              cx="50%"
              cy="50%"
              innerRadius={60}
              outerRadius={100}
              paddingAngle={2}
              dataKey="value"
              stroke="#ffffff"
              strokeWidth={2}
            >
              {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',
                fontSize: '12px'
              }}
              formatter={(value: number) => [
                `${value} utilisateurs (${((value / total) * 100).toFixed(1)}%)`,
                '',
              ]}
            />
            <Legend
              wrapperStyle={{
                paddingTop: "20px",
                fontSize: "12px"
              }}
              formatter={(value, entry) => (
                <span style={{ color: entry.color, fontWeight: 500 }}>
                  {value}: {entry.payload?.value} (
                  {((entry.payload?.value / total) * 100).toFixed(1)}%)
                </span>
              )}
            />
          </PieChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}