ACVE/app/(public)/courses/[slug]/page.tsx

import Link from "next/link";
import { notFound } from "next/navigation";
import { db } from "@/lib/prisma";
import { requireUser } from "@/lib/auth/requireUser";

function getText(value: unknown): string {
  if (!value) return "";
  if (typeof value === "string") return value;
  if (typeof value === "object") {
    const record = value as Record<string, unknown>;
    if (typeof record.en === "string") return record.en;
    if (typeof record.es === "string") return record.es;
  }
  return "";
}

const levelLabel = (level: string) => {
  if (level === "BEGINNER") return "Beginner";
  if (level === "INTERMEDIATE") return "Intermediate";
  if (level === "ADVANCED") return "Advanced";
  return level;
};

type PageProps = {
  params: Promise<{ slug: string }>;
};

export default async function CourseDetailPage({ params }: PageProps) {
  const { slug } = await params;

  const course = await db.course.findFirst({
    where: { slug, status: "PUBLISHED" },
    include: {
      author: { select: { fullName: true } },
      modules: {
        orderBy: { orderIndex: "asc" },
        include: {
          lessons: {
            orderBy: { orderIndex: "asc" },
            select: { id: true, title: true, estimatedDuration: true },
          },
        },
      },
      _count: { select: { enrollments: true } },
    },
  });

  if (!course) notFound();

  const user = await requireUser();
  const isAuthed = Boolean(user?.id);

  const title = getText(course.title) || "Untitled course";
  const summary = getText(course.description) || "";

  const lessons = course.modules.flatMap((m) =>
    m.lessons.map((l) => ({
      id: l.id,
      title: getText(l.title) || "Untitled lesson",
      minutes: Math.ceil((l.estimatedDuration ?? 0) / 60),
    })),
  );
  const lessonsCount = lessons.length;

  const redirect = `/courses/${course.slug}/learn`;
  const loginUrl = `/auth/login?redirectTo=${encodeURIComponent(redirect)}`;

  const learningOutcomes = [
    "Understand key legal vocabulary in context",
    "Apply contract and case analysis patterns",
    "Improve professional written legal communication",
  ];

  return (
    <div className="acve-page">
      <section className="acve-panel overflow-hidden p-0">
        <div className="grid gap-0 lg:grid-cols-[1.6fr_0.9fr]">
          <div className="acve-section-base">
            <Link className="inline-flex items-center gap-2 text-base text-slate-600 hover:text-brand" href="/courses">
              <span>{"<-"}</span>
              Back to Courses
            </Link>

            <div className="mt-4 flex flex-wrap items-center gap-2 text-sm text-slate-600">
              <span className="rounded-full bg-accent px-3 py-1 font-semibold text-white">
                {levelLabel(course.level)}
              </span>
              <span className="rounded-full border border-slate-300 bg-white px-3 py-1 font-semibold">
                {course.status.toLowerCase()}
              </span>
              <span className="rounded-full border border-slate-300 bg-white px-3 py-1">
                {lessonsCount} lessons
              </span>
            </div>

            <h1 className="mt-4 text-4xl font-semibold leading-tight text-[#1f2a3a] md:text-5xl">{title}</h1>
            <p className="mt-3 max-w-3xl text-base leading-relaxed text-slate-600 md:text-lg">{summary}</p>

            <div className="mt-5 grid gap-3 sm:grid-cols-3">
              <div className="rounded-xl border border-slate-200 bg-white p-3">
                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Students</p>
                <p className="mt-1 text-2xl font-semibold text-slate-900">
                  {course._count.enrollments.toLocaleString()}
                </p>
              </div>
              <div className="rounded-xl border border-slate-200 bg-white p-3">
                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Lessons</p>
                <p className="mt-1 text-2xl font-semibold text-slate-900">{lessonsCount}</p>
              </div>
              <div className="rounded-xl border border-slate-200 bg-white p-3">
                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Instructor</p>
                <p className="mt-1 text-lg font-semibold text-slate-900">
                  {course.author.fullName || "ACVE Team"}
                </p>
              </div>
            </div>
          </div>

          <aside className="border-t border-slate-200 bg-slate-50/80 p-6 lg:border-l lg:border-t-0">
            <h2 className="text-sm font-semibold uppercase tracking-wide text-slate-500">What you will learn</h2>
            <ul className="mt-3 space-y-2">
              {learningOutcomes.map((item) => (
                <li key={item} className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700">
                  {item}
                </li>
              ))}
            </ul>
          </aside>
        </div>
      </section>

      <section className="grid gap-5 lg:grid-cols-[1.6fr_0.85fr]">
        <article className="acve-panel acve-section-base">
          <h2 className="text-2xl font-semibold text-slate-900">Course structure preview</h2>
          <div className="mt-4 grid gap-2">
            {lessons.slice(0, 5).map((lesson, index) => (
              <div
                key={lesson.id}
                className="flex items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm"
              >
                <span className="font-medium text-slate-800">
                  Lesson {index + 1}: {lesson.title}
                </span>
                <span className="text-slate-500">{lesson.minutes} min</span>
              </div>
            ))}
            {lessons.length === 0 && (
              <p className="rounded-lg border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-500">
                No lessons yet. Check back soon.
              </p>
            )}
          </div>
        </article>

        <aside className="acve-panel space-y-5 p-6">
          <h2 className="text-2xl text-slate-700 md:text-4xl">Course details</h2>
          <div className="border-t border-slate-200 pt-5 text-lg text-slate-700 md:text-3xl">
            <p className="mb-1 text-base text-slate-500 md:text-2xl">Instructor</p>
            <p className="mb-4 font-semibold text-slate-800">{course.author.fullName || "ACVE Team"}</p>
            <p className="mb-1 text-base text-slate-500 md:text-2xl">Level</p>
            <p className="mb-4 font-semibold text-slate-800">{levelLabel(course.level)}</p>
            <p className="mb-1 text-base text-slate-500 md:text-2xl">Lessons</p>
            <p className="font-semibold text-slate-800">{lessonsCount}</p>
          </div>
          {isAuthed ? (
            <Link
              className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105"
              href={redirect}
            >
              Start Course
            </Link>
          ) : (
            <Link
              className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105"
              href={loginUrl}
            >
              Login to start
            </Link>
          )}
        </aside>
      </section>
    </div>
  );
}