import { requireUser } from '@/lib/session';
import { PageContainer } from '@/components/PageContainer';
import { NotificationPreferencesForm } from '@/components/NotificationPreferencesForm';
import { PushNotificationToggle } from '@/components/PushNotificationToggle';

export default async function SettingsPage() {
  const user = await requireUser();

  return (
    <PageContainer>
      <h1 className="text-2xl font-bold text-gray-900">Settings</h1>

      <div className="mt-6 flex max-w-md flex-col gap-6">
        <div className="rounded-lg border bg-white p-6">
          <h2 className="font-semibold text-gray-900">Email notifications</h2>
          <p className="mt-1 text-sm text-gray-500">
            Choose which emails you get as a host. This applies to events you host directly - not
            ones you're co-hosting.
          </p>
          <div className="mt-4">
            <NotificationPreferencesForm
              notifyOnRsvp={user.notifyOnRsvp}
              notifyOnComment={user.notifyOnComment}
              notifyOnCoHostAccepted={user.notifyOnCoHostAccepted}
            />
          </div>
        </div>

        <div className="rounded-lg border bg-white p-6">
          <h2 className="font-semibold text-gray-900">Browser push notifications</h2>
          <div className="mt-4">
            <PushNotificationToggle />
          </div>
        </div>
      </div>
    </PageContainer>
  );
}