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

import { useCourses } from "@/contexts/AdminCoursesContext";
import { PageMeta } from "@/contexts/MetadataContext";
import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
import { Spinner } from "@/components/ui/spinner";
import ArchivedUnitsTable from "../../../components/courses/ArchivedUnitsTable";
import { Badge } from "@/components/ui/badge";

export default function ArchivedUnitsList() {
    const navigate = useNavigate();
    const { courseId } = useParams();
    const { fetchCourse, course, loading } = useCourses();
    const [initializing, setInitializing] = useState(true);

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

    const items = [
        { label: "Home", icon: <House className="size-4" />, to: "/admin" },
        { label: "Courses", to: "/admin/courses" },
        { label: course?.title ?? "...", to: `/admin/courses/${courseId}/units` },
        { label: "Archived" }
    ];

    // Replace the loading check
    if (initializing) {
        return (
            <div className="flex items-center justify-center h-64">
                <Spinner className="h-6 w-6" />
            </div>
        );
    }

    return (
        <section className="bg-muted/60 h-full">
            <PageMeta title={course ? `Archived Units – ${course.title} - STARR` : undefined} />
            <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
                <div className="flex flex-col gap-2 my-6">
                    <AppBreadcrumb items={items} />
                </div>

                <div className="w-full space-y-6">


                    {/* ── Units ── */}
                    <ArchivedUnitsTable courseId={courseId} />

                </div>
            </div>
        </section>
    );
}