import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
import { useDateFormat } from "@/hooks/useDateFormat";
import { useParams, useNavigate } from "react-router-dom";
import api from "@/utils/api.util";
import {
    House, Timer, Layers, GitBranch, Medal, CircleStar, LockIcon,
    SendHorizonal, CheckCheck, CheckCircle2, Clock, FileQuestion, ClipboardList,
    Hourglass, Check,
} from "lucide-react";
import { cn } from "@/lib/utils";
import CourseBadge from "@/modules/admin/components/courses/CourseBadge";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { motion, AnimatePresence } from "framer-motion";
import { useRef, useEffect, useState } from "react";
import { useScrollTrigger } from "../hooks/ScrollTrigger";
import {
    Accordion, AccordionContent, AccordionItem, AccordionTrigger,
} from "@/components/ui/accordion";
import {
    Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription,
} from "@/components/ui/dialog";
import { useClientCourses } from "@/contexts/ClientCoursesContext";
import { useClientTiers } from "@/contexts/ClientTiersProvider";
import { useCourseReadingProgress } from "@/contexts/ClientCourseReadingProgressContext";
import { PageMeta } from "@/contexts/MetadataContext";
import { toast } from "sonner";
import { resolveTierBadge } from "@/utils/tierBadge.util";
import { useClientAdvertisements } from "@/contexts/ClientAdvertisementContext";
import { Banner, BannerSkeleton } from "@/components/generic/Blocks/Client/Advertisements/Banner";
import { Sidebar, SidebarSkeleton } from "@/components/generic/Blocks/Client/Advertisements/Sidebar";
import { Tags } from "lucide-react";

// ─── Helpers ──────────────────────────────────────────────────────────────────

function formatDuration(seconds = 0) {
    if (!seconds) return null;
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    if (h > 0) return `${h}hr ${m}min`;
    return `${m}min`;
}


// ─── Spine / card helpers ──────────────────────────────────────────────────────

const useVisibleNodes = (refs, count) => {
    const [visible, setVisible] = useState(new Set());
    useEffect(() => {
        setVisible(new Set());
        const observers = [];
        const id = setTimeout(() => {
            refs.current.forEach((el, i) => {
                if (!el) return;
                const obs = new IntersectionObserver(
                    ([entry]) => {
                        setVisible((prev) => {
                            const next = new Set(prev);
                            if (entry.isIntersecting) next.add(i);
                            return next;
                        });
                    },
                    { threshold: 0.2 }
                );
                obs.observe(el);
                observers.push(obs);
            });
        }, 50);
        return () => { clearTimeout(id); observers.forEach((o) => o.disconnect()); };
    }, [count]);
    return visible;
};

// ─── Unit Accordion Block ─────────────────────────────────────────────────────

