import React, { useEffect, useMemo, useState } from 'react'
import { Link, router, usePage } from '@inertiajs/react'
import SeoHead from '../../components/seo/SeoHead'
import { postAcademyAction, trackUpgradeClick, useAcademyPageAnalytics } from '../../lib/academyAnalytics'

function CourseBreadcrumbs({ items = [] }) {
  if (!items.length) return null

  return (
    <nav aria-label="Breadcrumb" className="flex flex-wrap items-center gap-2 text-sm text-slate-400">
      {items.map((item, index) => {
        const isLast = index === items.length - 1

        return (
          <React.Fragment key={`${item.label}-${index}`}>
            {index > 0 ? <span className="text-slate-600">/</span> : null}
            {isLast ? (
              <span className="font-medium text-slate-200">{item.label}</span>
            ) : (
              <Link href={item.href} className="transition hover:text-white">
                {item.label}
              </Link>
            )}
          </React.Fragment>
        )
      })}
    </nav>
  )
}

function ProgressMeter({ progress }) {
  const percent = Math.max(0, Math.min(100, Number(progress?.percent || 0)))

  return (
    <div className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.92),rgba(15,23,42,0.72))] p-5">
      <div className="flex items-start justify-between gap-3">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-400">Progress</p>
          <p className="mt-2 text-3xl font-semibold tracking-[-0.04em] text-white">{percent}%</p>
        </div>
        <span className="rounded-full border border-white/10 bg-white/[0.05] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">
          {progress ? 'In progress' : 'Not started'}
        </span>
      </div>
      <div className="mt-4 h-2.5 overflow-hidden rounded-full bg-white/[0.06]">
        <div
          className="h-full rounded-full bg-[linear-gradient(90deg,rgba(125,211,252,0.95),rgba(251,191,36,0.9))] transition-[width] duration-500"
          style={{ width: `${percent}%` }}
        />
      </div>
      <p className="mt-3 text-sm leading-7 text-slate-300">
        {progress
          ? `${progress.completedRequired}/${progress.totalRequired} required lessons completed`
          : 'Start the course to begin tracking progress through required lessons.'}
      </p>
    </div>
  )
}

