import type { Metadata } from "next";
import { redirect } from "next/navigation";
import { auth } from "@/auth";
import { TopNav } from "@/components/navigation/top-nav";
import { NotificationChannel, NotificationType } from "@/generated/prisma/enums";
import { prisma } from "@/lib/db/prisma";
import { getNotificationPreferences } from "@/services/notifications/notification.service";
import { NotificationPreferencesForm } from "@/features/staff/components/notification-preferences-form";
import type { PreferenceCellState } from "@/features/staff/components/notification-preferences-form";
import { PushSubscribeToggle } from "@/features/notifications/components/push-subscribe-toggle";
import { saveCustomerNotificationPreferencesAction } from "@/features/notifications/actions/preferences";

export const metadata: Metadata = { title: "Notifications" };
export const dynamic = "force-dynamic";

const REMINDER_CHANNELS: NotificationChannel[] = [NotificationChannel.EMAIL, NotificationChannel.PUSH];

export default async function CustomerNotificationSettingsPage() {
  const session = await auth();
  if (!session?.user) redirect("/sign-in?callbackUrl=/settings/notifications");

  const rows = await getNotificationPreferences(prisma, session.user.id);
  const cells: PreferenceCellState[] = REMINDER_CHANNELS.map((channel) => ({
    channel,
    isEnabled:
      rows.find((r) => r.type === NotificationType.BOOKING_REMINDER && r.channel === channel)?.isEnabled ?? true,
  }));

  return (
    <div className="pb-12">
      <TopNav title="Notifications" onBack sticky className="bg-stone" />
      <main className="mx-auto max-w-2xl space-y-6 px-6 py-6">
        <NotificationPreferencesForm initial={cells} action={saveCustomerNotificationPreferencesAction} />
        <div className="rounded-jumbo border-line border bg-white p-5">
          <h2 className="mb-3 text-sm font-bold">Push Notifications</h2>
          <PushSubscribeToggle />
        </div>
      </main>
    </div>
  );
}