import type { Component } from "solid-js";
import { A } from "@solidjs/router";
import { For, Show } from "solid-js";
import { getAssignmentReviewHref, getTeacherAssignmentNextStepHref } from "../../../lib/routes";
import type { TeacherRedoPlanData } from "./assignment-teacher-review.types";
import styles from "./assignment-teacher-review.module.scss";

type RedoPlanMainColumnProps = {
	data: TeacherRedoPlanData;
};

export const RedoPlanMainColumn: Component<RedoPlanMainColumnProps> = (props) => (
	<div class={styles.mainColumn}>
		<section class={styles.section}>
			<div class={styles.sectionHeader}>
				<h2>Redo plan</h2>
				<p>
					AI prepared this redo plan for {props.data.selectedStudentName} based on the completed review, weakness summary, and teacher feedback.
				</p>
			</div>

			<Show when={props.data.error}>
				<div class={`${styles.notice} ${styles.noticeError}`.trim()}>{props.data.error}</div>
			</Show>

			<Show
				when={props.data.plan}
				fallback={<div class={styles.emptyState}>No redo plan is available yet. Save the next-step page with <strong>Redo assignment</strong> selected to generate one.</div>}
			>
				<section class={styles.nextStepCard}>
					<div class={styles.sectionHeader}>
						<h3>Rationale</h3>
						<p>Why this student needs the planned mix of follow-up practice.</p>
					</div>
					<div class={styles.responseBlock}>
						<strong>{props.data.plan!.rationale}</strong>
					</div>
				</section>

				<section class={styles.section}>
					<div class={styles.sectionHeader}>
						<h3>Planned question set</h3>
						<p>These blueprint slices will be turned into a student-specific redo assignment when you generate it.</p>
					</div>
					<div class={styles.planList}>
						<For each={props.data.plan!.questionSet}>
							{(item, index) => (
								<article class={styles.planCard}>
									<div class={styles.questionTop}>
										<div>
											<p class={styles.order}>Item {index() + 1}</p>
											<h3>{item.topic}</h3>
										</div>
										<span class={`${styles.statusPill} ${styles.progress}`.trim()}>{item.difficulty}</span>
									</div>
									<Show when={item.tags.length > 0}>
										<div class={styles.tagList}>
											<For each={item.tags}>{(tag) => <span class={styles.tagPill}>{tag}</span>}</For>
										</div>
									</Show>
									<div class={styles.supportBlock}>
										<p>Reason</p>
										<span>{item.reason}</span>
									</div>
								</article>
							)}
						</For>
					</div>
				</section>
			</Show>
		</section>
	</div>
);

type RedoPlanSidebarProps = {
	data: TeacherRedoPlanData;
	isCreatingRedoAssignment: boolean;
	generationError: string | null;
	generationSuccess: string | null;
	onGenerateRedoQuestions: () => void;
};

export const RedoPlanSidebar: Component<RedoPlanSidebarProps> = (props) => (
	<aside class={styles.sideColumn}>
		<section class={styles.sideCard}>
			<p class={styles.sideEyebrow}>Student</p>
			<h2>{props.data.selectedStudentName}</h2>
			<p>{props.data.selectedStudentEmail}</p>
			<div class={styles.progressNote}>Generated for {props.data.title}</div>
			<Show when={props.data.generatedAtLabel}>
				<div class={styles.draftHint}>Generated {props.data.generatedAtLabel}</div>
			</Show>
			<Show when={props.data.plan?.questionSet.length}>
				<button type="button" class={styles.primaryAction} onClick={props.onGenerateRedoQuestions} disabled={props.isCreatingRedoAssignment}>
					{props.isCreatingRedoAssignment ? "Creating redo assignment…" : "Generate redo questions"}
				</button>
				<p class={styles.progressNote}>This creates and assigns an independent redo assignment for {props.data.selectedStudentName} only.</p>
			</Show>
			<Show when={props.generationError}>
				<div class={`${styles.notice} ${styles.noticeError}`.trim()}>{props.generationError}</div>
			</Show>
			<Show when={props.generationSuccess}>
				<div class={`${styles.notice} ${styles.noticeSuccess}`.trim()}>{props.generationSuccess}</div>
			</Show>
			<div class={styles.actionRow}>
				<A href={getTeacherAssignmentNextStepHref(props.data.assignmentId, props.data.selectedStudentId)} class={styles.secondaryAction}>
					Back to next step
				</A>
				<A href={getAssignmentReviewHref("teacher", props.data.assignmentId)} class={styles.secondaryAction}>
					Back to review
				</A>
			</div>
		</section>

		<section class={styles.sideCard}>
			<div class={styles.sectionHeader}>
				<h3>Teacher feedback</h3>
				<p>The feedback context used when this redo plan was created.</p>
			</div>
			<div class={styles.supportBlock}>
				<span>{props.data.teacherFeedback || "No teacher feedback saved yet."}</span>
			</div>
		</section>

		<section class={styles.sideCard}>
			<div class={styles.sectionHeader}>
				<h3>Topic scores</h3>
				<p>Historical performance snapshot used to plan the redo.</p>
			</div>
			<Show
				when={props.data.weaknessSummary.topicScores.length > 0}
				fallback={<div class={styles.emptyState}>No topic history is available yet for this student.</div>}
			>
				<div class={styles.scoreList}>
					<For each={props.data.weaknessSummary.topicScores}>
						{(item) => (
							<div class={styles.scoreRow}>
								<span>{item.topic}</span>
								<strong>{item.score.toFixed(1)}%</strong>
							</div>
						)}
					</For>
				</div>
			</Show>
		</section>

		<section class={styles.sideCard}>
			<div class={styles.sectionHeader}>
				<h3>Weak tags</h3>
				<p>Low-performing or flagged tags from previous work.</p>
			</div>
			<Show
				when={props.data.weaknessSummary.weakTags.length > 0}
				fallback={<div class={styles.emptyState}>No weak tags were identified from the current review history.</div>}
			>
				<div class={styles.tagList}>
					<For each={props.data.weaknessSummary.weakTags}>{(tag) => <span class={styles.tagPill}>{tag}</span>}</For>
				</div>
			</Show>
		</section>

		<section class={styles.sideCard}>
			<div class={styles.sectionHeader}>
				<h3>Recent issues</h3>
				<p>Recent issue reasons pulled into the weakness summary.</p>
			</div>
			<Show
				when={props.data.weaknessSummary.recentIssues.length > 0}
				fallback={<div class={styles.emptyState}>No recent issue reasons were available.</div>}
			>
				<ul class={styles.noteList}>
					<For each={props.data.weaknessSummary.recentIssues}>{(issue) => <li>{issue}</li>}</For>
				</ul>
			</Show>
		</section>
	</aside>
);
