Pending course, rest ready for launch

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

@@ -1,184 +1,169 @@
-import Link from "next/link";
 import { notFound } from "next/navigation";
-import { db } from "@/lib/prisma";
 import { requireUser } from "@/lib/auth/requireUser";
+import CourseDetailHeader from "@/components/courses/CourseDetailHeader";
+import CourseProgressCard from "@/components/courses/CourseProgressCard";
+import ProgramContentList from "@/components/courses/ProgramContentList";
+import { getCourseDetailViewModel } from "@/lib/courses/publicCourses";
 
-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;
-};
+export const dynamic = "force-dynamic";
 
 type PageProps = {
   params: Promise<{ slug: string }>;
 };
 
+type DetailActionState = {
+  primaryAction: {
+    label: string;
+    href?: string;
+    disabled?: boolean;
+  };
+  secondaryAction?: {
+    label: string;
+    href?: string;
+    disabled?: boolean;
+  };
+  helperText?: string;
+};
+
+function buildActionState(args: {
+  slug: string;
+  isAuthenticated: boolean;
+  isEnrolled: boolean;
+  availabilityState: "published" | "upcoming" | "draft";
+  progressPercent: number;
+  firstPreviewLessonId: string | null;
+  price: number;
+}): DetailActionState {
+  const learnUrl = `/courses/${args.slug}/learn`;
+  const loginUrl = `/auth/login?redirectTo=${encodeURIComponent(`/courses/${args.slug}`)}`;
+  const previewUrl = args.firstPreviewLessonId ? `${learnUrl}?lesson=${args.firstPreviewLessonId}` : undefined;
+
+  if (args.availabilityState !== "published") {
+    return {
+      primaryAction: {
+        label: "Próximamente",
+        disabled: true,
+      },
+      helperText: "Este programa se encuentra en preparación editorial y estará habilitado en próximas publicaciones.",
+    };
+  }
+
+  if (args.isAuthenticated && args.isEnrolled) {
+    const label = args.progressPercent >= 100 ? "Revisar programa" : args.progressPercent > 0 ? "Continuar" : "Comenzar";
+    return {
+      primaryAction: {
+        label,
+        href: learnUrl,
+      },
+      helperText:
+        args.progressPercent > 0
+          ? "Tu avance se conserva automáticamente. Puedes continuar desde la lección más reciente."
+          : "Inicia el recorrido académico desde el primer módulo.",
+    };
+  }
+
+  if (args.isAuthenticated) {
+    if (args.price <= 0) {
+      return {
+        primaryAction: {
+          label: "Comenzar",
+          href: learnUrl,
+        },
+        helperText: "Programa con acceso abierto para iniciar de inmediato.",
+      };
+    }
+
+    if (previewUrl) {
+      return {
+        primaryAction: {
+          label: "Ver clase de muestra",
+          href: previewUrl,
+        },
+        helperText: "El contenido completo está disponible para estudiantes inscritos en el programa.",
+      };
+    }
+
+    return {
+      primaryAction: {
+        label: "Inscripción próximamente",
+        disabled: true,
+      },
+      helperText: "La inscripción completa para este programa estará disponible en breve.",
+    };
+  }
+
+  if (previewUrl) {
+    return {
+      primaryAction: {
+        label: "Ver clase de muestra",
+        href: previewUrl,
+      },
+      secondaryAction: {
+        label: "Iniciar sesión",
+        href: loginUrl,
+      },
+      helperText: "Puedes revisar una vista previa o iniciar sesión para gestionar tu itinerario académico.",
+    };
+  }
+
+  return {
+    primaryAction: {
+      label: "Iniciar sesión para comenzar",
+      href: loginUrl,
+    },
+    helperText: "Accede con tu cuenta para comenzar este programa y registrar tu progreso.",
+  };
+}
+
 export default async function CourseDetailPage({ params }: PageProps) {
   const { slug } = await params;
+  const user = await requireUser().catch(() => null);
 
-  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 } },
-    },
-  });
-
+  const course = await getCourseDetailViewModel(slug, user?.id ?? null);
   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",
-  ];
+  const actions = buildActionState({
+    slug: course.slug,
+    isAuthenticated: Boolean(user?.id),
+    isEnrolled: course.isEnrolled,
+    availabilityState: course.availabilityState,
+    progressPercent: course.progressPercent,
+    firstPreviewLessonId: course.firstPreviewLessonId,
+    price: course.price,
+  });
 
   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>
+      <section className="grid items-start gap-5 xl:grid-cols-[1.55fr_0.95fr]">
+        <CourseDetailHeader
+          availabilityLabel={course.availabilityLabel}
+          availabilityState={course.availabilityState}
+          description={course.longDescription}
+          durationLabel={course.durationLabel}
+          instructor={course.instructor}
+          lessonCount={course.lessonCount}
+          proficiencyLabel={course.proficiencyLabel}
+          stageLabel={course.stage.levelLabel}
+          studentsCount={course.studentsCount}
+          thumbnailUrl={course.thumbnailUrl}
+          title={course.title}
+        />
 
-            <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>
+        <CourseProgressCard
+          availabilityLabel={course.availabilityLabel}
+          completedLessons={course.completedLessons}
+          durationLabel={course.durationLabel}
+          helperText={actions.helperText}
+          instructor={course.instructor}
+          primaryAction={actions.primaryAction}
+          progressPercent={course.progressPercent}
+          secondaryAction={actions.secondaryAction}
+          stageLabel={course.stage.levelLabel}
+          totalLessons={course.totalLessons}
+        />
       </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>
+      <ProgramContentList modules={course.modules} />
     </div>
   );
 }