import { requireStaffAuth } from "@/lib/staff-auth";
import SystemMessagesManager from "@/components/staff/SystemMessagesManager";

export const metadata = {
  title: "System Messages - Staff Dashboard",
  description: "Manage system-wide messages",
};

export default async function SystemMessagesPage() {
  const user = await requireStaffAuth();

  if (user.role !== "ADMIN" && user.role !== "SUPER_ADMIN") {
    return <div className="p-8 text-center text-gray-600">Access denied</div>;
  }

  return (
    <div className="space-y-8">
      <div className="relative overflow-hidden rounded-3xl border border-gray-100 bg-white px-6 py-7 shadow-sm sm:px-8">
        <div className="absolute inset-0 bg-gradient-to-br from-indigo-50 via-white to-emerald-50" />
        <div className="absolute -right-14 -top-14 h-28 w-28 rounded-full bg-brand-green/10 blur-2xl" />
        <div className="absolute -left-14 -bottom-16 h-32 w-32 rounded-full bg-indigo-200/40 blur-3xl" />

        <div className="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div className="space-y-2">
            <div className="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">
              <span className="h-1.5 w-1.5 rounded-full bg-brand-green animate-pulse" />
              Broadcast control center
            </div>
            <h1 className="text-3xl font-bold text-brand-ink tracking-tight">
              System Messages
            </h1>
            <p className="text-gray-600 text-lg leading-relaxed">
              Manage site-wide alerts, maintenances, and urgent notices in one
              place.
            </p>
          </div>

          <div className="rounded-2xl border border-gray-200 bg-white px-4 py-3 shadow-inner text-sm text-gray-700">
            <div className="font-semibold text-brand-ink">Roles</div>
            <p className="text-xs text-gray-500">
              Admins &amp; Super Admins only
            </p>
          </div>
        </div>
      </div>

      <SystemMessagesManager user={user} />
    </div>
  );
}
