import {Input} from "@/components/ui/input";
import {FolderOpenDot, MessageCircleOff, MessageCirclePlus, Search, UserRoundPlus} from "lucide-react";
import {ScrollArea} from "@/components/ui/scroll-area";
import useSessionsList from "@/lib/hooks/useSessionsList";
import PatientSessionCard from "@/app/(patients)/_components/_patient_session_card";
import Link from "next/link";
import {ADMIN_ADD_NEW_CLIENT_URL} from "@/lib/constants";
import {Button} from "@/components/ui/button";

export default async function PatientSession() {
    const sessionsList = await useSessionsList();

    return (
        <div>

            <div className="p-4">
                <h2 className="text-2xl font-bold tracking-tight">
                    Therapy Sessions
                </h2>
                <p className="text-muted-foreground">
                    Here&apos;s a list of your therapy sessions with your health care nurse/therapist!
                </p>
            </div>

            <div className="flex flex-row items-center p-4 gap-2">
                <div className="flex-1 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
                    <form>
                        <div className="relative">
                            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground"/>
                            <Input placeholder="Search" className="pl-8"/>
                        </div>
                    </form>
                </div>

                <Button
                    size="lg"
                    className="h-10 gap-2 text-sm"
                    asChild
                >
                    <Link href={ADMIN_ADD_NEW_CLIENT_URL}>
                        <MessageCirclePlus className="h-5 w-5"/>
                        <span className="sr-only sm:not-sr-only">Add New Session</span>
                    </Link>
                </Button>

            </div>

            {
                sessionsList?.length === 0 &&
                <div className={"pt-20"}>
                    <div className={"text-green-950 flex flex-col justify-center items-center gap-4"}>
                        <MessageCircleOff size={32}/>
                        <div className={"text-center"}>
                            <p className={"font-semibold"}>No Sessions Found.</p>
                            <p>You currently have no sessions available with your doctor.</p>
                        </div>
                    </div>
                </div>
            }


            <ScrollArea className="h-full">

                <div className="flex flex-col md:grid md:grid-cols-2 gap-2 p-4 pt-0">

                    {
                        sessionsList && sessionsList?.length !== 0 &&
                        sessionsList?.map((session, index) => {
                            return (
                                <PatientSessionCard
                                    key={index}
                                    sessionId={session.$id}
                                    clientFullName={session.changeLog}
                                    sentDate={session.$updatedAt}
                                    sessionLatestMessage={session.sessionMessages.at(0)}/>
                            )
                        })
                    }


                </div>
            </ScrollArea>


        </div>
    )
}