'use client';

import Image from "next/image";
import { useRouter } from "next/navigation";

type Lesson = {
	id: string;
	title: string;
	durationMin: number;
	progressPct: number; // 0~100
	isCompleted: boolean;
};

type Course = {
	id: string;
	title: string;
	description: string;
	thumbnail: string;
	status: "전체" | "수강 예정" | "수강중" | "수강 완료";
	progressPct: number;
	lessons: Lesson[];
};

function ProgressBar({ value }: { value: number }) {
	const pct = Math.max(0, Math.min(100, value));
	return (
		<div className="relative h-1.5 w-full overflow-hidden rounded-full bg-bg-primary-light">
			<div
				className="h-full rounded-full bg-primary transition-[width] duration-300 ease-out"
				style={{ width: `${pct}%` }}
			/>
		</div>
	);
}

export default function CourseCard({ course }: { course: Course }) {
	const router = useRouter();

	const totalMinutes = course.lessons.reduce((sum, l) => sum + (l.durationMin || 0), 0);
	const totalHours = Math.floor(totalMinutes / 60);
	const restMinutes = totalMinutes % 60;

	const handleClick = () => {
		router.push(`/menu/courses/${course.id}`);
	};

	return (
		<article className="rounded-xl bg-white shadow-[0_2px_8px_rgba(0,0,0,0.02)] border border-bg-primary-light">
			<header 
				onClick={handleClick}
				className="flex items-center gap-6 px-8 py-6 cursor-pointer hover:bg-bg-gray-light/50 transition-colors"
			>
				<div className="relative h-[120px] w-[180px] overflow-hidden rounded-[8px] bg-bg-gray-light">
					<Image
						src={course.thumbnail || `https://picsum.photos/seed/${encodeURIComponent(course.id)}/240/152`}
						alt=""
						fill
						sizes="180px"
						unoptimized
						className="object-cover"
					/>
				</div>
				<div className="min-w-0 flex-1">
					<div className="flex items-center gap-2">
						<span className="flex h-[20px] items-center justify-center rounded-[4px] bg-bg-success-light px-[4px] text-[13px] font-semibold leading-[1.4] text-success">
							{course.status}
						</span>
						<h2 className="truncate text-[18px] font-semibold leading-normal text-neutral-700">
							{course.title}
						</h2>
					</div>
					<p className="mt-1 line-clamp-2 text-[14px] leading-normal text-basic-text">{course.description}</p>
					<div className="mt-2 flex items-center justify-between gap-3">
						<p className="text-[13px] leading-[1.4] text-text-meta">
							VOD · 총 {course.lessons.length}강 · {totalHours}시간 {restMinutes}분
						</p>
						<p className="text-[13px] font-semibold leading-[1.4] text-primary">
							전체 진도율: {course.progressPct}%
						</p>
					</div>
					<div className="mt-2">
						<ProgressBar value={course.progressPct} />
					</div>
				</div>
			</header>
		</article>
	);
}


