import { Form, Head, Link, router, usePage } from '@inertiajs/react'; import { ArrowLeft, Trash2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; import AppLayout from '@/layouts/app-layout'; import type { Auth } from '@/types'; type Reply = { id: number; body: string; created_at: string; user: { id: number; name: string }; }; type Discussion = { id: number; title: string; body: string; is_pinned: boolean; created_at: string; user: { id: number; name: string }; lesson: { title: string } | null; replies: Reply[]; }; type Course = { id: number; title: string; slug: string }; type Props = { course: Course; discussion: Discussion }; function timeAgo(date: string) { const diff = Math.floor((Date.now() - new Date(date).getTime()) / 1000); if (diff < 60) return 'Baru saja'; if (diff < 3600) return `${Math.floor(diff / 60)} mnt lalu`; if (diff < 86400) return `${Math.floor(diff / 3600)} jam lalu`; return `${Math.floor(diff / 86400)} hari lalu`; } export default function DiscussionShow({ course, discussion }: Props) { const { auth } = usePage<{ auth: Auth }>().props; function deleteDiscussion() { if (confirm('Hapus diskusi ini?')) { router.delete(`/courses/${course.slug}/discussions/${discussion.id}`); } } function deleteReply(replyId: number) { if (confirm('Hapus balasan ini?')) { router.delete(`/courses/${course.slug}/discussions/${discussion.id}/replies/${replyId}`); } } return ( <>

Kembali ke Diskusi {/* Main Post */}

{discussion.title}

{discussion.lesson && (

Lesson: {discussion.lesson.title}

)}

{(auth.user.id === discussion.user.id || auth.user.role === 'admin') && ( )}

{discussion.body}

{discussion.user.name} · {timeAgo(discussion.created_at)}

{/* Replies */}

{discussion.replies.length} Balasan

{discussion.replies.map((reply) => (

{reply.user.name[0].toUpperCase()}

{reply.user.name} {timeAgo(reply.created_at)}

{(auth.user.id === reply.user.id || auth.user.role === 'admin') && ( )}

{reply.body}

))}

{/* Reply Form */}