const UnitAccordionBlock = ({ unit, unitIndex, i, cardRefs, courseId, onToggle, isCompleted }) => {
    const navigate = useNavigate();
    const quiz = unit.quiz ?? null;

    return (
        <motion.div
            ref={(el) => (cardRefs.current[i] = el)}
            className="group rounded-xl border bg-card hover:bg-blue-400/10 hover:shadow-md hover:border-blue-400 transition-all"
            initial={{ opacity: 0, y: 14 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.35, delay: i * 0.05, ease: "easeOut" }}
        >
            <Accordion
                type="single"
                collapsible
                defaultValue={`unit-${unit.unit_id}`}
                onValueChange={() => setTimeout(onToggle, 250)}
            >
                <AccordionItem value={`unit-${unit.unit_id}`} className="border-none">
                    <AccordionTrigger className="px-4 py-4 hover:no-underline">
                        <div className="flex flex-col items-start gap-3 w-full">
                            <div className="flex items-center justify-between w-full">
                                <span className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
                                    Unit {unitIndex + 1}
                                </span>
                            </div>
                            <h1 className="text-2xl font-bold text-card-foreground group-hover:text-blue-600 dark:group-hover:text-blue-400">
                                {unit.title}
                            </h1>
                            <div className="[&_svg]:size-4 text-md text-muted-foreground flex items-center gap-4">
                                {unit.lessons?.length > 0 && (
                                    <div className="flex items-center gap-1.5">
                                        <Layers /> {unit.lessons.length} {unit.lessons.length === 1 ? "Lesson" : "Lessons"}
                                    </div>
                                )}
                                {unit.duration_seconds > 0 && (
                                    <div className="flex items-center gap-1.5">
                                        <Timer /> {formatDuration(unit.duration_seconds)}
                                    </div>
                                )}
                                {quiz && (
                                    <div className="flex items-center gap-1.5">
                                        <FileQuestion /> Quiz
                                    </div>
                                )}
                            </div>
                        </div>
                    </AccordionTrigger>
                    <AccordionContent className="px-1.5 h-full">
                        <div className="flex flex-col gap-1 pt-0">
                            {(unit.lessons ?? []).map((lesson) => (
                                <div
                                    key={lesson.lesson_id}
                                    className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-slate-200 dark:hover:bg-blue-500 transition-colors cursor-pointer"
                                    onClick={() => navigate(`/course/${courseId}/unit`, { state: { lessonId: lesson.lesson_id, unitId: unit.unit_id } })}
                                >
                                    <div className="flex items-center gap-3 select-none min-w-0">
                                        {isCompleted(lesson.uuid)
                                            ? <CheckCircle2 className="size-4 text-emerald-500 shrink-0" />
                                            : <div className="w-4 h-4 rounded-full border border-muted-foreground/40 flex items-center justify-center flex-shrink-0" />
                                        }
                                        <span className="text-md text-card-foreground truncate">{lesson.title}</span>
                                    </div>
                                    {lesson.duration_seconds > 0 && (
                                        <span className="text-sm shrink-0 ml-2">{formatDuration(lesson.duration_seconds)}</span>
                                    )}
                                </div>
                            ))}

                            {/* Quiz row — shown after lessons if unit has a quiz */}
                            {quiz && (
                                <div
                                    className="flex items-center justify-between py-2 px-3 mt-1 rounded-lg border border-dashed border-blue-300 dark:border-blue-700 bg-blue-50/60 dark:bg-blue-950/30 hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors cursor-pointer"
                                    onClick={() => navigate(`/course/${courseId}/unit`, { state: { quizUnitId: unit.unit_id } })}
                                >
                                    <div className="flex items-center gap-3 select-none min-w-0">
                                        {quiz.has_passed
                                            ? <CheckCircle2 className="size-4 text-emerald-500 shrink-0" />
                                            : <FileQuestion className="size-4 text-blue-500 shrink-0" />
                                        }
                                        <span className="text-sm font-medium text-blue-700 dark:text-blue-300 truncate">{quiz.title}</span>
                                    </div>
                                    <Badge className={cn(
                                        "shrink-0 ml-2 text-[10px]",
                                        quiz.has_passed
                                            ? "bg-green-100 text-green-700 border border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700"
                                            : "bg-blue-100 text-blue-700 border border-blue-300 dark:bg-blue-900/40 dark:text-blue-400 dark:border-blue-700"
                                    )}>
                                        {quiz.has_passed ? "Passed" : "Quiz"}
                                    </Badge>
                                </div>
                            )}
                        </div>
                    </AccordionContent>
                </AccordionItem>
            </Accordion>
        </motion.div>
    );
};

// ─── Assessment Card ──────────────────────────────────────────────────────────

const AssessmentCard = ({ assessment, courseId, delay, nodeRef }) => {
    const navigate = useNavigate();
    const passed = assessment.has_passed;

    return (
        <motion.div
            ref={nodeRef}
            className="w-full rounded-2xl border bg-card p-5 flex flex-col gap-3 shadow-sm"
            initial={{ opacity: 0, y: 14 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.35, delay, ease: "easeOut" }}
        >
            <div className="flex items-center w-full justify-between">
                <div className="flex items-center gap-2.5">
                    <div className="h-9 w-9 rounded-lg bg-violet-100 dark:bg-violet-900/40 flex items-center justify-center shrink-0">
                        <ClipboardList className="h-4.5 w-4.5 text-violet-600 dark:text-violet-400" />
                    </div>
                    <div className="min-w-0">
                        <p className="text-[10px] uppercase tracking-widest text-muted-foreground font-semibold">Final Assessment</p>
                        <p className="text-sm font-semibold leading-tight truncate">{assessment.title}</p>
                    </div>
                </div>
                {(() => {
                    const count = assessment.max_questions ?? assessment.question_count;
                    if (!count) return null;
                    return (
                        <div className="text-sm text-muted-foreground shrink-0">
                            {count} {count === 1 ? "question" : "questions"}
                        </div>
                    );
                })()}
            </div>
            <div className="flex items-center justify-between">
                {passed ? (
                    <Badge className="bg-green-100 text-green-700 border border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700 gap-1">
                        <CheckCircle2 className="size-3" /> Passed
                    </Badge>
                ) : (
                    <Badge className="bg-muted text-muted-foreground border gap-1">
                        <Clock className="size-3" /> Not yet passed
                    </Badge>
                )}
                <Button
                    type="button"
                    size="sm"
                    variant={passed ? "outline" : "default"}
                    className="h-7 text-xs"
                    onClick={() => navigate(`/course/${courseId}/unit`, { state: { seekAssessment: true } })}
                >
                    {passed ? "Review" : "Take Assessment"}
                </Button>
            </div>
        </motion.div>
    );
};

