import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { ArrowLeft } from "lucide-react";

import { useCourses } from "@/contexts/AdminCoursesContext";
import { PageMeta } from "@/contexts/MetadataContext";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import { PreviewContent, PreviewChrome } from "../../../components/courses/LessonsPreview";

export default function ViewLessonPage() {
  const navigate = useNavigate();
  const { courseId, unitId, lessonId } = useParams();

  // Junction revamp — runs course-scoped AND from the standalone Lesson Library.
  const builderPath = unitId
    ? `/admin/courses/${courseId}/units/${unitId}/lessons/${lessonId}/page`
    : `/admin/lessons/${lessonId}/page`;
  const { fetchLesson, lesson, lessonPage } = useCourses();
  const [initializing, setInitializing] = useState(true);

  useEffect(() => {
    (async () => {
      await fetchLesson(courseId, unitId, lessonId);
      setInitializing(false);
    })();
  }, [courseId, unitId, lessonId]);

  const blocks = lessonPage?.blocks ?? [];

  return (
    <div className="flex flex-col min-h-screen bg-muted/60">
      <PageMeta title={lesson ? `${lesson.title} – Page - STARR` : undefined} />

      {/* Sticky header */}
      <div
        className="sticky z-20 shrink-0 border-b bg-white/70 dark:bg-zinc-900/70 backdrop-blur-md"
        style={{ top: "var(--navbar-h)" }}
      >
        <div className="lg:container lg:mx-auto lg:px-6 px-4">
          <div className="flex items-center gap-3 py-3">
            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
              <ArrowLeft className="h-4 w-4" />
            </Button>
            <div className="flex-1 min-w-0">
              <h1 className="text-xl font-semibold leading-tight">Page Preview</h1>
              <p className="text-sm text-muted-foreground truncate">{lesson?.title}</p>
            </div>
            <Button
              type="button"
              onClick={() => navigate(builderPath)}
            >
              Edit Page
            </Button>
          </div>
        </div>
      </div>

      {/* Content */}
      <div className="lg:container lg:mx-auto lg:px-6 px-4 py-8">
        <div className="max-w-6xl mx-auto">
          <PreviewChrome title={lesson?.title}>
            <div className="p-8 space-y-6 min-h-[400px]">
              {initializing ? (
                <div className="flex items-center justify-center py-20">
                  <Spinner className="h-6 w-6" />
                </div>
              ) : (
                <>
                  <PreviewContent
                    lesson={lesson}
                    blocks={blocks}
                    empty="No content blocks yet."
                  />
                  {blocks.length === 0 && (
                    <div className="flex justify-center pt-2">
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={() => navigate(builderPath)}
                      >
                        Go to Page Builder
                      </Button>
                    </div>
                  )}
                </>
              )}
            </div>
          </PreviewChrome>
        </div>
      </div>

    </div>
  );
}