import { Archive, BookOpen, CheckSquare, Copy, Edit3, FolderTree, Plus, Search, Trash2 } from 'lucide-react';
import React from 'react';
import { adminBulkCourses, adminCreateCourse, adminDeleteCourse, adminDuplicateCourse, adminListCoursesPage } from '../api';
import type { LearnCourseSummary } from '../types';
import { LearnConfirmDialog, LearnTextDialog } from './learn-dialogs';

const PAGE_SIZE=25;
export function AdminLearnCourseList(){
  const [courses,setCourses]=React.useState<LearnCourseSummary[]>([]);const [query,setQuery]=React.useState('');const [status,setStatus]=React.useState('');const [tier,setTier]=React.useState('');const [page,setPage]=React.useState(1);const [total,setTotal]=React.useState(0);const [selected,setSelected]=React.useState<Set<number>>(new Set());const [error,setError]=React.useState('');const [createOpen,setCreateOpen]=React.useState(false);const [createTitle,setCreateTitle]=React.useState('New interactive course');const [createBusy,setCreateBusy]=React.useState(false);const [deleteTarget,setDeleteTarget]=React.useState<LearnCourseSummary|null>(null);const [deleteBusy,setDeleteBusy]=React.useState(false);const [bulkTarget,setBulkTarget]=React.useState<'publish'|'draft'|'archive'|'delete'|null>(null);const [bulkBusy,setBulkBusy]=React.useState(false);
  const load=React.useCallback(async()=>{try{const result=await adminListCoursesPage({page,pageSize:PAGE_SIZE,query:query.trim()||undefined,status:status||undefined,accessTier:tier||undefined,sort:'updated'});setCourses(result.items);setTotal(result.total);setSelected(current=>new Set([...current].filter(id=>result.items.some(course=>course.id===id))));setError('')}catch(reason){setError(reason instanceof Error?reason.message:String(reason))}},[page,query,status,tier]);
  React.useEffect(()=>{const timer=setTimeout(()=>void load(),query?250:0);return()=>clearTimeout(timer)},[load,query]);
  const create=async()=>{const title=createTitle.trim();if(!title)return;setCreateBusy(true);try{const course=await adminCreateCourse({title});setCreateOpen(false);window.location.href=`/admin/learn/courses/${course.id}/curriculum`}catch(reason){setError(reason instanceof Error?reason.message:String(reason))}finally{setCreateBusy(false)}};
  const remove=async()=>{if(!deleteTarget)return;setDeleteBusy(true);try{await adminDeleteCourse(deleteTarget.id);setDeleteTarget(null);await load()}catch(reason){setError(reason instanceof Error?reason.message:String(reason))}finally{setDeleteBusy(false)}};
  const bulk=async()=>{if(!bulkTarget||!selected.size)return;setBulkBusy(true);try{await adminBulkCourses([...selected],bulkTarget);setBulkTarget(null);setSelected(new Set());await load()}catch(reason){setError(reason instanceof Error?reason.message:String(reason))}finally{setBulkBusy(false)}};
  const pages=Math.max(1,Math.ceil(total/PAGE_SIZE));const allSelected=courses.length>0&&courses.every(course=>selected.has(course.id));
  return <div className="interactive-admin-learn-list"><div className="interactive-admin-page-head"><div><span className="interactive-eyebrow">LMS</span><h1 className="interactive-display">Courses</h1><p>Build, publish and manage structured Learnitive training.</p></div><div className="interactive-admin-learn-head-actions"><a className="interactive-button interactive-button-secondary" href="/admin/learn/categories"><FolderTree className="size-4"/> Categories</a><button type="button" className="interactive-button interactive-button-primary" onClick={()=>{setCreateTitle('New interactive course');setCreateOpen(true)}}><Plus className="size-4"/> New course</button></div></div>
  <div className="interactive-admin-learn-filters"><label><Search className="size-4"/><input placeholder="Search courses" value={query} onChange={event=>{setQuery(event.currentTarget.value);setPage(1)}}/></label><select value={status} onChange={event=>{setStatus(event.currentTarget.value);setPage(1)}}><option value="">All statuses</option><option value="draft">Draft</option><option value="published">Published</option><option value="archived">Archived</option></select><select value={tier} onChange={event=>{setTier(event.currentTarget.value);setPage(1)}}><option value="">Free & Pro</option><option value="free">Free</option><option value="pro">Pro</option></select></div>
  {selected.size?<div className="interactive-admin-learn-bulk"><strong>{selected.size} selected</strong><button type="button" onClick={()=>setBulkTarget('publish')}><CheckSquare className="size-4"/> Publish</button><button type="button" onClick={()=>setBulkTarget('draft')}>Draft</button><button type="button" onClick={()=>setBulkTarget('archive')}><Archive className="size-4"/> Archive</button><button type="button" className="is-danger" onClick={()=>setBulkTarget('delete')}><Trash2 className="size-4"/> Delete</button></div>:null}
  {error?<p className="interactive-error-copy">{error}</p>:null}<div className="interactive-admin-learn-table"><div className="interactive-admin-learn-table-head"><span><input aria-label="Select this page" type="checkbox" checked={allSelected} onChange={event=>setSelected(event.currentTarget.checked?new Set(courses.map(course=>course.id)):new Set())}/></span><span>Course</span><span>Status</span><span>Access</span><span>Content</span><span>Students</span><span>Updated</span><span/></div>{courses.map(course=><article key={course.id}><span><input aria-label={`Select ${course.title}`} type="checkbox" checked={selected.has(course.id)} onChange={event=>{const checked=event.currentTarget.checked;setSelected(current=>{const next=new Set(current);checked?next.add(course.id):next.delete(course.id);return next})}}/></span><div className="interactive-admin-learn-course-cell">{course.coverUrl?<img src={course.coverUrl} alt=""/>:<span className="interactive-admin-learn-course-icon"><BookOpen className="size-5"/></span>}<div><strong>{course.title}</strong><small>/{course.slug}</small></div></div><span className={`interactive-admin-learn-status is-${course.status}`}>{course.status}</span><span>{course.accessTier==='pro'?'Pro':'Free'}</span><span>{course.itemCount} items</span><span>{course.studentCount||0}</span><span>{course.updatedAt?new Date(course.updatedAt).toLocaleDateString():'—'}</span><div className="interactive-admin-learn-actions"><a href={`/admin/learn/courses/${course.id}/curriculum`} title="Edit"><Edit3 className="size-4"/></a><button type="button" title="Duplicate" onClick={()=>void adminDuplicateCourse(course.id).then(load)}><Copy className="size-4"/></button><button type="button" title="Delete" onClick={()=>setDeleteTarget(course)}><Trash2 className="size-4"/></button></div></article>)}</div>
  <div className="interactive-learn-pagination"><button type="button" disabled={page<=1} onClick={()=>setPage(value=>Math.max(1,value-1))}>Previous</button><span>Page {page} of {pages}</span><button type="button" disabled={page>=pages} onClick={()=>setPage(value=>Math.min(pages,value+1))}>Next</button></div>
  <LearnTextDialog open={createOpen} title="Create course" description="Start a new course and open its curriculum builder." label="Course title" value={createTitle} submitLabel="Create course" busy={createBusy} onChange={setCreateTitle} onOpenChange={setCreateOpen} onSubmit={create}/><LearnConfirmDialog open={Boolean(deleteTarget)} title="Delete course?" description={deleteTarget?`Delete “${deleteTarget.title}” and its curriculum/progress relationships? Shared LMS media is retained safely.`:''} confirmLabel="Delete course" destructive busy={deleteBusy} onOpenChange={open=>{if(!open)setDeleteTarget(null)}} onConfirm={remove}/><LearnConfirmDialog open={Boolean(bulkTarget)} title={`${bulkTarget==='delete'?'Delete':bulkTarget==='publish'?'Publish':bulkTarget==='archive'?'Archive':'Move to draft'} ${selected.size} course${selected.size===1?'':'s'}?`} description={bulkTarget==='delete'?'Course curriculum and progress will be removed. Shared media is retained.':'Apply this status change to every selected course.'} confirmLabel={bulkTarget==='delete'?'Delete courses':'Apply'} destructive={bulkTarget==='delete'} busy={bulkBusy} onOpenChange={open=>{if(!open)setBulkTarget(null)}} onConfirm={bulk}/></div>;
}