import { auth } from "@/lib/auth";
import prisma from "@/lib/prisma";
import { redirect } from "next/navigation";
import MarkAllReadButton from "./MarkAllReadButton";
import NotificationRow from "./NotificationRow";

export const metadata = { title: "Notifications", robots: { index: false, follow: false } };

export default async function NotificationsPage() {
  const session = await auth();
  if (!session?.user) redirect("/login");

  const userId = parseInt(session.user.id);

  let notifications: Awaited<ReturnType<typeof prisma.notification.findMany>> = [];
  try {
    notifications = await prisma.notification.findMany({
      where: { user_id: userId },
      orderBy: { created_at: "desc" },
      take: 50,
    });
  } catch (error) {
    console.error("Notifications query error:", error);
  }

  const unreadCount = notifications.filter((n) => !n.is_read).length;

  return (
    <div className="max-w-3xl mx-auto space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">Notifications</h1>
        <div className="flex items-center gap-3">
          {unreadCount > 0 && (
            <>
              <span className="bg-primary text-white text-sm px-3 py-1 rounded-full">
                {unreadCount} unread
              </span>
              <MarkAllReadButton />
            </>
          )}
        </div>
      </div>

      <div className="space-y-2">
        {notifications.map((notification) => (
          <NotificationRow
            key={notification.id}
            id={notification.id}
            content={notification.content}
            link={notification.link}
            isRead={notification.is_read}
            createdAt={notification.created_at.toISOString()}
          />
        ))}
      </div>

      {notifications.length === 0 && (
        <div className="text-center py-16 text-text-muted">
          <svg className="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
          <p className="text-lg text-text">No notifications</p>
          <p className="mt-1">You&apos;re all caught up.</p>
          <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
            <a
              href="/escorts"
              className="inline-flex items-center gap-2 bg-primary hover:bg-primary-dark text-white font-semibold px-5 py-2.5 rounded-lg transition-colors"
            >
              Browse escorts
            </a>
            <a
              href="/settings/notifications"
              className="inline-flex items-center gap-2 bg-surface-light hover:bg-surface text-text px-5 py-2.5 rounded-lg transition-colors"
            >
              Notification settings
            </a>
          </div>
        </div>
      )}
    </div>
  );
}