import Image from "next/image";
import { notFound, redirect } from "next/navigation";
import { hasCourseAccess, hasPaidRegistration } from "@/lib/access";
import { getCurrentUser } from "@/lib/auth";
import { getCourse } from "@/lib/courses";
import { db } from "@/lib/db";
import { COURSE_PRICE_GHS } from "@/lib/pricing";
import { PayBox } from "@/components/PayBox";

export default async function CoursePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const course = getCourse(slug);
  if (!course) notFound();
  const user = await getCurrentUser();
  if (!user) redirect(`/login?next=/courses/${slug}`);
  if (!hasPaidRegistration(user)) redirect("/pay");

  if (!(await hasCourseAccess(user, slug))) {
    return (
      <div className="mx-auto max-w-lg px-4 py-16">
        <p className="text-xs uppercase tracking-widest text-terra">{course.short}</p>
        <h1 className="font-display mt-2 text-3xl text-forest">{course.title}</h1>
        <p className="mt-3 text-forest/75">
          Your 3-day window has ended. Unlock this blueprint for ₵{COURSE_PRICE_GHS} to keep the levels,
          worksheets, and tutor.
        </p>
        <div className="mt-8">
          <PayBox kind="course" course={course.slug} title={course.title} locked={false} />
        </div>
      </div>
    );
  }

  const quizzes = db
    .prepare("SELECT level_id, passed FROM quiz_attempts WHERE user_id = ? AND course_slug = ?")
    .all(user.id, slug) as { level_id: string; passed: number }[];
  const passed = new Set(quizzes.filter((q) => q.passed).map((q) => q.level_id));

  return (
    <div>
      <section className="relative h-64 md:h-80">
        <Image src={course.image} alt="" fill className="object-cover" priority />
        <div className="absolute inset-0 bg-gradient-to-t from-forest via-forest/50 to-forest/20" />
        <div className="absolute bottom-0 left-0 right-0 mx-auto max-w-6xl px-4 pb-8">
          <p className="text-xs uppercase tracking-[0.28em] text-gold-2">{course.short}</p>
          <h1 className="font-display mt-2 text-4xl text-cream md:text-5xl">{course.title}</h1>
          <p className="mt-2 max-w-2xl text-cream/80">{course.tagline}</p>
        </div>
      </section>
      <div className="mx-auto max-w-6xl px-4 py-10">
        <div className="grid gap-8 md:grid-cols-3">
          <p className="md:col-span-2 text-forest/80">{course.summary}</p>
          <div className="rounded-2xl bg-cream p-5 text-sm">
            <p>
              <strong>For:</strong> {course.who}
            </p>
            <p className="mt-2">
              <strong>You leave with:</strong> {course.outcome}
            </p>
          </div>
        </div>
        <ol className="mt-10 space-y-4">
          {course.levels.map((level, i) => {
            const prev = course.levels[i - 1];
            const locked = Boolean(prev && !passed.has(prev.id));
            return (
              <li key={level.id}>
                <a
                  href={locked ? "#" : `/courses/${course.slug}/${level.id}`}
                  className={`block rounded-2xl border border-forest/10 bg-cream p-5 ${locked ? "opacity-55" : "card-lift"}`}
                >
                  <div className="flex items-start justify-between gap-4">
                    <div>
                      <p className="text-xs uppercase tracking-widest text-terra">
                        {locked ? "Locked · pass previous quiz" : `Open · ${level.duration}`}
                      </p>
                      <h2 className="font-display mt-1 text-2xl text-forest">{level.title}</h2>
                      <p className="mt-1 text-sm text-forest/70">{level.goal}</p>
                    </div>
                    {passed.has(level.id) ? (
                      <span className="rounded-full bg-forest px-3 py-1 text-xs text-gold-2">Passed</span>
                    ) : null}
                  </div>
                </a>
              </li>
            );
          })}
        </ol>
      </div>
    </div>
  );
}