// Path: Frontend/src/components/assignment/shared/assignment-overview.tsx

import { A } from "@solidjs/router";
import type { Component } from "solid-js";
import { For } from "solid-js";
import styles from "./assignment-overview.module.scss";
import type { AssignmentPageData } from "./assignment-types";

type Props = {
	data: AssignmentPageData;
};

const AssignmentOverview: Component<Props> = (props) => {
	return (
		<div class={styles.stack}>
			<section class={styles.panel}>
				<div class={styles.cardHeader}>
					<h2>Assignment overview</h2>
					<p>{props.data.studentName}</p>
				</div>

				<div class={styles.statGrid}>
					<For each={props.data.stats}>
						{(stat) => (
							<div class={styles.statCard}>
								<span>{stat.label}</span>
								<strong>{stat.value}</strong>
							</div>
						)}
					</For>
				</div>
			</section>

			<section class={styles.panel}>
				<div class={styles.cardHeader}>
					<h2>{props.data.coachCard.title}</h2>
					<p>{props.data.tutorName}</p>
				</div>

				<p class={styles.coachCopy}>{props.data.coachCard.description}</p>

				<ul class={styles.tipList}>
					<For each={props.data.coachCard.items}>{(item) => <li>{item}</li>}</For>
				</ul>

				<A href={props.data.primaryHref} class={styles.primaryButton}>
					{props.data.primaryAction}
				</A>
			</section>

			{(props.data.assignmentAiFeedback || props.data.assignmentTeacherFeedback) && (
				<section class={styles.panel}>
					<div class={styles.cardHeader}>
						<h2>Shared assignment feedback</h2>
						<p>{props.data.tutorName}</p>
					</div>

					{props.data.assignmentAiFeedback && (
						<div class={styles.feedbackBlock}>
							<p class={styles.feedbackLabel}>AI feedback</p>
							<p class={styles.feedbackCopy}>{props.data.assignmentAiFeedback}</p>
						</div>
					)}

					{props.data.assignmentTeacherFeedback && (
						<div class={styles.feedbackBlock}>
							<p class={styles.feedbackLabel}>Teacher feedback</p>
							<p class={styles.feedbackCopy}>{props.data.assignmentTeacherFeedback}</p>
						</div>
					)}
				</section>
			)}
		</div>
	);
};

export default AssignmentOverview;
