
import { useQuery } from "@tanstack/react-query";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts";
import { Skeleton } from "@/components/ui/skeleton";
import { authFetch } from "@/lib/api";


async function fetchUserDistribution() {
    return authFetch('/api/admin/users-distribution');
}


export const UserDistributionChart = () => {
    const { data, isLoading, isError } = useQuery({
        queryKey: ['user-distribution'],
        queryFn: fetchUserDistribution,// Refresh every 5 minutes
    });

    if (isLoading) {
        return (
            <Card className="col-span-4 lg:col-span-2 border-gray-200">
                <CardHeader>
                    <CardTitle>User Distribution</CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="h-[300px]">
                        <Skeleton className="h-full w-full" />
                    </div>
                </CardContent>
            </Card>
        );
    }

    if (isError) {
        return (
            <Card className="col-span-4 lg:col-span-2 border-gray-200">
                <CardHeader>
                    <CardTitle>User Distribution</CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="h-[300px] flex items-center justify-center text-red-500">
                        Failed to load user distribution
                    </div>
                </CardContent>
            </Card>
        );
    }

    if (!data?.length) {
        return (
            <div className="h-[300px] flex flex-col items-center justify-center">
                <p className="text-gray-500">No user data available</p>
            </div>
        );
    }

    return (
        <Card className="col-span-4 lg:col-span-2 border-gray-200">
            <CardHeader>
                <CardTitle>User Distribution</CardTitle>
            </CardHeader>
            <CardContent>
                <div className="h-[300px]">
                    <ResponsiveContainer width="100%" height="100%">
                        <PieChart>
                            <Pie
                                data={data}
                                cx="50%"
                                cy="50%"
                                labelLine={false}
                                outerRadius={80}
                                fill="#8884d8"
                                dataKey="value"
                            >
                                {data.map((entry, index) => (
                                    <Cell key={`cell-${index}`} fill={entry.color} />
                                ))}
                            </Pie>
                            <Tooltip
                                contentStyle={{
                                    backgroundColor: "white",
                                    borderRadius: "8px",
                                    border: "1px solid #e2e8f0",
                                }}
                            />
                            <Legend />
                        </PieChart>
                    </ResponsiveContainer>
                </div>
            </CardContent>
        </Card>
    );
};
