import AdminClientsRightPanel from "@/app/(admin)/admin/manage-clients/_components/_clients_right_panel";
import {
    DropdownMenu, DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import {Button} from "@/components/ui/button";
import {ListFilter, UserRoundPlus} from "lucide-react";
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
import Link from "next/link";
import {ADMIN_ADD_NEW_CLIENT_URL, ADMIN_DASHBOARD_URL} from "@/lib/constants";
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList, BreadcrumbPage,
    BreadcrumbSeparator
} from "@/components/ui/breadcrumb";
import AdminPageContainer from "@/app/(admin)/_components/_admin_container";
import {formatDateTime} from "@/lib/utils";
import {getAdminManageClientsData} from "@/lib/backend/api";



export const fetchCache = 'force-no-store';


export default async function ManageClients() {

    const {clients, total} = await getAdminManageClientsData()

    return (
        <AdminPageContainer breadcrumbs={
            <Breadcrumb className="hidden md:flex">
                <BreadcrumbList>
                    <BreadcrumbItem>
                        <p>LulamaChat</p>
                    </BreadcrumbItem>
                    <BreadcrumbSeparator/>
                    <BreadcrumbLink asChild>
                        <Link href={ADMIN_DASHBOARD_URL}>Dashboard</Link>
                    </BreadcrumbLink>
                    <BreadcrumbSeparator/>
                    <BreadcrumbItem>
                        <BreadcrumbPage>Manage Clients</BreadcrumbPage>
                    </BreadcrumbItem>
                </BreadcrumbList>
            </Breadcrumb>
        } className={"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3"}>

            <div className="flex-1 gap-4 md:gap-8 lg:col-span-2">

                <div className="flex flex-col space-y-4">
                    <div className="ml-auto flex items-center gap-2">
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button
                                    variant="outline"
                                    size="sm"
                                    className="h-7 gap-1 text-sm"
                                >
                                    <ListFilter className="h-3.5 w-3.5"/>
                                    <span className="sr-only sm:not-sr-only">Filter</span>
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                                <DropdownMenuLabel>Filter by</DropdownMenuLabel>
                                <DropdownMenuSeparator/>
                                <DropdownMenuCheckboxItem checked>
                                    Nurses
                                </DropdownMenuCheckboxItem>
                                <DropdownMenuCheckboxItem>
                                    Doctors
                                </DropdownMenuCheckboxItem>
                                <DropdownMenuCheckboxItem>
                                    Therapists
                                </DropdownMenuCheckboxItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                        <Button
                            size="sm"
                            className="h-7 gap-1 text-sm"
                            asChild
                        >
                            <Link href={ADMIN_ADD_NEW_CLIENT_URL}>
                                <UserRoundPlus className="h-3.5 w-3.5"/>
                                <span className="sr-only sm:not-sr-only">Add New Client</span>
                            </Link>
                        </Button>
                    </div>

                    <div>
                        {/* clients body */}
                        <Card>

                            <CardHeader className="px-7">
                                <CardTitle>Clients</CardTitle>
                                <CardDescription>
                                    Clients added to your platform. Clients can only be registered by you the
                                    administrator.
                                </CardDescription>
                            </CardHeader>

                            <CardContent>
                                <Table>
                                    <TableHeader>
                                        <TableRow>
                                            <TableHead>Client/Nurse</TableHead>
                                            <TableHead>
                                                Nurse Licence No.
                                            </TableHead>
                                            <TableHead className="hidden sm:table-cell">
                                                Phone Number
                                            </TableHead>
                                            <TableHead className="hidden md:table-cell">
                                                Date Joined
                                            </TableHead>
                                            <TableHead className="hidden md:table-cell">
                                                Qualifications
                                            </TableHead>
                                        </TableRow>
                                    </TableHeader>
                                    <TableBody>

                                        {
                                            Array.isArray(clients) && clients.length > 0
                                                ? clients?.map((client, index) => (
                                                    <TableRow key={index}>
                                                        <TableCell>
                                                            <div className="font-medium">{client.full_name}</div>
                                                            <div className="hidden text-sm text-muted-foreground md:inline">
                                                                {client.email}
                                                            </div>
                                                        </TableCell>
                                                        <TableCell>
                                                            {client.nursingLicenceNumber}
                                                        </TableCell>
                                                        <TableCell className="hidden sm:table-cell">
                                                            {client.phoneNumber}
                                                        </TableCell>
                                                        <TableCell className="hidden md:table-cell">
                                                            {formatDateTime(client.$createdAt).dateOnly}
                                                        </TableCell>
                                                        <TableCell className="hidden md:table-cell">
                                                            {client.qualificationEarned}
                                                        </TableCell>
                                                    </TableRow>
                                                ))
                                                : <TableRow>
                                                    <TableCell
                                                        colSpan={5}
                                                        className='h-32 text-center'
                                                    >
                                                        No Clients Found
                                                    </TableCell>
                                                </TableRow>
                                        }


                                    </TableBody>
                                </Table>
                            </CardContent>
                        </Card>
                    </div>

                </div>

            </div>

            <AdminClientsRightPanel/>

        </AdminPageContainer>
    )
}