// Path: Frontend/src/components/assignment/work/student-assignment-work.sections.tsx

import { A } from "@solidjs/router";
import type { Component } from "solid-js";
import { createSignal, For, Show } from "solid-js";
import { assignmentUiCopy } from "~/content/ui-copy";
import type { AssignmentWorkPageData, AssignmentWorkQuestion } from "./assignment-work.data";
import styles from "./assignment-work.module.scss";

export type DraftState = Record<
	number,
	{
		answer: string;
		steps: string;
		solveMode: "just_answer" | "step_by_step" | "solve_together" | "handwritten";
	}
>;

export const solveModeOptions = [
	{ value: "just_answer", label: assignmentUiCopy.studentWork.solveModes.justAnswer },
	{ value: "step_by_step", label: assignmentUiCopy.studentWork.solveModes.stepByStep },
	{ value: "solve_together", label: assignmentUiCopy.studentWork.solveModes.solveTogether },
	{ value: "handwritten", label: assignmentUiCopy.studentWork.solveModes.handwritten },
] as const;

type AssignmentWorkBannerProps = {
	data: AssignmentWorkPageData;
	answeredCount: number;
	isSubmitted: boolean;
	reviewHref: string;
};

export const AssignmentWorkBanner: Component<AssignmentWorkBannerProps> = (props) => (
	<Show when={props.isSubmitted}>
		<section class={styles.submitBanner}>
			<div>
				<p class={styles.bannerEyebrow}>{assignmentUiCopy.studentWork.banner.eyebrow}</p>
				<h2>
					You answered {props.answeredCount} of {props.data.questions.length} questions.
				</h2>
				<p>Your latest answers are synced. You can review the assignment or keep refining any answer.</p>
			</div>
			<A href={props.reviewHref} class={styles.bannerLink}>
				{assignmentUiCopy.studentWork.banner.link}
			</A>
		</section>
	</Show>
);

type AssignmentWorkHeaderProps = {
	data: AssignmentWorkPageData;
	answeredCount: number;
	remainingCount: number;
	saveLabel: string;
	reviewHref: string;
	isSubmitting: boolean;
	onSubmit: () => void;
};

export const AssignmentWorkHeader: Component<AssignmentWorkHeaderProps> = (props) => (
	<section class={styles.headerCard}>
		<div class={styles.headerTop}>
			<A href={props.reviewHref} class={styles.backLink}>
				{assignmentUiCopy.studentWork.header.backToReview}
			</A>
			<span class={styles.statusPill}>{props.data.statusLabel}</span>
		</div>

		<div class={styles.headerCopy}>
			<p class={styles.eyebrow}>{props.data.classroomName}</p>
			<h1>{assignmentUiCopy.studentWork.header.titlePrefix} {props.data.title}</h1>
			<p>Answer each question, show your working, and save each answer back to the live assignment as you go.</p>
		</div>

		<div class={styles.headerMeta}>
			<p class={styles.saveState}>{props.saveLabel}</p>
			<div class={styles.submitMeta}>
				<button type="button" class={styles.submitButton} onClick={props.onSubmit} disabled={props.isSubmitting}>
					{props.isSubmitting ? assignmentUiCopy.studentWork.header.submitting : props.remainingCount > 0 ? `Submit ${props.answeredCount}/${props.data.questions.length}` : assignmentUiCopy.studentWork.header.submitAssignment}
				</button>
				<Show when={props.isSubmitting}>
					<p class={styles.submitHint}>{assignmentUiCopy.studentWork.header.submitHint}</p>
				</Show>
			</div>
		</div>
	</section>
);

type AssignmentWorkNavigatorProps = {
	questions: AssignmentWorkQuestion[];
	drafts: DraftState;
	activeQuestionId: number | null;
	answeredCount: number;
	remainingCount: number;
	saveLabel: string;
	isSubmitting: boolean;
	onSelectQuestion: (questionId: number) => void;
};

export const AssignmentWorkNavigator: Component<AssignmentWorkNavigatorProps> = (props) => {
	const [isExpanded, setIsExpanded] = createSignal(false);

	return (
		<aside class={styles.navigator}>
			<div class={styles.navigatorHeader}>
				<div>
					<h2>{assignmentUiCopy.studentWork.navigator.title}</h2>
					<p>
						{props.answeredCount} of {props.questions.length} {assignmentUiCopy.studentWork.navigator.answeredSuffix}
					</p>
				</div>
				<button
					type="button"
					class={styles.navigatorToggle}
					aria-expanded={isExpanded()}
					onClick={() => setIsExpanded((value) => !value)}
				>
					{isExpanded() ? "Hide list" : "Open list"}
				</button>
			</div>

			<div classList={{ [styles.navigatorContent]: true, [styles.navigatorContentExpanded]: isExpanded() }}>
				<div class={styles.progressMeta}>
					<span>{props.remainingCount} {assignmentUiCopy.studentWork.navigator.remainingSuffix}</span>
					<span>{props.saveLabel}</span>
				</div>

				<div class={styles.questionButtons}>
					<For each={props.questions}>
						{(question) => {
							const hasDraft = () => (props.drafts[question.id]?.answer ?? "").trim().length > 0;

							return (
								<button
									type="button"
									classList={{
										[styles.questionButton]: true,
										[styles.activeQuestion]: props.activeQuestionId === question.id,
										[styles.completedQuestion]: hasDraft(),
									}}
									disabled={props.isSubmitting}
									onClick={() => {
										props.onSelectQuestion(question.id);
										setIsExpanded(false);
									}}
								>
									<span>Q{question.order}</span>
									<small>{hasDraft() ? assignmentUiCopy.studentWork.navigator.draftReady : question.statusLabel}</small>
								</button>
							);
						}}
					</For>
				</div>
			</div>
		</aside>
	);
};

