"use client";

import {Sheet, SheetContent, SheetTrigger} from "@/components/ui/sheet";
import {Button} from "@/components/ui/button";
import {
    CalendarClock, CandlestickChart,
    CircleUser,
    Home, LibraryBig,
    LineChart,
    Menu,
    MessageCircleMore,
    Package,
    Package2,
    Search,
    ShoppingCart,
    Users
} from "lucide-react";
import Link from "next/link";
import {Badge} from "@/components/ui/badge";
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
import {Input} from "@/components/ui/input";
import {
    DropdownMenu,
    DropdownMenuContent, DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import {usePathname} from "next/navigation";
import Image from "next/image";
import {
    PATIENT_DASHBOARD_URL, PATIENT_SELF_PROGRESS_EVALUATION_URL,
    PATIENTS_APPOINTMENTS_URL,
    PATIENTS_LIBRARY_RESOURCE_URL,
    PATIENTS_SESSIONS_URL
} from "@/lib/constants";
import {cn} from "@/lib/utils";

export default function PatientsHeader() {

    const currentPath = usePathname()

    return (
        <header className="sticky top-0 flex h-14 z-40 items-center gap-4 border-b bg-muted/40 backdrop-blur-xl px-4 lg:h-[60px] lg:px-6">
            <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" className="flex flex-col">
                    <nav className="grid gap-2 text-lg font-medium">
                        <Link
                            href={PATIENT_DASHBOARD_URL}
                            className="flex items-left gap-2 text-lg font-semibold"
                        >
                            <Image
                                className="h-10 w-14 object-contain"
                                alt={"logo"} src={"/logo.webp"}
                                height={100} width={100}/>

                            <span className="sr-only">TheraChat</span>
                        </Link>
                        <Link
                            href={PATIENT_DASHBOARD_URL}
                            className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground",
                                currentPath === PATIENT_DASHBOARD_URL && "bg-muted text-foreground"
                            )}
                        >
                            <Home className="h-5 w-5"/>
                            Dashboard
                        </Link>
                        <Link
                            href={PATIENTS_SESSIONS_URL}
                            className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground",
                                currentPath === PATIENTS_SESSIONS_URL && "bg-muted text-foreground"
                            )}
                        >
                            <MessageCircleMore className="h-5 w-5"/>
                            Sessions
                            <Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
                                6
                            </Badge>
                        </Link>
                        <Link
                            href={PATIENTS_APPOINTMENTS_URL}
                            className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground",
                                currentPath === PATIENTS_APPOINTMENTS_URL && "bg-muted text-foreground"
                            )}
                        >
                            <CalendarClock className="h-5 w-5"/>
                            Appointments
                        </Link>
                        <Link
                            href={PATIENTS_LIBRARY_RESOURCE_URL}
                            className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground",
                                currentPath ===PATIENTS_LIBRARY_RESOURCE_URL && "bg-muted text-foreground"
                            )}
                        >
                            <LibraryBig className="h-5 w-5"/>
                            Library Resources
                        </Link>
                        <Link
                            href={PATIENT_SELF_PROGRESS_EVALUATION_URL}
                            className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground",
                                currentPath === PATIENT_SELF_PROGRESS_EVALUATION_URL && "bg-muted text-foreground"
                            )}
                        >
                            <CandlestickChart className="h-5 w-5"/>
                            Self Progress Evaluation
                        </Link>
                    </nav>
                    <div className="mt-auto">
                        <Card>
                            <CardHeader>
                                <CardTitle>Upgrade to Pro</CardTitle>
                                <CardDescription>
                                    Unlock all features and get unlimited access to our
                                    support team.
                                </CardDescription>
                            </CardHeader>
                            <CardContent>
                                <Button size="sm" className="w-full">
                                    Upgrade
                                </Button>
                            </CardContent>
                        </Card>
                    </div>
                </SheetContent>
            </Sheet>
            <div className="w-full flex-1">
                <form>
                    <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="w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3"
                        />
                    </div>
                </form>
            </div>
            <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>
        </header>
    )
}