import { Bell, CheckCheck } from "lucide-react";
import Link from "next/link";
import { requireStudent } from "@/lib/auth/session";
import { prisma } from "@/lib/db/prisma";
import { markAllNotificationsRead, markNotificationRead } from "./actions";
import { StudentHeader } from "@/components/student/student-header";

export const dynamic = "force-dynamic";

export default async function NotificationPage() {
  const session = await requireStudent();
  const [notifications, student] = await Promise.all([prisma.notification.findMany({ where: { userId: session.user.id }, orderBy: { createdAt: "desc" }, take: 100 }), prisma.student.findUnique({ where: { userId: session.user.id }, select: { name: true, class: { select: { name: true } } } })]);
  const unread = notifications.filter((item) => !item.readAt).length;
  return <><StudentHeader name={student?.name ?? session.user.name} className={student?.class.name} unread={unread}/><main className="mx-auto min-h-svh max-w-4xl px-5 py-12">
    <header className="flex flex-wrap items-center gap-4"><h1 className="text-3xl font-black">Notifikasi</h1>{unread > 0 && <form action={markAllNotificationsRead} className="ml-auto"><button className="flex items-center gap-2 rounded-xl bg-emerald-500 px-4 py-2 text-sm font-bold text-white"><CheckCheck className="size-4"/>Tandai semua dibaca</button></form>}</header>
    <section className="mt-8 space-y-3">
      {notifications.map((item) => <article key={item.id} className={`rounded-2xl border p-5 ${item.readAt ? "bg-white dark:bg-slate-900" : "border-emerald-300 bg-emerald-50 dark:border-emerald-800 dark:bg-emerald-950/30"}`}>
        <div className="flex gap-4"><Bell className="mt-1 size-5 shrink-0 text-emerald-500"/><div className="min-w-0 flex-1"><p className="text-xs font-bold uppercase text-emerald-600">{item.type}</p><h2 className="mt-1 font-bold">{item.title}</h2>{item.message && <p className="mt-2 text-sm text-slate-500">{item.message}</p>}<p className="mt-3 text-xs text-slate-400">{new Intl.DateTimeFormat("id-ID", { dateStyle: "long", timeStyle: "short" }).format(item.createdAt)}</p></div></div>
        <div className="mt-4 flex justify-end gap-3">{item.href && <Link href={item.href} className="text-sm font-bold text-emerald-600">Buka</Link>}{!item.readAt && <form action={markNotificationRead}><input type="hidden" name="id" value={item.id}/><button className="text-sm font-bold text-slate-600 dark:text-slate-300">Tandai dibaca</button></form>}</div>
      </article>)}
      {!notifications.length && <p className="rounded-2xl border border-dashed py-14 text-center text-slate-500">Belum ada notifikasi.</p>}
    </section>
  </main></>;
}