import * as React from "react";
import { ChevronRight, LoaderIcon } from "lucide-react";

import { SearchForm } from "@/components/search-form";
import {
	Collapsible,
	CollapsibleContent,
	CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
	Sidebar,
	SidebarContent,
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarHeader,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
	SidebarRail,
} from "@/components/ui/sidebar";
import { getAllDays, getAllLines } from "@/db";
import { auth, signIn, signOut } from "@/auth";
import { refetchAllData } from "@/app/actions";

export async function AppSidebar({
	...props
}: React.ComponentProps<typeof Sidebar>) {
	const allLines = await getAllLines();
	const allDays = await getAllDays();
	const data = {
		navMain: [
			{
				title: "Dny",
				items: allDays.map((day) => ({
					title: new Date(day).toLocaleDateString("cs-CZ", {
						weekday: "long",
						day: "numeric",
						month: "numeric",
					}),
					url: `/date/${day}`,
					isActive: false, // You can set this based on your routing logic
				})),
			},
			{
				title: "Linie",
				items: allLines.map((line) => ({
					title: line.name,
					url: `/line/${line.id}`,
					isActive: false, // You can set this based on your routing logic
				})),
			},
		],
	};

	const session = await auth();
	console.log("Session:", session);
	const username = session?.user?.name;

	return (
		<Sidebar {...props}>
			<SidebarHeader>
				<SearchForm action="/search" />
			</SidebarHeader>
			<SidebarContent className="gap-0">
				<SidebarGroup>
					<SidebarGroupContent>
						<SidebarMenu>
							<SidebarMenuItem key={"home"}>
								<SidebarMenuButton asChild isActive={false}>
									<a href="/">Rozcestník</a>
								</SidebarMenuButton>
							</SidebarMenuItem>
							<SidebarMenuItem key={"now"}>
								<SidebarMenuButton asChild isActive={false}>
									<a href="/now">Kam jít?</a>
								</SidebarMenuButton>
							</SidebarMenuItem>
							<SidebarMenuItem key={"favorites"}>
								<SidebarMenuButton asChild isActive={false}>
									<a href="/favorites">Oblíbené</a>
								</SidebarMenuButton>
							</SidebarMenuItem>
						</SidebarMenu>
					</SidebarGroupContent>
				</SidebarGroup>
				{/* We create a collapsible SidebarGroup for each parent. */}
				{data.navMain.map((item) => (
					<Collapsible
						key={item.title}
						title={item.title}
						defaultOpen
						className="group/collapsible"
					>
						<SidebarGroup>
							<SidebarGroupLabel
								asChild
								className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
							>
								<CollapsibleTrigger>
									{item.title}{" "}
									<ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
								</CollapsibleTrigger>
							</SidebarGroupLabel>
							<CollapsibleContent>
								<SidebarGroupContent>
									<SidebarMenu>
										{item.items.map((item) => (
											<SidebarMenuItem key={item.title}>
												<SidebarMenuButton asChild isActive={item.isActive}>
													<a href={item.url}>{item.title}</a>
												</SidebarMenuButton>
											</SidebarMenuItem>
										))}
									</SidebarMenu>
								</SidebarGroupContent>
							</CollapsibleContent>
						</SidebarGroup>
					</Collapsible>
				))}
				<Collapsible
					title="Správa"
					defaultOpen={false}
					className="group/collapsible"
				>
					<SidebarGroup>
						<SidebarGroupLabel
							asChild
							className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
						>
							<CollapsibleTrigger>
								Správa{username ? ` (${username}) ` : " "}
								<ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
							</CollapsibleTrigger>
						</SidebarGroupLabel>
						<CollapsibleContent>
							<SidebarGroupContent>
								<SidebarMenu>
									{!username && (
										<SidebarMenuItem key={"login"}>
											<form
												action={async () => {
													"use server";
													await signIn("github");
												}}
											>
												<SidebarMenuButton>
													Přihlásit se přes GitHub
												</SidebarMenuButton>
											</form>
										</SidebarMenuItem>
									)}
									{username && (
										<>
											<SidebarMenuItem key={"logout"}>
												<form
													action={async () => {
														"use server";
														await signOut();
													}}
												>
													<SidebarMenuButton>
														Odhlásit se
													</SidebarMenuButton>
												</form>
											</SidebarMenuItem>
											<SidebarMenuItem key={"refetch"}>
												<form action={refetchAllData}>
													<SidebarMenuButton>
														Refetch all data
													</SidebarMenuButton>
												</form>
											</SidebarMenuItem>
										</>
									)}
								</SidebarMenu>
							</SidebarGroupContent>
						</CollapsibleContent>
					</SidebarGroup>
				</Collapsible>
			</SidebarContent>
			<SidebarRail />
		</Sidebar>
	);
}