'use client';

import Image from "next/image";

type Lesson = {
	id: string;
	title: string;
	duration: string; // "12:46" 형식
	state: "제출완료" | "제출대기";
	action: "복습하기" | "이어서 수강하기" | "수강하기";
};

type CourseDetail = {
	id: string;
	status: "수강 중" | "수강 예정" | "수강 완료";
	title: string;
	goal: string;
	method: string;
	summary: string; // VOD · 총 n강 · n시간 n분
	submitSummary: string; // 학습 제출 n/n
	thumbnail: string;
	lessons: Lesson[];
};

const MOCK_DETAIL: CourseDetail = {
	id: "c1",
	status: "수강 중",
	title: "원자로 운전 및 계통",
	goal:
		"원자로 운전 원리와 주요 계통의 구조 및 기능을 이해하고, 실제 운전 상황을 가상 환경에서 체험하여 문제 해결 능력을 기른다.",
	method:
		"강좌 동영상을 통해 이론을 학습한 후, XR 실습을 통해 원자로 운전 및 계통 제어 과정을 체험한다. 이후 문제 풀이를 통해 학습 내용을 점검하며 평가를 받아 학습 성취도를 확인한다.",
	summary: "VOD · 총 6강 · 4시간 20분",
	submitSummary: "학습 제출 3/6",
	thumbnail: "https://picsum.photos/seed/course-detail/584/318",
	lessons: [
		{ id: "l1", title: "1. 원자로 기초 및 핵분열 원리", duration: "12:46", state: "제출완료", action: "복습하기" },
		{ id: "l2", title: "2. 제어봉 및 원자로 출력 제어", duration: "18:23", state: "제출완료", action: "복습하기" },
		{ id: "l3", title: "3. 터빈-발전기 계통 및 전력 생산", duration: "13:47", state: "제출완료", action: "복습하기" },
		{ id: "l4", title: "4. 보조 계통 및 안전 계통", duration: "13:47", state: "제출대기", action: "복습하기" },
		{ id: "l5", title: "5. 원자로 냉각재 계통 (RCS) 및 열수력", duration: "08:11", state: "제출대기", action: "이어서 수강하기" },
		{ id: "l6", title: "6. 원자로 시동, 운전 및 정지 절차", duration: "13:47", state: "제출대기", action: "수강하기" },
	],
};

export default function CourseDetailPage() {
	const c = MOCK_DETAIL;
	return (
		<main className="flex w-full flex-col">
			<div className="flex h-[100px] items-center px-8">
				<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">교육 과정 상세보기</h1>
			</div>

			<section className="px-8 pb-20">
				<div className="rounded-[8px] bg-white px-8 pb-20 pt-6">
					{/* 상단 소개 카드 */}
					<div className="flex gap-6 rounded-[8px] bg-[#f8f9fa] p-6">
						<div className="relative h-[159px] w-[292px] overflow-hidden rounded">
							<Image src={c.thumbnail} alt="" fill sizes="292px" className="object-cover" unoptimized />
						</div>
						<div className="flex-1">
							<div className="flex h-[27px] items-center gap-2">
								<span className="h-[20px] rounded-[4px] bg-[#e5f5ec] px-1.5 text-[13px] font-semibold leading-[1.4] text-[#0c9d61]">
									{c.status}
								</span>
								<h2 className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">{c.title}</h2>
							</div>
							<div className="mt-3 space-y-1">
								<p className="text-[15px] leading-[1.5] text-[#333c47]">
									<span className="font-medium">학습 목표:</span> {c.goal}
								</p>
								<p className="text-[15px] leading-[1.5] text-[#333c47]">
									<span className="font-medium">학습 방법:</span> {c.method}
								</p>
							</div>
							<div className="mt-3 flex items-center gap-5 text-[13px] leading-[1.4] text-[#8c95a1]">
								<span>{c.summary}</span>
								<span>{c.submitSummary}</span>
							</div>
						</div>
					</div>

					{/* 차시 리스트 */}
					<div className="mt-6 space-y-2">
						{c.lessons.map((l) => {
							const isSubmitted = l.state === "제출완료";
							const submitBtnStyle =
								l.state === "제출완료"
									? "border border-transparent text-[#384fbf]"
									: "border " + (l.action === "이어서 수강하기" || l.action === "수강하기" ? "border-[#b1b8c0]" : "border-[#8c95a1]");
							const rightBtnStyle =
								l.action === "이어서 수강하기"
									? "bg-[#ecf0ff] text-[#384fbf]"
									: l.action === "수강하기"
									? "bg-[#ecf0ff] text-[#384fbf]"
									: "bg-[#f1f3f5] text-[#4c5561]";
							return (
								<div key={l.id} className="rounded-[8px] border border-[#dee1e6] bg-white">
									<div className="flex items-center justify-between gap-4 rounded-[8px] px-6 py-4">
										<div className="min-w-0">
											<p className="text-[16px] font-semibold leading-[1.5] text-[#333c47]">{l.title}</p>
											<div className="mt-1 flex items-center gap-3">
												<p className="w-[40px] text-[13px] leading-[1.4] text-[#8c95a1]">{l.duration}</p>
											</div>
										</div>
										<div className="flex items-center gap-2">
											<button
												type="button"
												className={[
													"h-8 rounded-[6px] px-4 text-[14px] font-medium leading-[1.5]",
													"bg-white",
													submitBtnStyle,
												].join(" ")}
											>
												{isSubmitted ? "학습 제출 완료" : "학습 제출 하기"}
											</button>
											<button
												type="button"
												className={[
													"h-8 rounded-[6px] px-4 text-[14px] font-medium leading-[1.5]",
													rightBtnStyle,
												].join(" ")}
											>
												{l.action}
											</button>
										</div>
									</div>
								</div>
							);
						})}
					</div>
				</div>
			</section>
		</main>
	);
}


