"use client";

import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card";
import {Button} from "@/components/ui/button";
import {PieChart as PieChartIcon} from "lucide-react";
import * as React from "react"
import { TrendingUp } from "lucide-react"
import { Label, Pie, PieChart } from "recharts"
import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
} from "@/components/ui/chart"


const chartConfig = {
    admins: {
        label: "Admins",
    },
    patients: {
        label: "Patients",
    },
    clients: {
        label: "Clients",
    },
} /*satisfies ChartConfig*/


type AdminDashboardPanelProps = {
    admins: number;
    patients:  number;
    clients: number;
}


export default function AdminDashboardPanel(props: AdminDashboardPanelProps) {

    const chartData = [
        { label: "admins", users: 1, fill: "hsl(var(--chart-1))" },
        { label: "patients", users: props.patients || 0, fill: "hsl(var(--chart-2))" },
        { label: "clients", users: props.clients || 0, fill: "hsl(var(--chart-3))" },
    ]

    const totalUsers = chartData.reduce((acc, data) => {
        return acc + data.users
    }, 0)

    return (
        <div>
            <Card className="overflow-hidden">
                <CardHeader className="flex flex-row items-start bg-muted/50">
                    <div className="grid gap-0.5">
                        <CardTitle className="group flex items-center gap-2 text-lg">
                            System Statistics
                        </CardTitle>
                        <CardDescription>Date: July 20, 2024</CardDescription>
                    </div>
                    <div className="ml-auto flex items-center gap-1">
                        <Button size="sm" variant="outline" className="h-8 gap-1">
                            <PieChartIcon className="h-3.5 w-3.5"/>
                            <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
                                See stats
                            </span>
                        </Button>
                    </div>
                </CardHeader>
                <CardContent className="p-6 text-sm">

                    <ChartContainer
                        config={chartConfig}
                        className="mx-auto aspect-square max-h-[250px]"
                    >
                        <PieChart>
                            <ChartTooltip
                                cursor={false}
                                content={<ChartTooltipContent hideLabel />}
                            />
                            <Pie
                                data={chartData}
                                dataKey="users"
                                nameKey="label"
                                innerRadius={60}
                                strokeWidth={5}
                            >
                                <Label
                                    content={({ viewBox }) => {
                                        if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                                            return (
                                                <text
                                                    x={viewBox.cx}
                                                    y={viewBox.cy}
                                                    textAnchor="middle"
                                                    dominantBaseline="middle"
                                                >
                                                    <tspan
                                                        x={viewBox.cx}
                                                        y={viewBox.cy}
                                                        className="fill-foreground text-3xl font-bold"
                                                    >
                                                        {`${totalUsers || 0}`}
                                                    </tspan>
                                                    <tspan
                                                        x={viewBox.cx}
                                                        y={(viewBox.cy || 0) + 24}
                                                        className="fill-muted-foreground"
                                                    >
                                                        Users
                                                    </tspan>
                                                </text>
                                            )
                                        }
                                    }}
                                />
                            </Pie>
                        </PieChart>
                    </ChartContainer>



                    <div className={"flex flex-col items-center gap-2 text-sm"}>
                        <div className="flex items-center gap-2 font-medium leading-none">
                            Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
                        </div>
                        <div className="leading-none text-muted-foreground">
                            Showing total users available in the TheraChat system
                        </div>
                    </div>

                </CardContent>
                <CardFooter className="flex flex-col items-center border-t bg-muted/50 px-6 py-3">
                    <div className="text-xs text-muted-foreground">
                        Updated <time dateTime="2023-11-23">November 23, 2023</time>
                    </div>
                </CardFooter>
            </Card>
        </div>
    )
}