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

"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import LessonRow from "@/components/LessonRow";
import ProgressBar from "@/components/ProgressBar";
import { getCourseBySlug } from "@/lib/data/courseCatalog";
import {
  getCourseProgress,
  getCourseProgressPercent,
  markLessonComplete,
  setLastLesson,
} from "@/lib/progress/localProgress";
import { teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
import { supabaseBrowser } from "@/lib/supabase/browser";
import type { Course, Lesson } from "@/types/course";

const lessonContent = (lesson: Lesson) => {
  if (lesson.type === "video") {
    return (
      <div className="space-y-3">
        <div className="aspect-video rounded-2xl border border-slate-300 bg-[#f6f6f7] p-4">
          <div className="flex h-full items-center justify-center rounded-xl border-2 border-dashed border-slate-300 text-lg text-slate-500">
            Video placeholder ({lesson.minutes} min)
          </div>
        </div>
        {lesson.videoUrl ? (
          <p className="text-sm text-slate-500">
            Demo video URL: <span className="font-medium text-slate-700">{lesson.videoUrl}</span>
          </p>
        ) : null}
      </div>
    );
  }

  if (lesson.type === "reading") {
    return (
      <div className="rounded-2xl border border-slate-300 bg-white p-5">
        <p className="text-lg leading-9 text-slate-700">
          Reading placeholder content for lesson: {lesson.title}. Replace with full lesson text and references in Phase 2.
        </p>
      </div>
    );
  }

  return (
    <div className="rounded-2xl border border-slate-300 bg-white p-5">
      <p className="text-lg text-slate-700">Interactive placeholder for lesson: {lesson.title}.</p>
      <button className="acve-button-secondary mt-3 px-3 py-1.5 text-sm" type="button">
        Start interactive
      </button>
    </div>
  );
};

export default function CourseLearnPage() {
  const params = useParams<{ slug: string }>();
  const slug = params.slug;
  const [course, setCourse] = useState<Course | undefined>(() => getCourseBySlug(slug));
  const [hasResolvedCourse, setHasResolvedCourse] = useState(false);

  const [userId, setUserId] = useState("guest");
  const [isAuthed, setIsAuthed] = useState(false);
  const [selectedLessonId, setSelectedLessonId] = useState<string | null>(null);
  const [completedLessonIds, setCompletedLessonIds] = useState<string[]>([]);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const loadCourse = () => {
      setCourse(getCourseBySlug(slug));
      setHasResolvedCourse(true);
    };
    loadCourse();
    window.addEventListener(teacherCoursesUpdatedEventName, loadCourse);
    return () => window.removeEventListener(teacherCoursesUpdatedEventName, loadCourse);
  }, [slug]);

  useEffect(() => {
    const client = supabaseBrowser();
    if (!client) return;

    client.auth.getUser().then(({ data }) => {
      setUserId(data.user?.id ?? "guest");
      setIsAuthed(Boolean(data.user));
    });

    const { data } = client.auth.onAuthStateChange((_event, session) => {
      setUserId(session?.user?.id ?? "guest");
      setIsAuthed(Boolean(session?.user));
    });

    return () => data.subscription.unsubscribe();
  }, []);

  useEffect(() => {
    if (!course) return;

    const progressState = getCourseProgress(userId, course.slug);
    const fallback = course.lessons[0]?.id ?? null;
    setSelectedLessonId(progressState.lastLessonId ?? fallback);
    setCompletedLessonIds(progressState.completedLessonIds);
    setProgress(getCourseProgressPercent(userId, course.slug, course.lessons.length));
  }, [course, userId]);

  const completionSet = new Set(completedLessonIds);

  if (!course && !hasResolvedCourse) {
    return (
      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <p className="text-slate-600">Loading course...</p>
      </div>
    );
  }

  if (!course) {
    return (
      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <h1 className="text-2xl font-bold text-slate-900">Course not found</h1>
        <p className="mt-2 text-slate-600">The requested course slug does not exist in mock data.</p>
        <Link className="mt-4 inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href="/courses">
          Back to courses
        </Link>
      </div>
    );
  }

  const selectedLesson =
    course.lessons.find((lesson) => lesson.id === selectedLessonId) ?? course.lessons[0];

  if (!selectedLesson) {
    return (
      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <h1 className="text-2xl font-bold text-slate-900">No lessons available</h1>
        <p className="mt-2 text-slate-600">This course currently has no lessons configured.</p>
        <Link className="mt-4 inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href={`/courses/${course.slug}`}>
          Back to course
        </Link>
      </div>
    );
  }

  const isLocked = (lesson: Lesson) => !lesson.isPreview && !isAuthed;

  const onSelectLesson = (lesson: Lesson) => {
    if (isLocked(lesson)) return;
    setSelectedLessonId(lesson.id);
    setLastLesson(userId, course.slug, lesson.id);
  };

  const onMarkComplete = () => {
    if (!selectedLesson) return;
    markLessonComplete(userId, course.slug, selectedLesson.id);
    const progressState = getCourseProgress(userId, course.slug);
    setCompletedLessonIds(progressState.completedLessonIds);
    setProgress(getCourseProgressPercent(userId, course.slug, course.lessons.length));
  };

  return (
    <div className="space-y-6">
      <header className="acve-panel p-6">
        <div className="flex flex-wrap items-center justify-between gap-4">
          <div>
            <Link className="inline-flex items-center gap-2 text-base text-slate-600 hover:text-brand md:text-xl" href={`/courses/${course.slug}`}>
              <span className="text-base">{"<-"}</span>
              Back to Course
            </Link>
            <h1 className="mt-2 text-3xl text-[#222b39] md:text-5xl">Course Content</h1>
          </div>
          <div className="min-w-[240px]">
            <ProgressBar value={progress} label={`${progress}% complete`} />
          </div>
        </div>
      </header>

      <section className="space-y-3">
        {course.lessons.map((lesson, index) => (
          <div key={lesson.id} className="space-y-1">
            <LessonRow
              index={index}
              isActive={lesson.id === selectedLesson?.id}
              isLocked={isLocked(lesson)}
              lesson={lesson}
              onSelect={() => onSelectLesson(lesson)}
            />
            {completionSet.has(lesson.id) ? (
              <p className="pl-2 text-sm font-medium text-[#2f9d73]">Completed</p>
            ) : null}
          </div>
        ))}
      </section>

      <section className="acve-panel space-y-4 p-6">
        <div className="flex items-start justify-between gap-4">
          <div>
            <h2 className="text-2xl text-[#222b39] md:text-4xl">{selectedLesson.title}</h2>
            <p className="mt-1 text-base text-slate-600">
              {selectedLesson.type} | {selectedLesson.minutes} min
            </p>
          </div>
          <button
            className="acve-button-primary px-4 py-2 text-sm font-semibold hover:brightness-105"
            onClick={onMarkComplete}
            type="button"
          >
            Mark complete
          </button>
        </div>

        {lessonContent(selectedLesson)}
      </section>
    </div>
  );
}