import { A } from "@solidjs/router";
import { For, Show, type Component } from "solid-js";
import type { TeacherDashboardHomeData } from "./dashboard-teacher-home.data";
import styles from "./dashboard-teacher-home.module.scss";

type DashboardTeacherHomeProps = {
	data: TeacherDashboardHomeData;
};

const statusToneClass = (value: string) => {
	const normalized = value.toLowerCase();
	if (normalized.includes("review")) return styles.statusToneReview;
	if (normalized.includes("progress")) return styles.statusToneProgress;
	if (normalized.includes("draft")) return styles.statusToneDraft;
	if (normalized.includes("closed")) return styles.statusToneNeutral;
	return styles.statusToneLive;
};

const DashboardTeacherHome: Component<DashboardTeacherHomeProps> = (props) => {
	return (
		<div class={styles.teacherPage}>
			<section class={styles.heroCard}>
				<div class={styles.heroSummary}>
					<p class={styles.eyebrow}>{props.data.overview.eyebrow}</p>
					<h1>{props.data.overview.title}</h1>
					<p class={styles.heroDescription}>{props.data.overview.description}</p>

					<div class={styles.heroActions}>
						<For each={props.data.overview.actions}>
							{(action) => (
								<A href={action.href} classList={{ [styles.heroAction]: true, [styles.heroActionPrimary]: action.tone === "primary", [styles.heroActionSecondary]: action.tone === "secondary" }}>
									<strong>{action.label}</strong>
									<span>{action.description}</span>
								</A>
							)}
						</For>
					</div>
				</div>

				<div class={styles.statCardsGrid}>
					<For each={props.data.overview.stats}>
						{(stat, index) => (
							<article class={styles.statCard}>
								<span class={styles.statLabel}>{stat.label}</span>
								<strong class={styles.statValue}>{stat.value}</strong>
								<Show when={index() === 0}>
									<span class={`${styles.statusPill} ${styles.statusToneReview}`}>Priority now</span>
								</Show>
								<p>{stat.note}</p>
							</article>
						)}
					</For>
				</div>
			</section>

			<section class={styles.sectionCard}>
				<header class={styles.sectionHeader}>
					<p class={styles.sectionEyebrow}>Priority</p>
					<h2>{props.data.reviewQueue.title}</h2>
					<p>{props.data.reviewQueue.description}</p>
				</header>

				<Show when={props.data.reviewQueue.items.length} fallback={<div class={styles.emptyState}>No student submissions are waiting right now.</div>}>
					<div class={styles.reviewQueueList}>
						<For each={props.data.reviewQueue.items}>
							{(item) => (
								<A href={item.href} class={styles.listCard}>
									<div class={styles.listLead}>
										<span class={styles.avatar}>{item.initials}</span>
										<div class={styles.itemCopy}>
											<strong>{item.studentName}</strong>
											<p>{item.assignmentTitle}</p>
										</div>
									</div>
									<div class={styles.listDetails}>
										<div class={styles.detailBlock}>
											<span class={styles.detailKicker}>Classroom</span>
											<small class={styles.detailValue}>{item.classroomName}</small>
										</div>
										<div class={styles.detailBlock}>
											<span class={styles.detailKicker}>Progress</span>
											<small class={styles.detailValue}>{item.progressLabel}</small>
										</div>
									</div>
									<div class={styles.itemMeta}>
										<span class={`${styles.statusPill} ${statusToneClass(item.statusLabel)}`}>{item.statusLabel}</span>
										<small>{item.timestampLabel}</small>
									</div>
								</A>
							)}
						</For>
					</div>
				</Show>
			</section>

			<section class={styles.sectionCard}>
				<header class={styles.sectionHeader}>
					<p class={styles.sectionEyebrow}>Snapshot</p>
					<h2>{props.data.assignmentFocus.title}</h2>
					<p>{props.data.assignmentFocus.description}</p>
				</header>

				<Show when={props.data.assignmentFocus.items.length} fallback={<div class={styles.emptyState}>Assignments will appear here once this teacher has active work live in the backend.</div>}>
					<div class={styles.assignmentList}>
						<For each={props.data.assignmentFocus.items}>
							{(item) => (
								<article class={styles.assignmentCard}>
									<div class={styles.assignmentHeader}>
										<div class={styles.assignmentCopy}>
											<strong>{item.title}</strong>
											<p>{item.classroomName}</p>
										</div>
										<span class={`${styles.statusPill} ${statusToneClass(item.statusLabel)}`}>{item.statusLabel}</span>
									</div>
									<div class={styles.assignmentMeta}>
										<span class={styles.metaPill}>{item.dueLabel}</span>
										<span class={styles.metaPill}>{item.queueLabel}</span>
										<span class={styles.metaPill}>{item.completionLabel}</span>
									</div>
									<A href={item.href} class={styles.assignmentLink}>
										Open now
									</A>
								</article>
							)}
						</For>
					</div>
				</Show>
			</section>
		</div>
	);
};

export default DashboardTeacherHome;