function LessonChip({ lesson }) {
  const thumbnail = lesson?.cover_image_url || lesson?.article_cover_image_url || lesson?.cover_image || lesson?.article_cover_image || ''
  const stepLabel = lesson?.course_step_label || null
  const stepNumber = Number(lesson?.course_step_number || 0)
  const isCompleted = Boolean(lesson?.completed)
  const readingMinutes = Number(lesson?.reading_minutes || 0)
  const ctaLabel = isCompleted ? 'Review lesson' : 'Open lesson'
  const difficultyLabel = lesson?.difficulty || 'lesson'
  const accessLabel = lesson?.access_level || 'free'
  const lessonTypeLabel = lesson?.lesson_type || 'article'
  const statusLabel = isCompleted ? 'Completed' : lesson?.is_required ? 'Required next' : 'Optional read'
  const supportCopy = isCompleted ? 'You already finished this lesson.' : lesson?.is_required ? 'Recommended as the next required step in this course.' : 'Optional depth you can take at your own pace.'

  return (
    <Link
      href={lesson.course_url || `/academy/lessons/${lesson.slug}`}
      className={[
        'group relative overflow-hidden rounded-[34px] border bg-[linear-gradient(180deg,rgba(15,23,42,0.96),rgba(15,23,42,0.78))] shadow-[0_24px_54px_rgba(2,6,23,0.22)] transition duration-200 hover:-translate-y-1 hover:border-sky-300/30 hover:shadow-[0_28px_74px_rgba(14,165,233,0.16)]',
        isCompleted ? 'border-emerald-300/25' : 'border-white/10',
      ].join(' ')}
    >
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(125,211,252,0.12),transparent_24%),radial-gradient(circle_at_bottom_left,rgba(251,191,36,0.08),transparent_28%),linear-gradient(135deg,transparent,rgba(255,255,255,0.02))] opacity-80 transition duration-200 group-hover:opacity-100" />
      <div className="absolute inset-x-0 top-0 h-px bg-[linear-gradient(90deg,transparent,rgba(125,211,252,0.42),transparent)]" />

      <div className="relative grid gap-0 lg:grid-cols-[188px_minmax(0,1fr)]">
        <div className="relative border-b border-white/10 bg-slate-950/90 lg:border-b-0 lg:border-r lg:border-white/10">
          {thumbnail ? (
            <img src={thumbnail} alt="" aria-hidden="true" className="h-44 w-full object-cover lg:h-full" />
          ) : (
            <div className="h-44 w-full bg-[linear-gradient(135deg,rgba(56,189,248,0.2),rgba(15,23,42,0.96))] lg:h-full" />
          )}
          <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(2,6,23,0.08),rgba(2,6,23,0.42)_42%,rgba(2,6,23,0.9))]" />
          <div className="absolute inset-x-4 top-4 flex items-start justify-between gap-3">
            <span className={`rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] backdrop-blur ${lesson.is_required ? 'border-white/10 bg-black/40 text-white/82' : 'border-white/10 bg-black/30 text-white/62'}`}>
              {lesson.is_required ? 'Required' : 'Optional'}
            </span>
            {isCompleted ? (
              <span className="inline-flex items-center gap-1.5 rounded-full border border-emerald-300/25 bg-emerald-300/12 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-emerald-100 backdrop-blur">
                <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" className="h-3.5 w-3.5">
                  <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.2" />
                  <path d="M4.75 8.2 7 10.4l4.25-4.8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                Done
              </span>
            ) : null}
          </div>
          <div className="absolute inset-x-4 bottom-4 flex items-end justify-between gap-3">
            <div className="rounded-[24px] border border-white/10 bg-black/30 px-3 py-2 backdrop-blur-sm">
              {stepLabel ? <p className="text-[10px] font-semibold uppercase tracking-[0.24em] text-sky-100/80">{stepLabel}</p> : null}
              {stepNumber > 0 ? <p className="mt-1 text-5xl font-semibold tracking-[-0.1em] text-white">{String(stepNumber).padStart(2, '0')}</p> : null}
              {!stepNumber && lesson.formatted_lesson_number ? <p className="mt-1 text-sm font-semibold uppercase tracking-[0.16em] text-white/80">{lesson.formatted_lesson_number}</p> : null}
            </div>
          </div>
        </div>

        <div className="p-5 md:p-6">
          <div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_240px] xl:items-start">
            <div className="min-w-0">
              <div className="flex flex-wrap items-center gap-2.5">
                {stepLabel ? <p className="text-[10px] font-semibold uppercase tracking-[0.22em] text-sky-100">{stepLabel}</p> : null}
                {lesson.formatted_lesson_number ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400">{lesson.formatted_lesson_number}</span> : null}
                <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400">{difficultyLabel}</span>
                <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400">{accessLabel}</span>
                {readingMinutes > 0 ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400">{readingMinutes} min</span> : null}
              </div>
              <h3 className="mt-3 max-w-3xl text-[1.65rem] font-semibold tracking-[-0.05em] text-white transition group-hover:text-sky-100">{lesson.title}</h3>
              <p className="mt-2 text-sm text-slate-400">{supportCopy}</p>

              <div className="mt-4 rounded-[26px] border border-white/10 bg-[linear-gradient(180deg,rgba(2,6,23,0.36),rgba(2,6,23,0.18))] px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]">
                <p className="text-sm leading-7 text-slate-300">{lesson.excerpt || lesson.content_preview || 'Open this lesson inside the course.'}</p>
              </div>

              <div className="mt-5 flex flex-wrap items-center gap-2.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">
                <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5">{lessonTypeLabel}</span>
                {lesson.category_name ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5">{lesson.category_name}</span> : null}
                <span className="text-slate-500">Course flow</span>
              </div>
            </div>

            <div className="flex h-full flex-col justify-between gap-4 xl:border-l xl:border-white/10 xl:pl-6">
              <div className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]">
                <p className="text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500">Lesson path</p>
                <div className="mt-4 space-y-3">
                  <div className="flex items-center justify-between gap-3 rounded-[18px] border border-white/10 bg-black/20 px-3 py-3">
                    <span className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Status</span>
                    <span className={`text-sm font-semibold ${isCompleted ? 'text-emerald-100' : 'text-white'}`}>{statusLabel}</span>
                  </div>
                  <div className="flex items-center justify-between gap-3 rounded-[18px] border border-white/10 bg-black/20 px-3 py-3">
                    <span className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Access</span>
                    <span className="text-sm font-semibold text-white">{accessLabel}</span>
                  </div>
                  <div className="flex items-center justify-between gap-3 rounded-[18px] border border-white/10 bg-black/20 px-3 py-3">
                    <span className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Read time</span>
                    <span className="text-sm font-semibold text-white">{readingMinutes > 0 ? `${readingMinutes} min` : 'Quick read'}</span>
                  </div>
                </div>
              </div>

              <div className="flex items-center justify-between gap-3 xl:justify-end">
                <span className="text-xs uppercase tracking-[0.16em] text-slate-500">Continue path</span>
                <span className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-300/10 px-4 py-2 text-sm font-semibold text-sky-100 transition group-hover:border-sky-300/35 group-hover:bg-sky-300/14 group-hover:text-white">
                  {ctaLabel}
                  <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" className="h-4 w-4">
                    <path d="M3.5 8h9m0 0-3.5-3.5M12.5 8l-3.5 3.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Link>
  )
}

