// Path: Frontend/src/components/dashboard/dashboard-assignments-focus.tsx

import { A } from "@solidjs/router";
import type { Component } from "solid-js";
import { For, Show, createResource, createSignal, onMount } from "solid-js";
import { dashboardUiCopy } from "~/content/ui-copy";
import { useAuth } from "~/context/auth/context";
import styles from "./dashboard-assignments-focus.module.scss";
import { getDashboardAssignmentsFocusData } from "./dashboard-assignments.data";

const DashboardAssignmentsFocus: Component = () => {
	const auth = useAuth();
	const [studentId, setStudentId] = createSignal<number | null>(null);
	const [data] = createResource(studentId, getDashboardAssignmentsFocusData);

	onMount(() => {
		if (auth.user()?.role === "student") {
			setStudentId(auth.user()!.id);
		}
	});

	return (
		<section class={styles.section}>
			<article class={styles.heroCard}>
				<div class={styles.heroCopy}>
					<p class={styles.eyebrow}>{dashboardUiCopy.studentAssignmentsFocus.eyebrow}</p>
					<h1>{dashboardUiCopy.studentAssignmentsFocus.title}</h1>
					<p>{dashboardUiCopy.studentAssignmentsFocus.description}</p>
				</div>

				<div class={styles.statGrid}>
					<For each={data()?.stats ?? []}>
						{(stat) => (
							<div class={styles.statCard}>
								<strong>{stat.value}</strong>
								<span>{stat.label}</span>
							</div>
						)}
					</For>
				</div>
			</article>

			<div class={styles.groupList}>
				<Show when={!data.loading} fallback={<section class={styles.infoCard}>{dashboardUiCopy.studentAssignmentsFocus.loading}</section>}>
					<Show when={data()?.groups.length} fallback={<section class={styles.infoCard}>{dashboardUiCopy.studentAssignmentsFocus.empty}</section>}>
						<For each={data()?.groups ?? []}>
							{(group) => (
								<section class={styles.group}>
									<div class={styles.groupHeader}>
										<div>
											<h2>{group.title}</h2>
											<p>{group.description}</p>
										</div>
										<span class={styles.groupCount}>{group.items.length}</span>
									</div>

									<div class={styles.cardGrid}>
										<For each={group.items}>
											{(item) => (
												<article class={styles.assignmentCard}>
													<div class={styles.cardTop}>
														<span classList={{ [styles.statusChip]: true, [styles[item.tone]]: true }}>{item.statusLabel}</span>
														<span class={styles.progressText}>{item.progressText}</span>
													</div>

													<div class={styles.cardBody}>
														<h3>{item.title}</h3>
														<p>{item.meta}</p>
														<small>{item.subMeta}</small>
													</div>

													<div class={styles.cardActions}>
														<A href={item.primaryHref} class={styles.primaryAction}>
															{item.primaryLabel}
														</A>
														<A href={item.secondaryHref} class={styles.secondaryAction}>
															{item.secondaryLabel}
														</A>
													</div>
												</article>
											)}
										</For>
									</div>
								</section>
							)}
						</For>
					</Show>
				</Show>
			</div>
		</section>
	);
};

export default DashboardAssignmentsFocus;
