"use client";


import Link from "next/link";
import {
    Bell,
    CalendarClock, CandlestickChart,
    Home, LibraryBig,
    MessageCircleMore,
    Settings, UserCircle,
} from "lucide-react";
import {Button} from "@/components/ui/button";
import {Badge} from "@/components/ui/badge";
import Image from "next/image";
import {
    PATIENT_DASHBOARD_URL, PATIENT_SELF_PROGRESS_EVALUATION_URL,
    PATIENTS_APPOINTMENTS_URL, PATIENTS_DOCTORS_URL,
    PATIENTS_LIBRARY_RESOURCE_URL, PATIENTS_SESSIONS_URL,
    PATIENTS_SETTINGS_URL
} from "@/lib/constants";
import {usePathname} from "next/navigation";
import {cn} from "@/lib/utils";


export default function PatientsSideNavigation() {

    const currentPath = usePathname()

    return (
        <div
            className="fixed top-0 left-0 z-40 md:w-[220px] lg:w-[240px] h-screen hidden border-r bg-muted/40 md:block ">
            <div className="flex h-full max-h-screen flex-col gap-2">
                <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
                    <Link href={PATIENT_DASHBOARD_URL} className="flex items-center gap-2 font-semibold">
                        <Image
                            className="h-10 w-14 object-contain"
                            alt={"logo"} src={"/logo.webp"}
                            height={100} width={100}/>

                        <span className="">TheraChat</span>
                    </Link>
                    <Button variant="outline" size="icon" className="ml-auto h-8 w-8">
                        <Bell className="h-4 w-4"/>
                        <span className="sr-only">Toggle notifications</span>
                    </Button>
                </div>
                <div className="flex-1">

                    <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
                        <Link
                            href={PATIENT_DASHBOARD_URL}
                            className={cn("flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary",
                                currentPath === PATIENT_DASHBOARD_URL && "bg-muted text-primary"
                            )}
                        >
                            <Home className="h-4 w-4"/>
                            Dashboard
                        </Link>


                        <Link
                            href={PATIENTS_SESSIONS_URL}
                            className={cn("flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary",
                                currentPath.includes(PATIENTS_SESSIONS_URL) && "bg-muted text-primary"
                            )}
                        >
                            <MessageCircleMore className="h-4 w-4"/>
                            Sessions
                            <Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
                                6
                            </Badge>
                        </Link>


                        <Link
                            href={PATIENTS_DOCTORS_URL}
                            className={cn("flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary",
                                currentPath === PATIENTS_DOCTORS_URL && "bg-muted text-primary"
                            )}
                        >
                            <UserCircle className="h-4 w-4"/>
                            Doctors
                        </Link>


                        <Link
                            href={PATIENTS_APPOINTMENTS_URL}
                            className={cn("flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary",
                                currentPath === PATIENTS_APPOINTMENTS_URL && "bg-muted text-primary"
                            )}
                        >
                            <CalendarClock className="h-4 w-4"/>
                            Appointments
                        </Link>
                        <Link
                            href={PATIENTS_LIBRARY_RESOURCE_URL}
                            className={cn("flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary",
                                currentPath === PATIENTS_LIBRARY_RESOURCE_URL && "bg-muted text-primary"
                            )}
                        >
                            <LibraryBig className="h-4 w-4"/>
                            Library Resources
                        </Link>
                        <Link
                            href={PATIENT_SELF_PROGRESS_EVALUATION_URL}
                            className={cn("flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary",
                                currentPath === PATIENT_SELF_PROGRESS_EVALUATION_URL && "bg-muted text-primary"
                            )}
                        >
                            <CandlestickChart className="h-4 w-4"/>
                            Self Progress Evaluation
                        </Link>
                    </nav>

                </div>
                <div className="mt-auto p-4">
                    <Link
                        href={PATIENTS_SETTINGS_URL}
                        className={cn("flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary",
                            currentPath === PATIENTS_SETTINGS_URL && "bg-muted text-primary"
                        )}
                    >
                        <Settings className="h-4 w-4"/>
                        Settings & Profile
                    </Link>
                </div>
            </div>
        </div>
    )
}