import { redirect } from "next/navigation";
import Link from "next/link";
import { isAdminSession, getAllPermissions } from "@/lib/adminAuth";
import { getSessionClientId } from "@/lib/auth";
import { connectDB } from "@/lib/db";
import { Notification } from "@/models/Notification";
import { AdminNavLinks } from "@/components/admin/AdminNavLinks";
import { AdminPageHeader } from "@/components/admin/AdminPageHeader";
import { AdminEmptyState } from "@/components/admin/AdminEmptyState";
import { MarkAllReadButton } from "@/components/admin/MarkAllReadButton";
import { formatDateTimeDE } from "@/lib/orderConstants";

export const dynamic = "force-dynamic";

export default async function AdminNotificationsPage() {
  if (!(await isAdminSession())) redirect("/de/login?next=%2Fde%2Fadmin%2Fnotifications");
  const permissions = await getAllPermissions();
  const clientId = (await getSessionClientId()) || "";

  await connectDB();
  const notifications = await Notification.find({ recipientId: clientId }).sort({ createdAt: -1 }).limit(100).lean();
  const unreadCount = notifications.filter((n) => !n.read).length;

  return (
    <main className="px-6 pt-4 pb-24 max-w-3xl mx-auto">
      <AdminNavLinks permissions={permissions} />
      <div className="flex items-center justify-between gap-3 mb-8">
        <AdminPageHeader title="Benachrichtigungen" subtitle={`${notifications.length} insgesamt · ${unreadCount} ungelesen`} />
        {unreadCount > 0 && <MarkAllReadButton />}
      </div>

      {notifications.length === 0 ? (
        <AdminEmptyState message="Noch keine Benachrichtigungen." />
      ) : (
        <div className="flex flex-col gap-2">
          {notifications.map((n) => (
            <Link
              key={String(n._id)}
              href={n.link || "#"}
              className={`flex items-start gap-3 border rounded-xl px-4 py-3 hover:border-white/25 transition-colors ${
                n.read ? "border-white/10" : "border-emerald-400/25 bg-emerald-400/[0.03]"
              }`}
            >
              <span className={`mt-1.5 w-1.5 h-1.5 rounded-full shrink-0 ${n.read ? "bg-transparent" : "bg-emerald-400"}`} />
              <div className="min-w-0">
                <p className="text-sm text-[var(--rk-ink)]">{n.title}</p>
                {n.body && <p className="text-xs text-[var(--rk-ink-muted)] mt-0.5">{n.body}</p>}
                <p className="text-[0.65rem] text-[var(--rk-ink-muted)] mt-1">
                  {formatDateTimeDE(new Date(n.createdAt))}
                </p>
              </div>
            </Link>
          ))}
        </div>
      )}
    </main>
  );
}