type AssignmentWorkWorkspaceProps = {
	question: AssignmentWorkQuestion;
	draft: DraftState[number];
	saveLabel: string;
	submittedAt: string | null;
	isLastQuestion: boolean;
	isSubmitting: boolean;
	onUpdateDraft: (field: "answer" | "steps" | "solveMode", value: string) => void;
	onMoveQuestion: (direction: 1 | -1) => void;
	onSaveDraft: () => void;
	onSaveAndContinue: () => void;
};

export const AssignmentWorkWorkspace: Component<AssignmentWorkWorkspaceProps> = (props) => (
	<section class={styles.workspace}>
		<div class={styles.workspaceHeader}>
			<div>
				<p class={styles.questionEyebrow}>{assignmentUiCopy.studentWork.workspace.questionPrefix} {props.question.order}</p>
				<h2>{props.question.prompt}</h2>
				<p class={styles.questionStatus}>{props.question.statusLabel}</p>
			</div>
			<div class={styles.questionMeta}>
				<span>{props.question.topic}</span>
				<Show when={props.question.subTopic}>
					<span>{props.question.subTopic}</span>
				</Show>
				<span>{props.question.difficulty}</span>
			</div>
		</div>

		<label class={styles.fieldGroup}>
			<span>{assignmentUiCopy.studentWork.workspace.solveMode}</span>
			<select value={props.draft.solveMode} disabled={props.isSubmitting} onInput={(event) => props.onUpdateDraft("solveMode", event.currentTarget.value)}>
				<For each={solveModeOptions}>{(option) => <option value={option.value}>{option.label}</option>}</For>
			</select>
			<small class={styles.fieldHint}>{assignmentUiCopy.studentWork.workspace.solveModeHint}</small>
		</label>

		<label class={styles.fieldGroup}>
			<span>{assignmentUiCopy.studentWork.workspace.yourAnswer}</span>
			<input type="text" value={props.draft.answer} disabled={props.isSubmitting} onInput={(event) => props.onUpdateDraft("answer", event.currentTarget.value)} placeholder={assignmentUiCopy.studentWork.workspace.answerPlaceholder} />
			<small class={styles.fieldHint}>Keep this short — your final number, fraction, or expression.</small>
		</label>

		<label class={styles.fieldGroup}>
			<span>{assignmentUiCopy.studentWork.workspace.workingSteps}</span>
			<textarea
				rows={8}
				value={props.draft.steps}
				disabled={props.isSubmitting}
				onInput={(event) => props.onUpdateDraft("steps", event.currentTarget.value)}
				placeholder={assignmentUiCopy.studentWork.workspace.stepsPlaceholder}
			/>
			<small class={styles.fieldHint}>Show enough working that you could explain it back to your teacher later.</small>
		</label>

		<div class={styles.helperCard}>
			<p class={styles.helperEyebrow}>{assignmentUiCopy.studentWork.workspace.helperEyebrow}</p>
			<p>Try to explain why each step makes sense, not just what number you wrote next.</p>
			<Show when={props.question.showAnswerKey}>
				<div class={styles.answerReveal}>
					<span>{assignmentUiCopy.studentWork.workspace.answerKey}</span>
					<strong>{props.question.correctAnswer}</strong>
				</div>
			</Show>
		</div>

		<div class={styles.actionRow}>
			<button type="button" class={styles.secondaryButton} onClick={() => props.onMoveQuestion(-1)} disabled={props.isSubmitting}>
				{assignmentUiCopy.studentWork.workspace.previous}
			</button>
			<div class={styles.primaryActions}>
				<button type="button" class={styles.secondaryButton} onClick={props.onSaveDraft} disabled={props.isSubmitting}>
					{assignmentUiCopy.studentWork.workspace.saveDraft}
				</button>
				<button type="button" class={styles.primaryButton} onClick={props.onSaveAndContinue} disabled={props.isSubmitting}>
					{props.isLastQuestion ? assignmentUiCopy.studentWork.workspace.saveThisQuestion : assignmentUiCopy.studentWork.workspace.saveAndContinue}
				</button>
			</div>
		</div>

		<div class={styles.questionFooter}>
			<p>{props.saveLabel}</p>
			<Show when={props.submittedAt}>
				<p>{assignmentUiCopy.studentWork.workspace.lastSubmittedPrefix} {new Intl.DateTimeFormat("en-GB", { hour: "numeric", minute: "2-digit" }).format(new Date(props.submittedAt!))}</p>
			</Show>
		</div>
	</section>
);
