import type { Component } from "solid-js";
import { For } from "solid-js";
import { A, useLocation } from "@solidjs/router";
import { classroomSummary, sidebarLinks, sidebarSupport } from "./dashboard.data";
import styles from "./dashboard-sidebar.module.scss";

type DashboardSidebarProps = {
	onNavigate?: () => void;
};

const DashboardSidebar: Component<DashboardSidebarProps> = (props) => {
	const location = useLocation();

	const isActiveLink = (href?: string) => {
		if (!href) return false;
		if (href === "/dashboard") return location.pathname === "/dashboard";
		return location.pathname === href || location.pathname.startsWith(`${href}/`);
	};

	return (
		<aside class={styles.sidebar}>
			<div class={styles.brand}>
				<div class={styles.logoMark}>R</div>
				<div>
					<p class={styles.brandName}>Rooster AI</p>
					<p class={styles.brandMeta}>{classroomSummary.name}</p>
				</div>
			</div>

			<nav class={styles.navigation} aria-label="Dashboard navigation">
				<For each={sidebarLinks}>
					{(link) => (
						<A
							href={link.href ?? "#"}
							classList={{ [styles.link]: true, [styles.active]: isActiveLink(link.href) || (!!link.active && location.pathname === "/dashboard") }}
							onClick={() => props.onNavigate?.()}
						>
							<span class={styles.iconSlot}>{link.icon}</span>
							<span class={styles.linkCopy}>
								<strong>{link.label}</strong>
								{link.detail && <small>{link.detail}</small>}
							</span>
						</A>
					)}
				</For>
			</nav>

			<div class={styles.supportCard}>
				<div class={styles.avatarRow}>
					<For each={sidebarSupport.avatars}>{(avatar) => <span>{avatar}</span>}</For>
				</div>
				<h2>{sidebarSupport.title}</h2>
				<p>{sidebarSupport.description}</p>
				<A href={sidebarSupport.buttonHref} class={styles.supportButton} onClick={() => props.onNavigate?.()}>
					{sidebarSupport.buttonLabel}
				</A>
			</div>
		</aside>
	);
};

export default DashboardSidebar;
