import { Head, router, usePage } from '@inertiajs/react'; import { Calendar, CheckCircle, Clock, ExternalLink, Radio, Users, Video } from 'lucide-react'; import { useState } from 'react'; import { Button } from '@/components/ui/button'; import AppLayout from '@/layouts/app-layout'; import type { Auth, BreadcrumbItem } from '@/types'; type LiveClass = { id: number; title: string; description: string | null; scheduled_at: string; duration_minutes: number; meeting_url: string; recording_url: string | null; instructor: { id: number; name: string } | null; course: { id: number; title: string; slug: string } | null; }; type Props = { liveClass: LiveClass; isRegistered: boolean; registrantCount: number }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Live Class', href: '/live-classes' }, { title: 'Detail', href: '#' }, ]; function formatSchedule(dateStr: string) { const d = new Date(dateStr); return { date: d.toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }), time: d.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }), }; } export default function LiveClassShow({ liveClass, isRegistered: initialRegistered, registrantCount: initialCount }: Props) { const { auth } = usePage<{ auth: Auth }>().props; const [registered, setRegistered] = useState(initialRegistered); const [count, setCount] = useState(initialCount); const [loading, setLoading] = useState(false); const { date, time } = formatSchedule(liveClass.scheduled_at); const isPast = new Date(liveClass.scheduled_at) < new Date(); const isStartingSoon = !isPast && new Date(liveClass.scheduled_at).getTime() - Date.now() < 30 * 60 * 1000; function toggleRegister() { if (!auth?.user) { router.visit('/login'); return; } setLoading(true); router.post( `/live-classes/${liveClass.id}/register`, {}, { preserveState: true, onSuccess: () => { setRegistered((prev) => !prev); setCount((prev) => (registered ? prev - 1 : prev + 1)); }, onFinish: () => setLoading(false), }, ); } return ( <>
{/* Header */}

{liveClass.title}

{isStartingSoon && ( Segera Mulai )}
{liveClass.course && (

Bagian dari: {liveClass.course.title}

)}
{date}
{time} WIB ยท {liveClass.duration_minutes} menit
Instruktur: {liveClass.instructor?.name ?? '-'}
{count} peserta terdaftar
{liveClass.description && (

{liveClass.description}

)} {/* Actions */}
{isPast ? ( liveClass.recording_url ? ( ) : (

Rekaman belum tersedia.

) ) : ( <> {registered && ( )} )}
{/* Reminder info for registered users */} {registered && !isPast && (
Kamu sudah terdaftar! Simpan link meeting dan hadir tepat waktu.
)}
); } LiveClassShow.layout = (page: React.ReactNode) => {page};