import type { Component } from "solid-js";
import { A, useParams } from "@solidjs/router";
import { Match, Show, Switch, createEffect, createMemo, createResource, createSignal } from "solid-js";
import AssignmentTeacherReview from "../../../../components/assignment/teacher/assignment-teacher-review";
import { getTeacherAssignmentReviewPageData } from "../../../../components/assignment/teacher/assignment-teacher-review.data";
import { useAuth } from "../../../../context/auth/context";
import { getDashboardHomeHref } from "../../../../lib/routes";
import styles from "../../../../components/assignment/shared/assignment-page.module.scss";

const TeacherAssignmentPage: Component = () => {
	const params = useParams();
	const auth = useAuth();
	const [selectedStudentId, setSelectedStudentId] = createSignal<number | null>(null);
	const assignmentId = createMemo(() => {
		const parsed = Number(params.id);
		return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
	});
	const teacherSource = createMemo(() => {
		const id = assignmentId();
		const user = auth.user();
		if (!auth.isReady() || !id || !user || user.role !== "teacher") return null;
		return { assignmentId: id, studentId: selectedStudentId() };
	});
	const [teacherReviewData, { refetch: refetchTeacherReviewData }] = createResource(
		teacherSource,
		({ assignmentId, studentId }) => getTeacherAssignmentReviewPageData(assignmentId, studentId),
	);
	const reviewData = createMemo(() => teacherReviewData() ?? teacherReviewData.latest ?? null);

	createEffect(() => {
		const data = reviewData();
		if (!data) return;
		if (data.reviewQueue.length === 0) {
			if (selectedStudentId() !== null) setSelectedStudentId(null);
			return;
		}
		const current = selectedStudentId();
		const exists = current !== null && data.reviewQueue.some((item) => item.studentId === current);
		if (!exists) {
			setSelectedStudentId(data.reviewQueue[0]!.studentId);
		}
	});

	return (
		<main class={styles.page}>
			<div class={styles.shell}>
				<Show
					when={reviewData()}
					fallback={
						<section class={styles.emptyState}>
							<p class={styles.emptyEyebrow}>Loading assignment</p>
							<h1>Pulling the latest review data from the backend.</h1>
							<p>Preparing the teacher review queue and student answers for this assignment.</p>
						</section>
					}
				>
					<Switch>
						<Match when={reviewData()}>
							<AssignmentTeacherReview
								data={reviewData()!}
								onSelectStudent={(studentId) => setSelectedStudentId(studentId)}
								onRefresh={() => refetchTeacherReviewData()}
							/>
						</Match>
						<Match when={true}>
							<section class={styles.emptyState}>
								<p class={styles.emptyEyebrow}>Assignment not found</p>
								<h1>We could not find that assignment.</h1>
								<p>Try a seeded assignment like 3007, or jump back to the dashboard.</p>
								<A href={getDashboardHomeHref("teacher")} class={styles.backButton}>
									Back to dashboard
								</A>
							</section>
						</Match>
					</Switch>
				</Show>
			</div>
		</main>
	);
};

export default TeacherAssignmentPage;
