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 { getDashboardAssignmentCreateHref, getDashboardAssignmentsHref, getDashboardHomeHref, getDashboardTeacherClosedAssignmentsHref } from "../../../lib/routes";
import styles from "./dashboard-teacher-assignments.module.scss";
import { getDashboardTeacherAssignmentsFocusData } from "./dashboard-teacher-assignments.data";

type DashboardTeacherAssignmentsProps = {
	mode?: "all" | "closed";
};

const DashboardTeacherAssignments: Component<DashboardTeacherAssignmentsProps> = (props) => {
	const auth = useAuth();
	const [teacherId, setTeacherId] = createSignal<number | null>(null);
	const [data] = createResource(teacherId, getDashboardTeacherAssignmentsFocusData);
	const mode = () => props.mode ?? "all";

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

	return (
		<section class={styles.section}>
			<article class={styles.heroCard}>
				<div class={styles.heroCopy}>
					<p class={styles.eyebrow}>{mode() === "closed" ? dashboardUiCopy.teacherAssignments.eyebrow.closed : dashboardUiCopy.teacherAssignments.eyebrow.all}</p>
					<h1>{mode() === "closed" ? dashboardUiCopy.teacherAssignments.title.closed : dashboardUiCopy.teacherAssignments.title.all}</h1>
					<p>
						{mode() === "closed"
							? "Open older closed homework here to review what students previously completed, revisit feedback, and inspect final outcomes."
							: "Keep live homework and review-ready work easy to scan here, then open the dedicated create page when you want to build something new."}
					</p>
				</div>

				<div class={styles.setupGrid}>
					<aside class={styles.setupSummaryCard}>
						<p class={styles.panelEyebrow}>{mode() === "closed" ? dashboardUiCopy.teacherAssignments.panelEyebrow.closed : dashboardUiCopy.teacherAssignments.panelEyebrow.all}</p>
						<h2>{mode() === "closed" ? dashboardUiCopy.teacherAssignments.panelTitle.closed : dashboardUiCopy.teacherAssignments.panelTitle.all}</h2>
						<p class={styles.setupNote}>
							{mode() === "closed"
								? "Closed homework stays available here for reflection. Open any card below to revisit the full teacher review view for that assignment."
								: "Open the dedicated assignment-create page to choose a classroom, attach questions, and create live homework."}
						</p>
						<div class={styles.formActions}>
							<Show
								when={mode() !== "closed"}
								fallback={
									<A href={getDashboardAssignmentsHref("teacher")} class={styles.primaryAction}>
										{dashboardUiCopy.teacherAssignments.actions.backToAssignments}
									</A>
								}
							>
								<A href={getDashboardAssignmentCreateHref("teacher")} class={styles.primaryAction}>
									{dashboardUiCopy.teacherAssignments.actions.createAssignment}
								</A>
							</Show>
							<Show when={mode() !== "closed"}>
								<A href={getDashboardTeacherClosedAssignmentsHref()} class={styles.secondaryAction}>
									{dashboardUiCopy.teacherAssignments.actions.viewClosedHomework}
								</A>
							</Show>
							<A href={getDashboardHomeHref("teacher")} class={styles.secondaryAction}>
								{dashboardUiCopy.teacherAssignments.actions.backToOverview}
							</A>
						</div>
					</aside>
				</div>
			</article>

			<div class={styles.groupList}>
				<Show when={!data.loading} fallback={<section class={styles.infoCard}>{dashboardUiCopy.teacherAssignments.loading}</section>}>
					<Show when={(data()?.groups.filter((group) => mode() === "closed" ? group.title === "Closed" : true).length ?? 0) > 0} fallback={<section class={styles.infoCard}>{mode() === "closed" ? dashboardUiCopy.teacherAssignments.empty.closed : dashboardUiCopy.teacherAssignments.empty.all}</section>}>
						<div class={styles.groupStack}>
							<For each={(data()?.groups ?? []).filter((group) => (mode() === "closed" ? group.title === "Closed" : true))}>
								{(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) => {
												const cardContent = (
													<>
														<div class={styles.cardTop}>
															<span
																classList={{
											[styles.statusChip]: true,
											[styles.review]: item.tone === "review",
											[styles.live]: item.tone === "live",
											[styles.closed]: item.tone === "closed",
										}}
															>
																{item.statusLabel}
															</span>
															<span class={styles.progressText}>{item.workloadLabel}</span>
														</div>

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

														<div class={styles.cardMeta}>
															<span>{item.dueLabel}</span>
															<span>{item.queueLabel}</span>
															<span>{item.coverageLabel}</span>
														</div>
													</>
												);

												return item.primaryHref ? (
													<A
														href={item.primaryHref}
														classList={{
											[styles.assignmentCard]: true,
											[styles.assignmentCardLink]: true,
											[styles.assignmentCardReview]: item.tone === "review",
											[styles.assignmentCardLive]: item.tone === "live",
											[styles.assignmentCardClosed]: item.tone === "closed",
										}}
														id={`teacher-assignment-${item.id}`}
													>
														{cardContent}
													</A>
												) : (
													<article
														classList={{
											[styles.assignmentCard]: true,
											[styles.assignmentCardReview]: item.tone === "review",
											[styles.assignmentCardLive]: item.tone === "live",
											[styles.assignmentCardClosed]: item.tone === "closed",
										}}
														id={`teacher-assignment-${item.id}`}
													>
														{cardContent}
													</article>
												);
											}}
										</For>
									</div>
									</section>
								)}
							</For>
						</div>
					</Show>
				</Show>
			</div>
		</section>
	);
};

export default DashboardTeacherAssignments;
