import { useState } from 'react'; import { Head, Link, useForm, usePage } from '@inertiajs/react'; import { ArrowLeft, ExternalLink, Save, Upload } from 'lucide-react'; import RichEditor from '@/components/rich-editor'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Spinner } from '@/components/ui/spinner'; import AppLayout from '@/layouts/app-layout'; type Lesson = { id: number; title: string; type: 'video' | 'text' | 'pdf'; video_url: string | null; content: string | null; file_path: string | null; duration_minutes: number; is_preview: boolean; }; type Props = { course: { id: number; title: string; slug: string }; chapter: { id: number; title: string }; lesson: Lesson | null; }; const selectCls = 'border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 h-9 w-full rounded-md border px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px]'; export default function LessonEditor({ course, chapter, lesson }: Props) { const { auth } = usePage().props as { auth: { user: { role: string } } }; const isAdmin = auth.user.role === 'admin'; const courseBackUrl = isAdmin ? `/admin/courses/${course.id}` : `/instructor/courses/${course.slug}`; const isEdit = lesson !== null; const [pdfSource, setPdfSource] = useState<'link' | 'upload'>(lesson?.file_path ? 'upload' : 'link'); const form = useForm({ title: lesson?.title ?? '', type: lesson?.type ?? 'video', video_url: lesson?.video_url ?? '', content: lesson?.content ?? '', duration_minutes: lesson?.duration_minutes ?? 0, is_preview: lesson?.is_preview ?? false, pdf_file: null as File | null, }); function submit(e: React.FormEvent) { e.preventDefault(); if (isEdit) { form.patch(`/instructor/courses/${course.slug}/lessons/${lesson.id}`); } else { form.post(`/instructor/courses/${course.slug}/chapters/${chapter.id}/lessons`); } } return ( <>
{/* Back */} Kembali ke {course.title}
{/* ── Main form ── */}
{/* Title */}
form.setData('title', e.target.value)} placeholder="Judul materi..." className="text-base" required autoFocus />
{/* Type + duration row */}
form.setData('duration_minutes', Number(e.target.value))} placeholder="0" />
{/* Video URL */} {form.data.type === 'video' && (
form.setData('video_url', e.target.value)} placeholder="https://youtube.com/watch?v=... atau https://vimeo.com/..." /> {form.data.video_url && (

Preview video akan ditampilkan saat siswa membuka materi.

)}
)} {/* PDF: toggle upload / link */} {form.data.type === 'pdf' && (
{/* Toggle */}
{pdfSource === 'link' ? (
form.setData('video_url', e.target.value)} placeholder="https://drive.google.com/file/d/..." />
) : (
{/* Existing file in edit mode */} {isEdit && lesson.file_path && !form.data.pdf_file && (
File saat ini: Lihat PDF
)}
)}
)} {/* Rich text editor */} {form.data.type === 'text' && (
form.setData('content', val)} placeholder="Tulis materi di sini... Gunakan toolbar untuk format teks, sisipkan gambar, video, atau PDF." minHeight={400} />
)}
{form.wasSuccessful && Tersimpan!}
{/* ── Sidebar ── */}
{/* Info card */}

Info Materi

Kelas {course.title}
Chapter {chapter.title}
Tipe {form.data.type === 'video' ? 'Video' : form.data.type === 'text' ? 'Teks / Artikel' : 'PDF'}
); } LessonEditor.layout = (page: React.ReactNode) => {page};