import { A } from "@solidjs/router";
import { For, Show, type Component } from "solid-js";
import { getDashboardTeacherClassroomHref } from "../../../lib/routes";
import type { TeacherDashboardHomeData } from "./dashboard-teacher-home.data";
import styles from "./dashboard-teacher-classrooms.module.scss";

type DashboardTeacherClassroomsProps = {
	data: TeacherDashboardHomeData;
};

const DashboardTeacherClassrooms: Component<DashboardTeacherClassroomsProps> = (props) => {
	return (
		<section class={styles.page}>
			<article class={styles.heroCard}>
				<div class={styles.heroCopy}>
					<p class={styles.eyebrow}>Classrooms</p>
					<h1>Keep each class organised without crowding the home dashboard</h1>
					<p>{props.data.classrooms.description}</p>
				</div>

				<div class={styles.heroStats}>
					<div class={styles.statCard}>
						<span>Classrooms</span>
						<strong>{props.data.classrooms.items.length}</strong>
					</div>
					<div class={styles.statCard}>
						<span>Students</span>
						<strong>{props.data.overview.stats.find((stat) => stat.label === "Students")?.value ?? "0"}</strong>
					</div>
				</div>
			</article>

			<Show when={props.data.classrooms.items.length} fallback={<section class={styles.emptyState}>No classrooms are connected to this teacher yet.</section>}>
				<div class={styles.grid}>
					<For each={props.data.classrooms.items}>
						{(item) => (
							<article class={styles.classroomCard}>
								<div class={styles.cardHeader}>
									<div>
										<h2>{item.name}</h2>
										<p>{item.note}</p>
									</div>
									<span class={styles.codePill}>{item.codeLabel}</span>
								</div>

								<div class={styles.metaRow}>
									<span>{item.studentCountLabel}</span>
									<span>{item.assignmentCountLabel}</span>
									<span>{item.liveLabel}</span>
								</div>

								<div class={styles.reviewRow}>
									<strong>{item.reviewLabel}</strong>
									<A href={getDashboardTeacherClassroomHref(item.id)} class={styles.manageLink}>
										Open classroom
									</A>
								</div>
							</article>
						)}
					</For>
				</div>
			</Show>
		</section>
	);
};

export default DashboardTeacherClassrooms;
