// Path: Frontend/src/components/dashboard/shared/dashboard-sidebar.tsx

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

type DashboardSidebarProps = {
	onNavigate?: () => void;
	data?: Pick<DashboardHomeShellData, "classroomSummary" | "sidebarLinks" | "sidebarSupport">;
};

const DashboardSidebar: Component<DashboardSidebarProps> = (props) => {
	const location = useLocation();
	const summary = () => props.data?.classroomSummary ?? classroomSummary;
	const links = () => props.data?.sidebarLinks ?? sidebarLinks;
	const support = () => props.data?.sidebarSupport ?? sidebarSupport;

	const isActiveLink = (href?: string) => {
		if (!href) return false;
		if (location.pathname === href) return true;
		const isHomeLink = links().some((link) => link.href === href && link.active);
		if (isHomeLink) return false;
		return location.pathname === href || location.pathname.startsWith(`${href}/`);
	};

	return (
		<aside class={styles.sidebar}>
			<div class={styles.brand}>
				<img class={styles.brandLogo} src="/brand/boost-ai-logo-purple.png" alt="Boost AI" />
				<p class={styles.brandMeta}>{summary().name}</p>
			</div>

			<nav class={styles.navigation} aria-label="Dashboard navigation">
				<For each={links()}>
					{(link) => (
						<A href={link.href ?? "#"} classList={{ [styles.link]: true, [styles.active]: isActiveLink(link.href) || (!!link.active && !!link.href && location.pathname === link.href) }} 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={support().avatars}>{(avatar) => <span>{avatar}</span>}</For>
				</div>
				<h2>{support().title}</h2>
				<p>{support().description}</p>
				<A href={support().buttonHref} class={styles.supportButton} onClick={() => props.onNavigate?.()}>
					{support().buttonLabel}
				</A>
			</div>
		</aside>
	);
};

export default DashboardSidebar;
