import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card";
import {Button} from "@/components/ui/button";
import {MoreVertical} from "lucide-react";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import {Separator} from "@/components/ui/separator";
import ClientsSummaryChart from "@/app/(admin)/admin/manage-clients/_components/_clients_summary_chart";

export default function AdminClientsRightPanel() {
    return (
        <div>
            <Card
                className="overflow-hidden" x-chunk="dashboard-05-chunk-4"
            >

                <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">
                            Clients Summary
                        </CardTitle>
                        <CardDescription>Clients summary grouped by gender.</CardDescription>
                    </div>
                    <div className="ml-auto flex items-center gap-1">
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button size="icon" variant="outline" className="h-8 w-8">
                                    <MoreVertical className="h-3.5 w-3.5"/>
                                    <span className="sr-only">More</span>
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                                <DropdownMenuItem>Export summary</DropdownMenuItem>
                                <DropdownMenuItem>Export clients list</DropdownMenuItem>
                                <DropdownMenuSeparator/>
                                <DropdownMenuItem>Export with charts</DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </div>
                </CardHeader>

                <CardContent className="p-6 text-sm">
                    <div className="grid gap-3">
                        <div className="font-semibold">Clients Details</div>

                        <ClientsSummaryChart/>

                        <Separator className="my-2"/>

                        <ul className="grid gap-3">
                            <li className="flex items-center justify-between">
                                <span className="text-muted-foreground">Nurses</span>
                                <span>90,112</span>
                            </li>
                            <li className="flex items-center justify-between">
                                <span className="text-muted-foreground">Doctors</span>
                                <span>12,122</span>
                            </li>
                            <li className="flex items-center justify-between">
                                <span className="text-muted-foreground">Therapists</span>
                                <span>1,122</span>
                            </li>
                            <li className="flex items-center justify-between font-semibold">
                                <span className="text-muted-foreground">Total</span>
                                <span>132,122</span>
                            </li>
                        </ul>

                    </div>
                    {/*<Separator className="my-4"/>*/}

                    {/*<div className="grid grid-cols-2 gap-4">*/}
                    {/*    <div className="grid gap-3">*/}
                    {/*        <div className="font-semibold">Shipping Information</div>*/}
                    {/*        <address className="grid gap-0.5 not-italic text-muted-foreground">*/}
                    {/*            <span>Liam Johnson</span>*/}
                    {/*            <span>1234 Main St.</span>*/}
                    {/*            <span>Anytown, CA 12345</span>*/}
                    {/*        </address>*/}
                    {/*    </div>*/}
                    {/*    <div className="grid auto-rows-max gap-3">*/}
                    {/*        <div className="font-semibold">Billing Information</div>*/}
                    {/*        <div className="text-muted-foreground">*/}
                    {/*            Same as shipping address*/}
                    {/*        </div>*/}
                    {/*    </div>*/}
                    {/*</div>*/}

                    {/*<Separator className="my-4"/>*/}
                    {/*<div className="grid gap-3">*/}
                    {/*    <div className="font-semibold">Customer Information</div>*/}
                    {/*    <dl className="grid gap-3">*/}
                    {/*        <div className="flex items-center justify-between">*/}
                    {/*            <dt className="text-muted-foreground">Customer</dt>*/}
                    {/*            <dd>Liam Johnson</dd>*/}
                    {/*        </div>*/}
                    {/*        <div className="flex items-center justify-between">*/}
                    {/*            <dt className="text-muted-foreground">Email</dt>*/}
                    {/*            <dd>*/}
                    {/*                <a href="mailto:">liam@acme.com</a>*/}
                    {/*            </dd>*/}
                    {/*        </div>*/}
                    {/*        <div className="flex items-center justify-between">*/}
                    {/*            <dt className="text-muted-foreground">Phone</dt>*/}
                    {/*            <dd>*/}
                    {/*                <a href="tel:">+1 234 567 890</a>*/}
                    {/*            </dd>*/}
                    {/*        </div>*/}
                    {/*    </dl>*/}
                    {/*</div>*/}
                    {/*<Separator className="my-4"/>*/}
                    {/*<div className="grid gap-3">*/}
                    {/*    <div className="font-semibold">Payment Information</div>*/}
                    {/*    <dl className="grid gap-3">*/}
                    {/*        <div className="flex items-center justify-between">*/}
                    {/*            <dt className="flex items-center gap-1 text-muted-foreground">*/}
                    {/*                <CreditCard className="h-4 w-4"/>*/}
                    {/*                Visa*/}
                    {/*            </dt>*/}
                    {/*            <dd>**** **** **** 4532</dd>*/}
                    {/*        </div>*/}
                    {/*    </dl>*/}
                    {/*</div>*/}
                </CardContent>

                <CardFooter className="flex flex-row items-center border-t bg-muted/50 px-6 py-3">
                    <div className="text-xs text-muted-foreground">
                        Updated <time dateTime="2024-07-19">July 19, 2024</time>
                    </div>
                </CardFooter>

            </Card>

        </div>
    )
}