"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  PieChart,
  Pie,
  Cell,
  ResponsiveContainer,
  Tooltip,
  Legend,
} from "recharts";
import { useUserActivity } from "@/hooks/useUserActivity";
import { AlertCircle } from "lucide-react";

export function RealUserActivityChart() {
  const { activity, loading, error } = useUserActivity();

  if (loading) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center h-64">
          <div className="h-64 bg-muted animate-pulse rounded-lg w-full" />
        </CardContent>
      </Card>
    );
  }

  if (error || !activity) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center h-64">
          <div className="text-center">
            <AlertCircle className="h-8 w-8 text-destructive mx-auto mb-2" />
            <p className="text-sm text-muted-foreground">
              Erreur lors du chargement
            </p>
          </div>
        </CardContent>
      </Card>
    );
  }

  const data = [
    {
      name: "Utilisateurs actifs",
      value: activity.activeUsers,
      color: "#000000", // Noir pour actifs
    },
    {
      name: "Utilisateurs inactifs",
      value: activity.inactiveUsers,
      color: "#666666", // Gris pour inactifs
    },
  ];

  const total = activity.activeUsers + activity.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>
  );
}