import { A } from "@solidjs/router";
import { createSignal, For, onCleanup, onMount, Show, type Component } from "solid-js";
import DashboardThemeToggle from "./dashboard-theme-toggle";
import { topbarMessages, topbarNotifications, topbarSummary } from "./dashboard.data";
import styles from "./dashboard-topbar.module.scss";

type DashboardTopbarProps = {
	isSidebarOpen: boolean;
	onMenuToggle: () => void;
};

const DashboardTopbar: Component<DashboardTopbarProps> = (props) => {
	const [openMenu, setOpenMenu] = createSignal<"notifications" | "messages" | "profile" | null>(null);
	let menuRoot: HTMLDivElement | undefined;

	const toggleMenu = (menu: "notifications" | "messages" | "profile") => {
		setOpenMenu((current) => (current === menu ? null : menu));
	};

	onMount(() => {
		const handlePointerDown = (event: MouseEvent) => {
			if (!menuRoot?.contains(event.target as Node)) {
				setOpenMenu(null);
			}
		};

		document.addEventListener("pointerdown", handlePointerDown);
		onCleanup(() => document.removeEventListener("pointerdown", handlePointerDown));
	});

	return (
		<header class={styles.topbar}>
			<button
				type="button"
				classList={{ [styles.menuButton]: true, [styles.menuButtonOpen]: props.isSidebarOpen }}
				aria-label={props.isSidebarOpen ? "Close menu" : "Open menu"}
				aria-expanded={props.isSidebarOpen}
				onClick={props.onMenuToggle}
			>
				<span class={styles.menuGlyph} aria-hidden="true">
					<span class={styles.menuLine} />
					<span class={styles.menuLine} />
					<span class={styles.menuLine} />
				</span>
			</button>

			<label class={styles.searchField}>
				<span class={styles.searchIcon} aria-hidden="true">
					<svg viewBox="0 0 24 24">
						<circle cx="11" cy="11" r="6" />
						<path d="M20 20l-4.2-4.2" />
					</svg>
				</span>
				<input type="search" placeholder={topbarSummary.searchPlaceholder} />
			</label>

			<div class={styles.actions} ref={menuRoot}>
				<DashboardThemeToggle />

				<div class={styles.menuGroup}>
					<button
						type="button"
						class={styles.iconButton}
						aria-label="Notifications"
						aria-expanded={openMenu() === "notifications"}
						onClick={() => toggleMenu("notifications")}
					>
						<svg viewBox="0 0 24 24" aria-hidden="true">
							<path d="M12 5a4 4 0 0 1 4 4v2.5c0 1 .4 2 .99 2.8L18 16H6l1.01-1.7c.59-.8.99-1.8.99-2.8V9a4 4 0 0 1 4-4Z" />
							<path d="M10 18a2 2 0 0 0 4 0" />
						</svg>
						<Show when={topbarSummary.notificationCount > 0}>
							<span class={styles.countBadge}>{topbarSummary.notificationCount}</span>
						</Show>
					</button>

					<Show when={openMenu() === "notifications"}>
						<div class={styles.dropdown}>
							<div class={styles.dropdownHeader}>
								<div>
									<p class={styles.dropdownEyebrow}>Alerts</p>
									<strong>Notifications</strong>
								</div>
								<A href="/dashboard/progress" class={styles.dropdownLink} onClick={() => setOpenMenu(null)}>
									Open progress
								</A>
							</div>

							<div class={styles.dropdownList}>
								<For each={topbarNotifications}>
									{(item) => (
										<A href={item.href} class={styles.dropdownItem} onClick={() => setOpenMenu(null)}>
											<span class={`${styles.itemTone} ${styles[`tone-${item.tone}`]}`} aria-hidden="true" />
											<div class={styles.itemCopy}>
												<strong>{item.title}</strong>
												<p>{item.description}</p>
											</div>
											<small>{item.timestamp}</small>
										</A>
									)}
								</For>
							</div>
						</div>
					</Show>
				</div>

				<div class={styles.menuGroup}>
					<button
						type="button"
						class={styles.iconButton}
						aria-label="Messages"
						aria-expanded={openMenu() === "messages"}
						onClick={() => toggleMenu("messages")}
					>
						<svg viewBox="0 0 24 24" aria-hidden="true">
							<path d="M4 6h16v10H8l-4 3V6Z" />
						</svg>
						<Show when={topbarSummary.messageCount > 0}>
							<span class={styles.countBadge}>{topbarSummary.messageCount}</span>
						</Show>
					</button>

					<Show when={openMenu() === "messages"}>
						<div class={styles.dropdown}>
							<div class={styles.dropdownHeader}>
								<div>
									<p class={styles.dropdownEyebrow}>Inbox</p>
									<strong>Messages</strong>
								</div>
								<A href="/dashboard/messages" class={styles.dropdownLink} onClick={() => setOpenMenu(null)}>
									Open inbox
								</A>
							</div>

							<div class={styles.dropdownList}>
								<For each={topbarMessages}>
									{(item) => (
										<A href={item.actionHref} class={styles.dropdownItem} onClick={() => setOpenMenu(null)}>
											<span class={styles.messageAvatar}>{item.initials}</span>
											<div class={styles.itemCopy}>
												<strong>{item.sender}</strong>
												<p>{item.preview}</p>
											</div>
											<small>{item.timestamp}</small>
										</A>
									)}
								</For>
							</div>
						</div>
					</Show>
				</div>

				<div class={styles.menuGroup}>
					<button
						type="button"
						classList={{ [styles.profileButton]: true, [styles.profileButtonOpen]: openMenu() === "profile" }}
						aria-label="Profile menu"
						aria-expanded={openMenu() === "profile"}
						onClick={() => toggleMenu("profile")}
					>
						<div class={styles.profile}>
							<div>
								<p class={styles.profileName}>{topbarSummary.profileName}</p>
								<p class={styles.profileRole}>{topbarSummary.profileRole}</p>
							</div>
							<span class={styles.profileBadge}>{topbarSummary.profileBadge}</span>
							<span class={styles.profileChevron} aria-hidden="true">
								<svg viewBox="0 0 20 20">
									<path d="m5 7.5 5 5 5-5" />
								</svg>
							</span>
						</div>
					</button>

					<Show when={openMenu() === "profile"}>
						<div class={styles.dropdown}>
							<div class={styles.dropdownHeader}>
								<div>
									<p class={styles.dropdownEyebrow}>Signed in as</p>
									<strong>{topbarSummary.profileName}</strong>
								</div>
								<span class={styles.profileMenuBadge}>{topbarSummary.profileBadge}</span>
							</div>

							<div class={styles.dropdownList}>
								<A href="/dashboard/settings" class={styles.dropdownItem} onClick={() => setOpenMenu(null)}>
									<span class={`${styles.itemTone} ${styles["tone-blue"]}`} aria-hidden="true" />
									<div class={styles.itemCopy}>
										<strong>Profile</strong>
										<p>Update your learner details and view your profile settings.</p>
									</div>
								</A>

								<A href="/dashboard/settings" class={styles.dropdownItem} onClick={() => setOpenMenu(null)}>
									<span class={`${styles.itemTone} ${styles["tone-yellow"]}`} aria-hidden="true" />
									<div class={styles.itemCopy}>
										<strong>Settings</strong>
										<p>Manage goals, preferences, reminders, and dashboard options.</p>
									</div>
								</A>

								<A href="/auth/login" class={styles.dropdownItem} onClick={() => setOpenMenu(null)}>
									<span class={`${styles.itemTone} ${styles["tone-teal"]}`} aria-hidden="true" />
									<div class={styles.itemCopy}>
										<strong>Log out</strong>
										<p>Return to the sign-in screen. This is a UI-only sign out for now.</p>
									</div>
								</A>
							</div>
						</div>
					</Show>
				</div>
			</div>
		</header>
	);
};

export default DashboardTopbar;