function SectionBlock({ section, isActive = false }) {
  if (!section?.is_visible) return null

  const lessonCount = section.lessons?.length || 0
  const requiredCount = (section.lessons || []).filter((lesson) => lesson?.is_required).length

  return (
    <section className={`relative overflow-hidden rounded-[34px] border p-6 transition md:p-7 ${isActive ? 'border-sky-300/25 bg-[linear-gradient(180deg,rgba(14,165,233,0.08),rgba(255,255,255,0.04))] shadow-[0_24px_56px_rgba(14,165,233,0.08)]' : 'border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02))]'}`}>
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(125,211,252,0.08),transparent_28%),linear-gradient(135deg,transparent,rgba(255,255,255,0.015))] opacity-80" />
      <div className="relative flex flex-wrap items-start justify-between gap-5">
        <div className="max-w-4xl">
          <div className="flex flex-wrap items-center gap-2.5">
            <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-400">Course section</p>
            <span className={`rounded-full border px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] ${isActive ? 'border-sky-300/20 bg-sky-300/12 text-sky-100' : 'border-white/10 bg-black/20 text-slate-300'}`}>
              {section.order_num + 1}
            </span>
            {requiredCount > 0 ? <span className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{requiredCount} required</span> : null}
          </div>
          <h2 className="mt-3 text-2xl font-semibold tracking-[-0.05em] text-white md:text-[2rem]">{section.title}</h2>
          {section.description ? <p className="mt-3 max-w-3xl text-sm leading-7 text-slate-300">{section.description}</p> : null}
          <p className="mt-4 text-xs uppercase tracking-[0.18em] text-slate-500">{lessonCount} lessons mapped in this section</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <span className="rounded-full border border-white/10 bg-black/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-300">{lessonCount} lessons</span>
          {isActive ? <span className="rounded-full border border-sky-300/20 bg-sky-300/12 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-sky-100">Reading now</span> : null}
        </div>
      </div>

      <div className="relative mt-6 space-y-6">
        {(section.lessons || []).map((lesson) => (
          <LessonChip key={lesson.course_lesson_id || lesson.id} lesson={lesson} />
        ))}
      </div>
    </section>
  )
}