// ─── Certificate Card ─────────────────────────────────────────────────────────

const CertCard = ({ courseTitle, courseLevel, badgeColor, badgeImageUrl, pendingCert, certificate, delay, nodeRef }) => {
    const { fmtDate } = useDateFormat();
    const isIssued = !!certificate;
    const isPending = !isIssued && !!pendingCert;

    let issuedLabel = "Upon completion";
    if (isIssued) issuedLabel = fmtDate(certificate.issued_at);
    if (isPending) issuedLabel = fmtDate(pendingCert.issue_at);

    return (
        <Dialog>
            <motion.div
                ref={nodeRef}
                className="w-full max-w-[320px] rounded-2xl border bg-card p-6 flex flex-col items-center gap-4 shadow-sm"
                initial={{ opacity: 0, y: 14 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.35, delay, ease: "easeOut" }}
            >
                <CourseBadge
                    title={courseTitle}
                    level={courseLevel}
                    color={badgeColor ?? "purple"}
                    imageUrl={badgeImageUrl}
                />

                <div className="w-full flex items-end justify-between">
                    <div>
                        <p className="text-[10px] uppercase tracking-widest text-muted-foreground font-semibold">
                            {isIssued ? "Issued" : "Available"}
                        </p>
                        <p className="text-sm text-foreground mt-0.5">{issuedLabel}</p>
                    </div>

                    {isIssued ? (
                        <DialogTrigger asChild>
                            <Badge className="bg-green-100 text-green-700 border border-green-400 dark:bg-green-900/40 dark:text-green-400 dark:border-green-700 gap-1 cursor-pointer">
                                <CheckCircle2 className="size-3" /> Issued
                            </Badge>
                        </DialogTrigger>
                    ) : isPending ? (
                        <DialogTrigger asChild>
                            <Badge className="bg-amber-100 text-amber-700 border border-amber-400 dark:bg-amber-900/40 dark:text-amber-400 dark:border-amber-700 gap-1 cursor-pointer">
                                <Clock className="size-3" /> Pending
                            </Badge>
                        </DialogTrigger>
                    ) : (
                        <DialogTrigger asChild>
                            <Badge className="bg-muted text-muted-foreground border gap-1 cursor-pointer">
                                <Clock className="size-3" /> Not yet earned
                            </Badge>
                        </DialogTrigger>
                    )}
                </div>
            </motion.div>

            <DialogContent className="sm:max-w-sm">
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2">
                        {isIssued
                            ? <CheckCircle2 className="size-4 text-green-500" />
                            : <Clock className="size-4 text-muted-foreground" />}
                        {isIssued ? "Certificate Issued" : isPending ? "Certificate Pending" : "Certificate"}
                    </DialogTitle>
                    <DialogDescription asChild>
                        <div className="space-y-3 pt-1 text-sm text-muted-foreground">
                            {isIssued ? (
                                <>
                                    <p>
                                        Your certificate for this course was officially issued on{" "}
                                        <span className="font-medium text-foreground">{fmtDate(certificate.issued_at)}</span>.
                                    </p>
                                    <div className="rounded-lg border bg-muted px-4 py-3">
                                        <p className="text-sm font-semibold text-foreground">{courseTitle}</p>
                                    </div>
                                    <p>
                                        You can view and download it from your <span className="font-medium text-foreground">Certificates</span> page.
                                    </p>
                                </>
                            ) : isPending ? (
                                <>
                                    <p>
                                        You passed the course assessment on{" "}
                                        <span className="font-medium text-foreground">{fmtDate(pendingCert.passed_at)}</span>.
                                        Your certificate is being processed and will be officially issued on:
                                    </p>
                                    <div className="rounded-lg border bg-muted px-4 py-3 text-center">
                                        <p className="text-base font-semibold text-foreground">{fmtDate(pendingCert.issue_at)}</p>
                                    </div>
                                    <p>
                                        Once issued, it will appear in your <span className="font-medium text-foreground">Certificates</span> page.
                                    </p>
                                </>
                            ) : (
                                <>
                                    <p>
                                        Complete all lessons and pass the course assessment to earn your certificate for:
                                    </p>
                                    <div className="rounded-lg border bg-muted px-4 py-3">
                                        <p className="text-sm font-semibold text-foreground">{courseTitle}</p>
                                    </div>
                                    <p>
                                        Your certificate will be issued within <span className="font-medium text-foreground">the hour</span> after passing and will appear in your <span className="font-medium text-foreground">Certificates</span> page.
                                    </p>
                                </>
                            )}
                        </div>
                    </DialogDescription>
                </DialogHeader>
            </DialogContent>
        </Dialog>
    );
};

