import { ArrowLeft, BookOpen, ChevronLeft, ChevronRight, Clock3, ExternalLink } from 'lucide-react';
import React from 'react';
import { adminPreviewCourse, adminPreviewLesson } from '../api';
import { LessonRenderer } from '../blocks/lesson-renderer';
import type { AdminLearnCourse, PublicLearnLesson } from '../types';

function duration(minutes:number){if(!minutes)return'Self-paced';if(minutes<60)return`${minutes} min`;const hours=Math.floor(minutes/60),rest=minutes%60;return rest?`${hours}h ${rest}m`:`${hours}h`;}

function PreviewBanner({courseId}:{courseId:number}){return <div className="interactive-admin-learn-preview-banner"><div><strong>Learner preview</strong><span>Draft content is visible only to administrators and uses the same learner content renderer and styles.</span></div><a href={`/admin/learn/courses/${courseId}/curriculum`}><ArrowLeft className="size-4"/> Back to builder</a></div>}

function LessonPreview({course,lesson}:{course:AdminLearnCourse;lesson:PublicLearnLesson}){
  const ordered=course.sections.flatMap(section=>section.items);const index=ordered.findIndex(item=>item.id===lesson.id);const previous=index>0?ordered[index-1]:undefined;const next=index>=0&&index<ordered.length-1?ordered[index+1]:undefined;
  return <div className="interactive-admin-learn-lesson-preview"><PreviewBanner courseId={course.id}/><div className="interactive-learn-player interactive-admin-learn-preview-player"><header className="interactive-learn-player-top"><a href={`/admin/learn/preview/${course.id}`}><ChevronLeft className="size-5"/><span>{course.title}</span></a><span className="interactive-admin-learn-preview-mode">Admin preview</span></header><div className="interactive-learn-player-body"><aside className="interactive-learn-player-sidebar"><header><div><strong>{course.title}</strong><small>Draft curriculum</small></div></header><nav>{course.sections.map(section=><details key={section.id} open><summary>{section.title}<span>{section.items.length}</span></summary>{section.items.map(item=>item.type==='lesson'?<a key={item.id} className={`interactive-learn-player-item${item.id===lesson.id?' is-active':''}`} href={`/admin/learn/preview/${course.id}/${item.id}`}><span><BookOpen className="size-4"/></span><span>{item.title}</span><small>{duration(item.estimatedMinutes)}</small></a>:<span key={item.id} className="interactive-learn-player-item is-locked"><span><BookOpen className="size-4"/></span><span>{item.title}</span><small>{item.type}</small></span>)}</details>)}</nav></aside><main className="interactive-learn-player-content"><article><span className="interactive-eyebrow">Lesson {index+1} of {ordered.length}</span><h1>{lesson.title}</h1><div className="interactive-learn-player-meta"><span><Clock3 className="size-4"/>{duration(lesson.estimatedMinutes)}</span></div>{course.notice?.text?<aside className="interactive-learn-course-notice"><strong>{String(course.notice.title||'Course notice')}</strong><p>{String(course.notice.text)}</p></aside>:null}{lesson.document?<LessonRenderer lesson={lesson}/>:null}</article></main></div><footer className="interactive-learn-player-bottom">{previous?.type==='lesson'?<a className="interactive-learn-player-nav previous" href={`/admin/learn/preview/${course.id}/${previous.id}`}><ChevronLeft className="size-4"/><span><small>Previous</small><strong>{previous.title}</strong></span></a>:<span/>}<span className="interactive-admin-learn-preview-note">Preview only</span>{next?.type==='lesson'?<a className="interactive-learn-player-nav next" href={`/admin/learn/preview/${course.id}/${next.id}`}><span><small>Next</small><strong>{next.title}</strong></span><ChevronRight className="size-4"/></a>:<a className="interactive-learn-player-nav next" href={`/admin/learn/preview/${course.id}`}><span><small>Next</small><strong>Course overview</strong></span><ChevronRight className="size-4"/></a>}</footer></div></div>;
}

export function AdminLearnPreviewPage({courseId,itemId}:{courseId:number;itemId?:number}){
  const [course,setCourse]=React.useState<AdminLearnCourse>();const [lesson,setLesson]=React.useState<PublicLearnLesson>();const [error,setError]=React.useState('');
  React.useEffect(()=>{let active=true;setError('');setLesson(undefined);void Promise.all([adminPreviewCourse(courseId),itemId?adminPreviewLesson(itemId):Promise.resolve(undefined)]).then(([courseValue,lessonValue])=>{if(!active)return;setCourse(courseValue);if(lessonValue)setLesson(lessonValue)}).catch(reason=>{if(active)setError(reason instanceof Error?reason.message:String(reason))});return()=>{active=false}},[courseId,itemId]);
  if(error)return <div className="interactive-empty-state"><h2>Preview unavailable</h2><p>{error}</p></div>;if(!course||(itemId&&!lesson))return <div className="interactive-empty-state"><p>Loading learner preview…</p></div>;if(lesson)return <LessonPreview course={course} lesson={lesson}/>;
  return <div className="interactive-admin-learn-preview"><PreviewBanner courseId={course.id}/><main className="interactive-page-container"><header className="interactive-admin-learn-preview-hero">{course.coverUrl?<img src={course.coverUrl} alt=""/>:null}<div><span className="interactive-eyebrow">{course.level} · {course.accessTier==='pro'?'Pro':'Free'}</span><h1>{course.title}</h1><p>{course.shortDescription}</p><div><span><Clock3 className="size-4"/>{course.estimatedMinutes} min</span><span><BookOpen className="size-4"/>{course.sections.reduce((count,section)=>count+section.items.length,0)} items</span></div></div></header>{String(course.notice?.title||course.notice?.text||'')?<aside className="interactive-learn-course-notice"><strong>{String(course.notice.title||'Course notice')}</strong><p>{String(course.notice.text||'')}</p></aside>:null}<section className="interactive-admin-learn-preview-copy"><h2>About this course</h2><p>{String(course.description?.text||course.shortDescription||'')}</p></section><section><h2>Curriculum</h2><div className="interactive-admin-learn-preview-curriculum">{course.sections.map(section=><article key={section.id}><header><h3>{section.title}</h3><small>{section.items.length} items</small></header>{section.items.map(item=>item.type==='lesson'?<a key={item.id} href={`/admin/learn/preview/${course.id}/${item.id}`}><span>{item.title}</span><small>{item.status} · {item.type}</small><ExternalLink className="size-4"/></a>:<a key={item.id} href={`/admin/learn/courses/${course.id}/${item.type==='quiz'?'quizzes':'assignments'}/${item.id}`}><span>{item.title}</span><small>{item.status} · {item.type}</small><ExternalLink className="size-4"/></a>)}</article>)}</div></section></main></div>;
}