Pending course, rest ready for launch

components/courses/StudentClassroomClient.tsx

@@ -3,16 +3,21 @@
 import { useEffect, useMemo, useState, useTransition } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { Check, Lock, PlayCircle } from "lucide-react";
-import { toggleLessonComplete } from "@/app/(protected)/courses/[slug]/learn/actions";
+import { Check, CircleDashed, ClipboardCheck, FileText, Lock, PlayCircle } from "lucide-react";
+import { toggleLessonComplete } from "@/app/(public)/courses/[slug]/learn/actions";
 import ProgressBar from "@/components/ProgressBar";
+import { getLessonContentTypeLabel, isFinalExam, type LessonContentType } from "@/lib/courses/lessonContent";
 
 type ClassroomLesson = {
   id: string;
   title: string;
   description: string;
+  contentType: LessonContentType;
+  materialUrl: string | null;
   videoUrl: string | null;
+  youtubeUrl: string | null;
   estimatedDuration: number;
+  isFreePreview: boolean;
 };
 
 type ClassroomModule = {
@@ -27,19 +32,44 @@ type StudentClassroomClientProps = {
   modules: ClassroomModule[];
   initialSelectedLessonId: string;
   initialCompletedLessonIds: string[];
+  isEnrolled: boolean;
 };
 
+type CompletionCertificate = {
+  certificateId: string;
+  certificateNumber: string | null;
+};
+
+function getYouTubeEmbedUrl(url: string | null | undefined): string | null {
+  if (!url?.trim()) return null;
+  const trimmed = url.trim();
+  const watchMatch = trimmed.match(/(?:youtube\.com\/watch\?v=)([a-zA-Z0-9_-]+)/);
+  if (watchMatch) return `https://www.youtube.com/embed/${watchMatch[1]}`;
+  const embedMatch = trimmed.match(/(?:youtube\.com\/embed\/)([a-zA-Z0-9_-]+)/);
+  if (embedMatch) return trimmed;
+  const shortMatch = trimmed.match(/(?:youtu\.be\/)([a-zA-Z0-9_-]+)/);
+  if (shortMatch) return `https://www.youtube.com/embed/${shortMatch[1]}`;
+  return null;
+}
+
+function getIsPdfUrl(url: string | null | undefined): boolean {
+  if (!url) return false;
+  return /\.pdf(?:$|\?)/i.test(url.trim());
+}
+
 export default function StudentClassroomClient({
   courseSlug,
   courseTitle,
   modules,
   initialSelectedLessonId,
   initialCompletedLessonIds,
+  isEnrolled,
 }: StudentClassroomClientProps) {
   const router = useRouter();
   const [isSaving, startTransition] = useTransition();
   const [selectedLessonId, setSelectedLessonId] = useState(initialSelectedLessonId);
   const [completedLessonIds, setCompletedLessonIds] = useState(initialCompletedLessonIds);
+  const [completionCertificate, setCompletionCertificate] = useState<CompletionCertificate | null>(null);
 
   useEffect(() => {
     setSelectedLessonId(initialSelectedLessonId);
@@ -59,7 +89,10 @@ export default function StudentClassroomClient({
   const selectedLesson =
     flatLessons.find((lesson) => lesson.id === selectedLessonId) ?? flatLessons[0] ?? null;
 
+  const selectedLessonTypeLabel = selectedLesson ? getLessonContentTypeLabel(selectedLesson.contentType) : "";
+
   const isRestricted = (lessonId: string) => {
+    if (!isEnrolled) return false; // Non-enrolled can click any lesson (preview shows content, locked shows premium message)
     const lessonIndex = flatLessons.findIndex((lesson) => lesson.id === lessonId);
     if (lessonIndex <= 0) return false;
     if (completedSet.has(lessonId)) return false;
@@ -67,6 +100,8 @@ export default function StudentClassroomClient({
     return !completedSet.has(previousLesson.id);
   };
 
+  const isLockedForUser = (lesson: ClassroomLesson) => !isEnrolled && !lesson.isFreePreview;
+
   const navigateToLesson = (lessonId: string) => {
     if (isRestricted(lessonId)) return;
     setSelectedLessonId(lessonId);
@@ -100,6 +135,13 @@ export default function StudentClassroomClient({
         return prev.filter((id) => id !== lessonId);
       });
 
+      if (result.newlyIssuedCertificate && result.certificateId) {
+        setCompletionCertificate({
+          certificateId: result.certificateId,
+          certificateNumber: result.certificateNumber ?? null,
+        });
+      }
+
       router.refresh();
     });
   };
@@ -114,30 +156,155 @@ export default function StudentClassroomClient({
   }
 
   return (
-    <div className="grid gap-6 lg:grid-cols-[1.7fr_1fr]">
+    <div className="relative grid gap-6 lg:grid-cols-[1.7fr_1fr]">
+      {completionCertificate ? (
+        <>
+          <div className="pointer-events-none fixed inset-0 z-40 overflow-hidden">
+            {Array.from({ length: 36 }).map((_, index) => (
+              <span
+                key={`confetti-${index}`}
+                className="absolute top-[-24px] h-3 w-2 rounded-sm opacity-90"
+                style={{
+                  left: `${(index * 2.7) % 100}%`,
+                  backgroundColor: ["#0ea5e9", "#22c55e", "#f59e0b", "#a855f7", "#ef4444"][index % 5],
+                  animation: `acve-confetti-fall ${2.2 + (index % 5) * 0.35}s linear ${index * 0.04}s 1`,
+                }}
+              />
+            ))}
+          </div>
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/55 p-4">
+            <div className="w-full max-w-lg rounded-2xl border border-slate-200 bg-white p-6 shadow-2xl">
+              <p className="text-xs font-semibold uppercase tracking-wide text-emerald-600">Course completed</p>
+              <h2 className="mt-2 text-3xl font-semibold text-slate-900">Congratulations</h2>
+              <p className="mt-2 text-sm text-slate-600">
+                You completed all lessons in this course and your ACVE certificate was issued.
+              </p>
+              <p className="mt-3 rounded-lg bg-slate-50 px-3 py-2 text-sm text-slate-700">
+                Certificate: {completionCertificate.certificateNumber ?? "Issued"}
+              </p>
+              <div className="mt-5 flex flex-wrap gap-2">
+                <a
+                  className="acve-button-primary inline-flex px-4 py-2 text-sm font-semibold"
+                  href={`/api/certificates/${completionCertificate.certificateId}/pdf`}
+                >
+                  Download PDF
+                </a>
+                <Link
+                  className="rounded-md border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50"
+                  href="/profile"
+                >
+                  Open Profile
+                </Link>
+                <button
+                  type="button"
+                  onClick={() => setCompletionCertificate(null)}
+                  className="rounded-md border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50"
+                >
+                  Close
+                </button>
+              </div>
+            </div>
+          </div>
+          <style jsx global>{`
+            @keyframes acve-confetti-fall {
+              0% {
+                transform: translateY(-24px) rotate(0deg);
+              }
+              100% {
+                transform: translateY(110vh) rotate(540deg);
+              }
+            }
+          `}</style>
+        </>
+      ) : null}
       <section className="space-y-4 rounded-xl border border-slate-200 bg-white p-5">
         <Link href={`/courses/${courseSlug}`} className="text-sm font-medium text-slate-600 hover:text-slate-900">
           {"<-"} Back to Course
         </Link>
 
-        <div className="aspect-video overflow-hidden rounded-xl border border-slate-200 bg-black">
-          {selectedLesson.videoUrl ? (
-            <video
-              key={`${selectedLesson.id}-${selectedLesson.videoUrl}`}
-              className="h-full w-full"
-              controls
-              onEnded={handleToggleComplete}
-              src={selectedLesson.videoUrl}
-            />
+        <div
+          className={`overflow-hidden rounded-xl border border-slate-200 ${
+            selectedLesson.contentType === "VIDEO" ? "aspect-video bg-black" : "bg-slate-50 p-5"
+          }`}
+        >
+          {isLockedForUser(selectedLesson) ? (
+            <div className="flex h-full min-h-[220px] flex-col items-center justify-center gap-4 bg-slate-900 p-6 text-center">
+              <p className="text-lg font-medium text-white">Contenido premium</p>
+              <p className="max-w-sm text-sm text-slate-300">
+                Inscríbete en el curso para desbloquear todas las secciones y registrar tu avance.
+              </p>
+              <Link
+                href={`/courses/${courseSlug}`}
+                className="rounded-md bg-white px-4 py-2 text-sm font-medium text-slate-900 hover:bg-slate-100"
+              >
+                Ver curso e inscripción
+              </Link>
+            </div>
+          ) : selectedLesson.contentType === "VIDEO" ? (
+            getYouTubeEmbedUrl(selectedLesson.youtubeUrl) ? (
+              <iframe
+                key={`${selectedLesson.id}-${selectedLesson.youtubeUrl}`}
+                className="h-full w-full"
+                src={getYouTubeEmbedUrl(selectedLesson.youtubeUrl)!}
+                title={selectedLesson.title}
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+              />
+            ) : selectedLesson.videoUrl ? (
+              <video
+                key={`${selectedLesson.id}-${selectedLesson.videoUrl}`}
+                className="h-full w-full"
+                controls
+                onEnded={handleToggleComplete}
+                src={selectedLesson.videoUrl}
+              />
+            ) : (
+              <div className="flex h-full items-center justify-center text-sm text-slate-300">Video not available for this lesson</div>
+            )
           ) : (
-            <div className="flex h-full items-center justify-center text-sm text-slate-300">
-              Video not available for this lesson
+            <div className="space-y-4">
+              <p className="inline-flex rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-700">
+                {selectedLessonTypeLabel}
+              </p>
+              {selectedLesson.description ? (
+                <p className="text-sm leading-relaxed text-slate-700">{selectedLesson.description}</p>
+              ) : (
+                <p className="text-sm text-slate-600">Este contenido no tiene descripción adicional.</p>
+              )}
+
+              {selectedLesson.materialUrl ? (
+                getIsPdfUrl(selectedLesson.materialUrl) ? (
+                  <iframe
+                    className="h-[430px] w-full rounded-lg border border-slate-200 bg-white"
+                    src={selectedLesson.materialUrl}
+                    title={`${selectedLesson.title} material`}
+                  />
+                ) : (
+                  <a
+                    className="inline-flex rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-800 hover:bg-slate-100"
+                    href={selectedLesson.materialUrl}
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    Abrir material
+                  </a>
+                )
+              ) : null}
+
+              {isFinalExam(selectedLesson.contentType) ? (
+                <div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
+                  Debes completar esta evaluación final para graduarte y emitir el certificado del curso.
+                </div>
+              ) : null}
             </div>
           )}
         </div>
 
         <div className="space-y-2 rounded-xl border border-slate-200 bg-white p-4">
           <h1 className="text-2xl font-semibold text-slate-900">{selectedLesson.title}</h1>
+          <p className="inline-flex w-fit rounded-full border border-slate-300 bg-slate-50 px-2.5 py-0.5 text-xs font-semibold text-slate-700">
+            {selectedLessonTypeLabel}
+          </p>
           {selectedLesson.description ? (
             <p className="text-sm text-slate-600">{selectedLesson.description}</p>
           ) : null}
@@ -146,24 +313,27 @@ export default function StudentClassroomClient({
           </p>
         </div>
 
-        <button
-          type="button"
-          onClick={handleToggleComplete}
-          disabled={isSaving}
-          className="rounded-md border border-slate-300 bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-60"
-        >
-          {completedSet.has(selectedLesson.id) ? "Mark as Incomplete" : "Mark as Complete"}
-        </button>
+        {isEnrolled && (
+          <button
+            type="button"
+            onClick={handleToggleComplete}
+            disabled={isSaving}
+            className="rounded-md border border-slate-300 bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-60"
+          >
+            {completedSet.has(selectedLesson.id)
+              ? "Marcar como pendiente"
+              : isFinalExam(selectedLesson.contentType)
+                ? "Marcar evaluación final como completada"
+                : "Marcar como completada"}
+          </button>
+        )}
       </section>
 
       <aside className="rounded-xl border border-slate-200 bg-white p-4">
-        <h2 className="mb-3 text-lg font-semibold text-slate-900">Course Content</h2>
+        <h2 className="mb-3 text-lg font-semibold text-slate-900">Contenido del curso</h2>
         <p className="mb-3 text-xs text-slate-500">{courseTitle}</p>
         <div className="mb-4">
-          <ProgressBar
-            value={progressPercent}
-            label={`${completedCount}/${totalLessons} lessons (${progressPercent}%)`}
-          />
+          <ProgressBar value={progressPercent} label={`${completedCount}/${totalLessons} lecciones (${progressPercent}%)`} />
         </div>
 
         <div className="max-h-[70vh] space-y-4 overflow-y-auto pr-1">
@@ -171,7 +341,7 @@ export default function StudentClassroomClient({
             <div key={module.id} className="rounded-xl border border-slate-200 bg-slate-50/40">
               <div className="border-b border-slate-200 px-3 py-2">
                 <p className="text-sm font-semibold text-slate-800">
-                  Module {moduleIndex + 1}: {module.title}
+                  Módulo {moduleIndex + 1}: {module.title}
                 </p>
               </div>
 
@@ -179,6 +349,7 @@ export default function StudentClassroomClient({
                 {module.lessons.map((lesson, lessonIndex) => {
                   const completed = completedSet.has(lesson.id);
                   const restricted = isRestricted(lesson.id);
+                  const locked = isLockedForUser(lesson);
                   const active = lesson.id === selectedLesson.id;
 
                   return (
@@ -193,17 +364,36 @@ export default function StudentClassroomClient({
                           : "border-transparent bg-white/70 text-slate-700 hover:border-slate-200"
                       } ${restricted ? "cursor-not-allowed opacity-60 hover:border-transparent" : ""}`}
                     >
-                      <span className="inline-flex h-5 w-5 items-center justify-center">
+                      <span className="inline-flex h-5 w-5 shrink-0 items-center justify-center">
                         {completed ? (
                           <Check className="h-4 w-4 text-emerald-600" />
-                        ) : restricted ? (
+                        ) : restricted || locked ? (
                           <Lock className="h-4 w-4 text-slate-400" />
+                        ) : lesson.contentType === "LECTURE" ? (
+                          <FileText className="h-4 w-4 text-slate-500" />
+                        ) : lesson.contentType === "ACTIVITY" ? (
+                          <CircleDashed className="h-4 w-4 text-slate-500" />
+                        ) : lesson.contentType === "QUIZ" || lesson.contentType === "FINAL_EXAM" ? (
+                          <ClipboardCheck className="h-4 w-4 text-slate-500" />
                         ) : (
                           <PlayCircle className="h-4 w-4 text-slate-500" />
                         )}
                       </span>
-                      <span className="line-clamp-1">
+                      <span className="min-w-0 flex-1 line-clamp-1">
                         {lessonIndex + 1}. {lesson.title}
+                        <span className="ml-1.5 inline rounded bg-slate-100 px-1.5 py-0.5 text-[11px] font-medium text-slate-700">
+                          {getLessonContentTypeLabel(lesson.contentType)}
+                        </span>
+                        {lesson.isFreePreview && (
+                          <span className="ml-1.5 inline rounded bg-emerald-100 px-1.5 py-0.5 text-xs font-medium text-emerald-800">
+                            Vista previa
+                          </span>
+                        )}
+                        {isFinalExam(lesson.contentType) && (
+                          <span className="ml-1.5 inline rounded bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-800">
+                            Obligatoria
+                          </span>
+                        )}
                       </span>
                     </button>
                   );