// ─── Course Units (spine + cards) ─────────────────────────────────────────────

const CourseUnits = ({ units = [], courseId, courseTitle, courseLevel, badgeColor, badgeImageUrl, onToggle, isCompleted, pendingCert, certificate, assessment, contentNotReady }) => {
    const wrapRef = useRef(null);
    const cardRefs = useRef([]);

    // Build a flat ordered list of nodes: [unit, unit, ..., assessment?, cert]
    // Quiz is rendered inside each unit accordion, not as a separate spine node.
    // While content isn't ready yet, no unit/lesson/assessment titles are shown —
    // only the Rewards (cert) card, as a preview of what's to come.
    const nodes = contentNotReady
        ? [{ type: "cert" }]
        : [
            ...units.map((unit) => ({ type: "unit", unit })),
            ...(assessment ? [{ type: "assessment", assessment }] : []),
            { type: "cert" },
        ];
    const totalNodes = nodes.length;
    const visibleNodes = useVisibleNodes(cardRefs, totalNodes);
    const [mids, setMids] = useState([]);
    const maxVisible = visibleNodes.size ? Math.max(...visibleNodes) : -1;

    const measure = () => {
        if (!wrapRef.current) return;
        const base = wrapRef.current.getBoundingClientRect().top;
        setMids(
            cardRefs.current.map((el) => {
                const r = el?.getBoundingClientRect();
                return r ? Math.round((r.top + r.bottom) / 2 - base) : 0;
            })
        );
    };

    useEffect(() => {
        const id = setTimeout(measure, 60);
        window.addEventListener("resize", measure);
        return () => { clearTimeout(id); window.removeEventListener("resize", measure); };
    }, [totalNodes]);

    const lastMid = mids.length ? mids[mids.length - 1] : 0;
    const svgH = lastMid + 40;
    const drawnTo = maxVisible >= 0 && mids[maxVisible] ? mids[maxVisible] : 0;
    const isIssued = !!certificate;

    return (
        <div ref={wrapRef} className="flex gap-0 lg:gap-5 lg:px-4">
            {/* Spine */}
            <div className="relative flex-shrink-0 w-0 lg:w-7" style={{ height: svgH }}>
                {mids.length > 0 && (
                    <>
                        <svg
                            className="absolute top-0 left-1/2 -translate-x-1/2 overflow-visible text-border xs:hidden lg:block"
                            width={2}
                            height={svgH}
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <line x1={1} y1={0} x2={1} y2={svgH} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                            {Array.from({ length: 10 }).map((_, i) => {
                                const y1 = (mids[0] / 10) * i;
                                const y2 = (mids[0] / 10) * (i + 1);
                                const revealed = drawnTo >= y2;
                                return (
                                    <motion.line
                                        key={`intro-${i}`}
                                        x1={1} y1={y1} x2={1} y2={y2}
                                        stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
                                        animate={{ opacity: revealed ? 1 : 0.3 }}
                                        transition={{ duration: 0.4, ease: "easeOut" }}
                                    />
                                );
                            })}
                            {mids[0] != null && drawnTo > mids[0] && (
                                <motion.line
                                    x1={1} y1={mids[0]} x2={1} y2={drawnTo}
                                    stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
                                    initial={{ opacity: 0.3 }} animate={{ opacity: 1 }}
                                    transition={{ duration: 0.3 }}
                                />
                            )}
                        </svg>
                        {mids.map((mid, i) => {
                            const visible = visibleNodes.has(i);
                            const isCert = i === totalNodes - 1;
                            return (
                                <motion.div
                                    key={`node-${i}`}
                                    className={cn(
                                        "absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 w-7 h-7 rounded-full border bg-background flex items-center justify-center text-xs font-medium xs:hidden lg:flex",
                                        isCert && isIssued ? "border-emerald-500 text-emerald-500" : "border-border text-muted-foreground"
                                    )}
                                    style={{ top: mid }}
                                    initial={{ opacity: 0, scale: 0 }}
                                    animate={{ opacity: visible ? 1 : 0, scale: visible ? 1 : 0 }}
                                    transition={{ type: "spring", stiffness: 400, damping: 18, delay: 0.05 }}
                                >
                                    {isCert ? <Check className="size-3.5" /> : i + 1}
                                </motion.div>
                            );
                        })}
                    </>
                )}
            </div>

            {/* Cards */}
            <div className="flex flex-col gap-6 flex-1 max-w-3xl min-w-0 xs:pt-0 lg:pt-[50px]">
                {nodes.map((node, ni) => {
                    const delay = ni * 0.05;
                    const nodeRef = (el) => (cardRefs.current[ni] = el);

                    if (node.type === "unit") {
                        const unitIndex = units.indexOf(node.unit);
                        return (
                            <UnitAccordionBlock
                                key={node.unit.unit_id}
                                unit={node.unit}
                                unitIndex={unitIndex}
                                i={ni}
                                cardRefs={cardRefs}
                                courseId={courseId}
                                onToggle={measure}
                                isCompleted={isCompleted}
                            />
                        );
                    }

                    if (node.type === "assessment") {
                        return (
                            <AssessmentCard
                                key="assessment"
                                assessment={node.assessment}
                                courseId={courseId}
                                delay={delay}
                                nodeRef={nodeRef}
                            />
                        );
                    }

                    // cert
                    return (
                        <CertCard
                            key="cert"
                            nodeRef={nodeRef}
                            delay={delay}
                            courseTitle={courseTitle}
                            courseLevel={courseLevel}
                            badgeColor={badgeColor}
                            badgeImageUrl={badgeImageUrl}
                            pendingCert={pendingCert}
                            certificate={certificate}
                        />
                    );
                })}
            </div>
        </div>
    );
};

