import {redirect} from "next/navigation";
import {auth} from "@/auth";
import {prisma} from "@/lib/db/prisma";
import {Card, CardContent} from "@/components/ui/card";
import {Bell, CheckCircle2} from "lucide-react";

type NotificationsPageProps = {
  params: Promise<{locale: string}>;
};

export default async function NotificationsPage({params}: NotificationsPageProps) {
  const {locale} = await params;
  const session = await auth();

  if (!session?.user?.id) {
    redirect(`/${locale}/auth/sign-in`);
  }

  const notifications = await prisma.notification.findMany({
    where: {userId: session.user.id},
    orderBy: {createdAt: "desc"},
    take: 50
  });

  return (
    <div>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-slate-900">Notifications</h1>
        <p className="mt-1 text-slate-500">{notifications.filter((n) => n.status !== "READ").length} unread</p>
      </div>

      {notifications.length === 0 ? (
        <div className="rounded-2xl border border-dashed border-slate-300 py-20 text-center">
          <Bell className="mx-auto h-12 w-12 text-slate-300" />
          <p className="mt-3 text-slate-500">No notifications yet</p>
        </div>
      ) : (
        <div className="space-y-3">
          {notifications.map((notification) => {
            const isRead = notification.status === "READ";
            return (
              <Card key={notification.id} className={`border-slate-200 ${!isRead ? "border-blue-200 bg-blue-50/30" : ""}`}>
                <CardContent className="flex items-start gap-4 p-4">
                  <div className={`mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full ${isRead ? "bg-slate-100" : "bg-blue-100"}`}>
                    {isRead ? (
                      <CheckCircle2 className="h-4 w-4 text-slate-400" />
                    ) : (
                      <Bell className="h-4 w-4 text-blue-600" />
                    )}
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className={`text-sm font-medium ${isRead ? "text-slate-700" : "text-slate-900"}`}>
                      {notification.titleEn}
                    </p>
                    <p className="mt-0.5 text-sm text-slate-500">{notification.messageEn}</p>
                    <p className="mt-1 text-xs text-slate-400">
                      {new Date(notification.createdAt).toLocaleString()}
                    </p>
                  </div>
                  {!isRead && (
                    <div className="mt-1 h-2 w-2 shrink-0 rounded-full bg-blue-600" />
                  )}
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}
    </div>
  );
}