export default function AcademyCoursesShow({ seo, course, sections = [], unsectionedLessons = [], pricingUrl, startUrl = null, interaction = null, interactionRoutes = null, loginUrl = null, analytics = null }) {
  const flash = usePage().props.flash || {}
  useAcademyPageAnalytics(analytics)
  const cover = course?.cover_image_url || course?.cover_image || course?.teaser_image_url || course?.teaser_image || ''
  const heroBackground = course?.teaser_image_url || course?.teaser_image || course?.cover_image_url || course?.cover_image || ''
  const progress = course?.progress || null
  const [liked, setLiked] = useState(Boolean(interaction?.liked))
  const [saved, setSaved] = useState(Boolean(interaction?.saved))
  const [likesCount, setLikesCount] = useState(Number(interaction?.likes_count || 0))
  const [savesCount, setSavesCount] = useState(Number(interaction?.saves_count || 0))
  const visibleSections = sections.filter((section) => section?.is_visible)
  const totalLessons = Number(course?.lessons_count || (unsectionedLessons.length + visibleSections.reduce((sum, section) => sum + (section.lessons || []).length, 0)))
  const totalSections = visibleSections.length + (unsectionedLessons.length ? 1 : 0)
  const estimatedMinutes = course?.estimated_minutes ? `${course.estimated_minutes} min` : 'Flexible pace'

  const sectionJumpItems = useMemo(
    () => [
      ...(unsectionedLessons.length ? [{ id: 'course-outline-core', label: 'Core lessons', count: unsectionedLessons.length }] : []),
      ...visibleSections
        .map((section) => ({ id: `section-${section.id}`, label: section.title, count: (section.lessons || []).length })),
    ],
    [unsectionedLessons, visibleSections],
  )

  const [activeJumpId, setActiveJumpId] = useState(sectionJumpItems[0]?.id || null)

  const breadcrumbs = [
    { label: 'Academy', href: '/academy' },
    { label: 'Courses', href: '/academy/courses' },
    { label: course?.title || 'Course', href: course?.public_url || '#' },
  ]

  useEffect(() => {
    if (!sectionJumpItems.length || typeof window === 'undefined' || typeof IntersectionObserver === 'undefined') {
      return undefined
    }

    const observer = new IntersectionObserver(
      (entries) => {
        const visibleEntries = entries.filter((entry) => entry.isIntersecting).sort((left, right) => right.intersectionRatio - left.intersectionRatio)

        if (!visibleEntries.length) return

        setActiveJumpId(visibleEntries[0].target.id)
      },
      {
        rootMargin: '-20% 0px -55% 0px',
        threshold: [0.2, 0.45, 0.7],
      },
    )

    const elements = sectionJumpItems.map((item) => document.getElementById(item.id)).filter(Boolean)
    elements.forEach((element) => observer.observe(element))

    return () => observer.disconnect()
  }, [sectionJumpItems])

  const requireLogin = () => {
    if (loginUrl && typeof window !== 'undefined') {
      window.location.href = loginUrl
    }
  }

  const startCourse = () => {
    if (!startUrl) {
      requireLogin()
      return
    }

    router.post(startUrl)
  }

  const toggleLike = async () => {
    if (!interactionRoutes?.like || !analytics?.contentType || !analytics?.contentId) {
      return
    }

    if (analytics?.isGuest) {
      requireLogin()
      return
    }

    const payload = await postAcademyAction(interactionRoutes.like, {
      content_type: analytics.contentType,
      content_id: analytics.contentId,
    })

    if (payload?.liked !== undefined) {
      setLiked(Boolean(payload.liked))
      setLikesCount(Number(payload.likes_count || 0))
    }
  }

  const toggleSave = async () => {
    if (!interactionRoutes?.save || !analytics?.contentType || !analytics?.contentId) {
      return
    }

    if (analytics?.isGuest) {
      requireLogin()
      return
    }

    const payload = await postAcademyAction(interactionRoutes.save, {
      content_type: analytics.contentType,
      content_id: analytics.contentId,
    })

    if (payload?.saved !== undefined) {
      setSaved(Boolean(payload.saved))
      setSavesCount(Number(payload.saves_count || 0))
    }
  }

  return (
    <main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(251,191,36,0.16),_transparent_24%),linear-gradient(180deg,_#0f172a_0%,_#111827_100%)] px-4 py-8 sm:px-6 lg:px-8">
      <SeoHead seo={seo || {}} title={course?.title} description={course?.excerpt || course?.description} />

      <div className="mx-auto max-w-[1400px] space-y-6">
        {flash.success ? <div className="rounded-2xl border border-emerald-300/20 bg-emerald-300/10 px-4 py-3 text-sm text-emerald-100">{flash.success}</div> : null}
        {flash.error ? <div className="rounded-2xl border border-rose-300/20 bg-rose-300/10 px-4 py-3 text-sm text-rose-100">{flash.error}</div> : null}

        <section className="relative overflow-hidden rounded-[40px] border border-sky-200/12 bg-[linear-gradient(145deg,rgba(14,165,233,0.16),rgba(15,23,42,0.95)_38%,rgba(251,191,36,0.14))] shadow-[0_24px_90px_rgba(2,6,23,0.34)]">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_18%_14%,rgba(125,211,252,0.14),transparent_24%),linear-gradient(90deg,rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(180deg,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[length:auto,24px_24px,24px_24px] opacity-70" />
          <div className="absolute -left-8 top-10 h-36 w-36 rounded-full bg-sky-300/18 blur-3xl" />
          <div className="absolute -right-10 bottom-0 h-40 w-40 rounded-full bg-amber-300/14 blur-3xl" />

          <div className="relative grid gap-6 p-5 md:p-6 xl:grid-cols-[minmax(0,1fr)_360px] xl:p-7">
            <div className="min-w-0">
              {heroBackground ? <img src={heroBackground} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover opacity-[0.08]" /> : null}
              <div className="relative z-10 max-w-5xl">
                <CourseBreadcrumbs items={breadcrumbs} />

                <div className="mt-5 flex flex-wrap items-center gap-2.5">
                  <span className="rounded-full border border-sky-200/18 bg-sky-300/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-50/90">Skinbase AI Academy</span>
                  <span className="rounded-full border border-white/10 bg-white/[0.06] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-200">Course path</span>
                  <span className="rounded-full border border-white/10 bg-white/[0.06] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-300">{course?.difficulty}</span>
                  <span className="rounded-full border border-white/10 bg-white/[0.06] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-300">{course?.access_level}</span>
                  {progress?.percent ? <span className="rounded-full border border-emerald-300/20 bg-emerald-300/12 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-emerald-100">{progress.percent}% complete</span> : null}
                </div>

                <div className="mt-5 flex items-start justify-between gap-4">
                  <div className="max-w-4xl">
                    {course?.subtitle ? <p className="text-sm font-semibold uppercase tracking-[0.24em] text-amber-100/90">{course.subtitle}</p> : null}
                    <h1 className="mt-4 text-4xl font-semibold tracking-[-0.06em] text-white md:text-5xl lg:text-[3.9rem]">{course?.title}</h1>
                    <p className="mt-4 max-w-3xl text-base leading-8 text-slate-200/95 md:text-lg">{course?.excerpt || course?.description}</p>
                  </div>
                  <span className="hidden h-20 w-20 shrink-0 items-center justify-center rounded-[26px] border border-white/10 bg-white/[0.04] text-2xl text-sky-50 shadow-[0_18px_40px_rgba(2,6,23,0.22)] md:flex">
                    <i className="fa-solid fa-route" />
                  </span>
                </div>

                <div className="mt-6 flex flex-wrap gap-3">
                  <button type="button" onClick={startCourse} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100">{progress?.percent ? 'Continue course' : 'Start course'}</button>
                  <button type="button" onClick={toggleLike} className="rounded-full border border-white/10 bg-white/[0.06] px-5 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.08]">{liked ? `Liked · ${likesCount}` : `Like · ${likesCount}`}</button>
                  <button type="button" onClick={toggleSave} className="rounded-full border border-white/10 bg-white/[0.06] px-5 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.08]">{saved ? `Saved · ${savesCount}` : `Save · ${savesCount}`}</button>
                  <Link href={pricingUrl} onClick={() => trackUpgradeClick(analytics, { source: 'academy_course_header' })} className="rounded-full border border-amber-300/25 bg-amber-300/12 px-5 py-3 text-sm font-semibold text-amber-100">See plans</Link>
                </div>

                <div className="mt-8 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
                  <div className="rounded-[24px] border border-white/10 bg-slate-950/35 px-4 py-4 backdrop-blur-sm">
                    <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-sky-100/75">Library</p>
                    <p className="mt-2 text-lg font-semibold text-white">{totalLessons} lessons</p>
                  </div>
                  <div className="rounded-[24px] border border-white/10 bg-slate-950/35 px-4 py-4 backdrop-blur-sm">
                    <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-sky-100/75">Structure</p>
                    <p className="mt-2 text-lg font-semibold text-white">{totalSections} sections</p>
                  </div>
                  <div className="rounded-[24px] border border-white/10 bg-slate-950/35 px-4 py-4 backdrop-blur-sm">
                    <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-sky-100/75">Pace</p>
                    <p className="mt-2 text-lg font-semibold text-white">{estimatedMinutes}</p>
                  </div>
                  <div className="rounded-[24px] border border-white/10 bg-slate-950/35 px-4 py-4 backdrop-blur-sm">
                    <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-sky-100/75">Status</p>
                    <p className="mt-2 text-lg font-semibold text-white">{progress?.percent ? `${progress.percent}% complete` : 'Ready to start'}</p>
                  </div>
                </div>
              </div>
            </div>

            <aside className="grid gap-4 self-start xl:pt-2">
              <div className="overflow-hidden rounded-[30px] border border-white/10 bg-black/20 shadow-[0_18px_42px_rgba(2,6,23,0.18)] backdrop-blur-sm">
                {cover ? (
                  <img src={cover} alt={course?.title} className="h-56 w-full object-cover" />
                ) : (
                  <div className="flex h-56 items-center justify-center bg-[linear-gradient(135deg,rgba(56,189,248,0.18),rgba(15,23,42,0.92))] px-6 text-center text-sm text-slate-400">
                    No course cover image yet
                  </div>
                )}
              </div>

              <ProgressMeter progress={progress} />

              <div className="rounded-[30px] border border-white/10 bg-black/20 p-5 shadow-[0_18px_42px_rgba(2,6,23,0.18)] backdrop-blur-sm">
                <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-400">Jump through the course</p>
                <div className="mt-4 space-y-2">
                  {sectionJumpItems.length ? (
                    sectionJumpItems.map((item) => (
                      <a
                        key={item.id}
                        href={`#${item.id}`}
                        onClick={() => setActiveJumpId(item.id)}
                        className={`flex items-center justify-between rounded-2xl border px-4 py-3 text-sm transition ${activeJumpId === item.id ? 'border-sky-300/25 bg-sky-300/12 text-white' : 'border-white/10 bg-white/[0.03] text-slate-300 hover:border-white/20 hover:bg-white/[0.06]'}`}
                      >
                        <span className="font-medium">{item.label}</span>
                        <span className="rounded-full border border-white/10 bg-black/20 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-400">{item.count}</span>
                      </a>
                    ))
                  ) : (
                    <p className="rounded-2xl border border-dashed border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-slate-400">No course outline items are available yet.</p>
                  )}
                </div>
              </div>
            </aside>
          </div>
        </section>

        <div className="space-y-6">
          {unsectionedLessons.length ? (
            <SectionBlock
              section={{
                order_num: -1,
                title: 'Core lessons',
                description: 'Lessons shown before the course branches into sections.',
                is_visible: true,
                lessons: unsectionedLessons,
              }}
              isActive={activeJumpId === 'course-outline-core'}
            />
          ) : null}

          {sections.filter((section) => section?.is_visible).map((section) => (
            <SectionBlock key={section.id} section={section} isActive={activeJumpId === `section-${section.id}`} />
          ))}
        </div>
      </div>
    </main>
  )
}