// ─── Course Details ───────────────────────────────────────────────────────────

const CourseDetails = () => {
    const CourseBreadcrumb = useRef(null);
    const triggered = useScrollTrigger(CourseBreadcrumb);
    const { id: courseId } = useParams();
    const navigate = useNavigate();

    const { getCourse, course, courseBlocked, courseLoading, resetCourse } = useClientCourses();
    const { myTier, getMyTier } = useClientTiers();
    const { fetchCourseProgress, isCompleted, resetProgress } = useCourseReadingProgress();
    const { advertisements, loading: adLoading, getActiveAdvertisements, handleAdCtaClick } = useClientAdvertisements();

    const [tierMap, setTierMap] = useState({});
    const [badgeImageUrl, setBadgeImageUrl] = useState(null);
    useEffect(() => {
        api.get("/client/tiers/categories")
            .then(({ data }) => {
                const m = {};
                (data.data ?? []).forEach((c) => { m[c.slug] = c; });
                setTierMap(m);
            })
            .catch(() => { });
    }, []);

    const hasCompleted = !!course?.is_completed;
    // duration_seconds is derived from authored lesson content (see duration.util.js) —
    // zero means no lesson content has been built yet, so the course isn't ready to take.
    const contentNotReady = !course?.duration_seconds;

    useEffect(() => {
        if (!myTier) getMyTier();
    }, []);

    useEffect(() => {
        getMyTier();
        getCourse(courseId);
        fetchCourseProgress(courseId);
        getActiveAdvertisements(["course_details.banner", "course_details.sidebar"]);
        return () => { resetCourse(); resetProgress(); setBadgeImageUrl(null); };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [courseId]);

    const bannerAd = advertisements["course_details.banner"] ?? null;
    const sidebarAd = advertisements["course_details.sidebar"] ?? null;

    // Resolve badge image once course loads — issue a client stream token for
    // private S3 assets so the badge preview works on this page.
    useEffect(() => {
        if (!course?.badge_asset_id) {
            setBadgeImageUrl(course?.badge_image_url ?? null);
            return;
        }
        const STREAM_BASE = `${import.meta.env.VITE_API_URL}/client/media/stream`;
        api.post("/client/media/token", { asset_id: course.badge_asset_id })
            .then(({ data }) => {
                const token = data.data?.token;
                setBadgeImageUrl(token ? `${STREAM_BASE}/${token}` : null);
            })
            .catch(() => setBadgeImageUrl(course.badge_image_url ?? null));
    }, [course?.badge_asset_id, course?.badge_image_url]);

    if (courseBlocked) {
        toast("You don't have access to this course. Upgrade your plan.");
        navigate("/course", { replace: true });
        return null;
    }

    const items = [
        { label: "Home", icon: <House className="size-4" />, to: `/dashboard` },
        { label: "Courses", to: `/course` },
        { label: course?.title ?? "Course" },
    ];

    if (courseLoading) {
        return (
            <div className="my-17 p-8 lg:container lg:mx-auto space-y-4">
                <Skeleton className="h-4 w-48" />
                <Skeleton className="h-10 w-2/3" />
                <Skeleton className="h-5 w-full max-w-2xl" />
                <Skeleton className="h-5 w-full max-w-xl" />
            </div>
        );
    }

    return (
        <div>
            <PageMeta title={course ? `${course.title} - STARR` : undefined} description={course?.description} />
            <div className="my-17">

                <AnimatePresence>
                    {triggered && (
                        <motion.div
                            key="sticky-bar"
                            initial={{ y: -20, opacity: 0 }}
                            animate={{ y: 0, opacity: 1 }}
                            exit={{ y: -20, opacity: 0 }}
                            transition={{ duration: 0.2, ease: "easeOut" }}
                            className="fixed top-[67px] left-0 right-0 z-10 bg-card border-b py-3 xs:px-4 md:px-6"
                        >
                            <div className="w-full flex items-center justify-between">
                                <AppBreadcrumb items={items} />
                                <div id="call-to-action">
                                    {contentNotReady ? (
                                        <Badge variant="secondary" className="gap-1.5 text-xs">
                                            <Hourglass className="size-3" /> Coming Soon
                                        </Badge>
                                    ) : (
                                        <>
                                            <Button size="sm" className="lg:hidden" onClick={() => navigate(`/course/${courseId}/unit`)}>
                                                {hasCompleted
                                                    ? <><CheckCheck /> Start Again</>
                                                    : <><SendHorizonal /> Start Learning</>
                                                }
                                            </Button>
                                            <Button size="default" className="hidden lg:inline-flex" onClick={() => navigate(`/course/${courseId}/unit`)}>
                                                {hasCompleted
                                                    ? <><CheckCheck /> Start Again</>
                                                    : <><SendHorizonal /> Start Learning</>
                                                }
                                            </Button>
                                        </>
                                    )}
                                </div>
                            </div>
                        </motion.div>
                    )}
                </AnimatePresence>

                <div className="flex flex-col gap-8">
                    <div className="flex flex-col gap-6">

                        {/* Hero */}
                        <div className="bg-primary dark:bg-accent/50">
                            <div className="lg:container lg:mx-auto flex flex-col gap-6 xs:px-6 xs:py-6 lg:px-4 lg:py-16">
                                <div>
                                    <AppBreadcrumb
                                        color={
                                            {
                                                link: { color: "text-white" },
                                                page: { color: "text-white" }
                                            }
                                        }
                                        items={items}
                                    />
                                </div>
                                <div className="flex lg:flex-row items-start justify-between w-full text-white">
                                    <div className="flex flex-col gap-4">
                                        <div className="flex items-center gap-2 flex-wrap">
                                            {(() => {
                                                const slug = course?.plan_tier ?? course?.subscription ?? "free";
                                                const { label, cls } = resolveTierBadge(slug, tierMap);
                                                return <Badge className={cls}>{label}</Badge>;
                                            })()}
                                            {(course?.categories ?? []).map((cat) => (
                                                <Badge key={cat.id} className="bg-white/15 text-white border-white/30">
                                                    <Tags /> {cat.name}
                                                </Badge>
                                            ))}
                                        </div>
                                        <h1 className="font-bold xs:text-2xl lg:text-4xl">{course?.title ?? "Course Title"}</h1>
                                        <p className="max-w-2xl xs:text-sm lg:text-lg">{course?.description ?? ""}</p>
                                        <div className="flex items-center gap-4">
                                            {course?.duration_seconds > 0 && (
                                                <div className="[&_svg]:size-4 flex gap-1.5 items-center">
                                                    <Timer />
                                                    {formatDuration(course.duration_seconds)}
                                                </div>
                                            )}
                                            {course?.level && (
                                                <div className="[&_svg]:size-4 flex gap-1.5 items-center">
                                                    <GitBranch />
                                                    {course.level.charAt(0).toUpperCase() + course.level.slice(1)}
                                                </div>
                                            )}
                                        </div>
                                        <div ref={CourseBreadcrumb} className="w-fit">
                                            {contentNotReady ? (
                                                <div className="flex items-center gap-2 rounded-lg border bg-muted px-4 py-2.5 text-sm text-muted-foreground">
                                                    <Hourglass className="size-4 shrink-0" />
                                                    This course is currently being prepared. Please check back later.
                                                </div>
                                            ) : (
                                                <Button
                                                    className="w-fit bg-blue-500"
                                                    onClick={() => navigate(`/course/${courseId}/unit`)}
                                                >
                                                    {hasCompleted
                                                        ? <><CheckCheck /> Start Again</>
                                                        : <><SendHorizonal /> Proceed</>
                                                    }
                                                </Button>
                                            )}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Advertisement Banner */}
                        <div className="lg:container lg:mx-auto xs:px-6 lg:px-4">
                            {adLoading["course_details.banner"] ? (
                                <BannerSkeleton />
                            ) : (
                                <Banner ad={bannerAd} onCtaClick={handleAdCtaClick} />
                            )}
                        </div>

                        {/* Body */}
                        <div className="lg:container lg:mx-auto flex flex-col gap-6 xs:px-3 xs:-mt-5 lg:-mt-0">
                            <div className="flex flex-col lg:flex-row gap-8">
                                <div className="flex flex-col xs:gap-12 lg:gap-12 flex-1 min-w-0">
                                    <div className="space-y-4">
                                        <div className="font-bold text-2xl">About this course</div>
                                        <div className="max-w-3xl space-y-4 text-muted-foreground lg:text-lg">
                                            <p>{course?.description ?? ""}</p>
                                        </div>
                                    </div>


                                    {/* Objectives */}
                                    <div className="space-y-4">
                                        {course?.objectives?.length > 0 && (
                                            <div className="space-y-4">
                                                <div className="font-bold text-2xl">What you will learn</div>
                                                <ul className="max-w-3xl list-disc list-inside space-y-1 lg:text-lg text-muted-foreground">
                                                    {course.objectives.map((obj) => (
                                                        <li key={obj.objective_id}>{obj.text}</li>
                                                    ))}
                                                </ul>
                                            </div>
                                        )}
                                    </div>


                                    {/* Units — while content isn't ready, only Rewards is shown */}
                                    <div className="space-y-4">
                                        {course?.units?.length > 0 && (
                                            <>
                                                <div className="font-bold text-2xl">
                                                    {contentNotReady ? "Rewards" : "Course content"}
                                                </div>
                                                <CourseUnits
                                                    units={course.units}
                                                    courseId={courseId}
                                                    courseTitle={course.title}
                                                    courseLevel={course.level}
                                                    badgeColor={course.badge_color ?? "purple"}
                                                    badgeImageUrl={badgeImageUrl}
                                                    isCompleted={isCompleted}
                                                    pendingCert={course.pending_certificate ?? null}
                                                    certificate={course.certificate ?? null}
                                                    assessment={course.assessment ?? null}
                                                    contentNotReady={contentNotReady}
                                                />
                                            </>
                                        )}
                                    </div>

                                </div>

                                {/* Advertisement Sidebar */}
                                <aside className="hidden lg:block w-72 shrink-0 sticky top-36 h-fit">
                                    {adLoading["course_details.sidebar"] ? (
                                        <SidebarSkeleton />
                                    ) : (
                                        <Sidebar ad={sidebarAd} onCtaClick={handleAdCtaClick} />
                                    )}
                                </aside>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default CourseDetails;