"use client";

import Link from "next/link";
import {CircleUser, Menu, Package2, Search} from "lucide-react";
import {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger} from "@/components/ui/sheet";
import {Button} from "@/components/ui/button";
import {Input} from "@/components/ui/input";
import {
    DropdownMenu,
    DropdownMenuContent, DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import Image from "next/image";
import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
import {
    CLIENTS_APPOINTMENTS_URL,
    CLIENTS_DASHBOARD_URL, CLIENTS_LIBRARY_RESOURCE_URL,
    CLIENTS_PATIENTS_URL,
    CLIENTS_SESSIONS_URL
} from "@/lib/constants";
import {cn} from "@/lib/utils";
import {usePathname} from "next/navigation";

type ClientNavLinkType = {
    title: string;
    link: string;
}

const clientLinks: ClientNavLinkType[] = [
    {
        title: "Dashboard",
        link: CLIENTS_DASHBOARD_URL
    }, {
        title: "Sessions",
        link: CLIENTS_SESSIONS_URL
    }, {
        title: "Appointments",
        link: CLIENTS_APPOINTMENTS_URL
    }, {
        title: "Patients",
        link: CLIENTS_PATIENTS_URL
    }, {
        title: "Library-Res.",
        link: CLIENTS_LIBRARY_RESOURCE_URL
    }
]


export default function ClientsHeader() {

    const currentPath = usePathname()

    return (
        <header className="w-full border-b sticky z-[50] top-0 backdrop-blur-xl flex h-16 items-center gap-4 border-b px-4 md:px-6">
            <nav
                className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
                <Image
                    className="h-14 w-14 object-contain"
                    alt={"logo"} src={"/logo.webp"}
                    height={100} width={100}/>

                {
                    clientLinks.map((link, index) => (
                        <Link
                            key={index}
                            href={link.link}
                            className={
                                cn(
                                    "flex-none text-foreground transition-colors hover:text-foreground",
                                    currentPath === link.link && "text-lg font-semibold md:text-base"
                                )
                            }
                        >
                            {link.title}
                        </Link>
                    ))
                }

            </nav>


            <Sheet>
                <SheetTrigger asChild>
                    <Button
                        variant="outline"
                        size="icon"
                        className="shrink-0 md:hidden"
                    >
                        <Menu className="h-5 w-5"/>
                        <span className="sr-only">Toggle navigation menu</span>
                    </Button>
                </SheetTrigger>
                <SheetContent side="left">

                    <SheetHeader>
                        <SheetTitle>
                            <VisuallyHidden.Root>
                                menu
                            </VisuallyHidden.Root>
                        </SheetTitle>
                        <SheetDescription>
                            <VisuallyHidden.Root>
                                admin main panel
                            </VisuallyHidden.Root>
                        </SheetDescription>
                    </SheetHeader>


                    <nav className="grid gap-6 text-lg font-medium">
                        <Image
                            className="h-14 w-14 object-contain"
                            alt={"logo"} src={"/logo.webp"}
                            height={100} width={100}/>

                        {
                            clientLinks.map((link, index) => (
                                <Link
                                    key={index}
                                    href={link.link}
                                    className={
                                        cn("text-muted-foreground hover:text-foreground",
                                            currentPath.includes(link.link) && "text-lg font-semibold md:text-base hover:text-foreground"
                                        )
                                    }
                                >
                                    {link.title}
                                </Link>
                            ))
                        }
                    </nav>
                </SheetContent>
            </Sheet>


            <div className="flex w-full md:w-auto items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
                <form className="ml-auto flex-1 sm:flex-initial">
                    <div className="relative">
                        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground"/>
                        <Input
                            type="search"
                            placeholder="Search TheraChat..."
                            className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
                        />
                    </div>
                </form>


                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant="secondary" size="icon" className="rounded-full">
                            <CircleUser className="h-5 w-5"/>
                            <span className="sr-only">Toggle user menu</span>
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                        <DropdownMenuLabel>My Account</DropdownMenuLabel>
                        <DropdownMenuSeparator/>
                        <DropdownMenuItem>Settings</DropdownMenuItem>
                        <DropdownMenuItem>Support</DropdownMenuItem>
                        <DropdownMenuSeparator/>
                        <DropdownMenuItem>Logout</DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>


        </header>
    )
}