import { prisma } from "@/lib/prisma";
import { updateNotificationSettings } from "@/lib/actions/settings";
import { SITE } from "@/lib/site";
import SettingsTabs from "@/components/admin/SettingsTabs";

export default async function AdminNotificationSettingsPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const settings = await prisma.notificationSettings.findFirst();
  const { error } = await searchParams;

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Notifications</h1>
      <p className="mt-1 text-sm text-stone-500">
        Real email alerts sent through your Resend connection — not a placeholder.
      </p>

      <SettingsTabs active="/iv-manage-84x2/settings/notifications" />

      {error && <p className="mt-4 mb-4 rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">{decodeURIComponent(error)}</p>}

      <form action={updateNotificationSettings} className="max-w-xl space-y-4 rounded-lg border border-rose-100 bg-white p-4">
        <label className="block text-xs text-stone-500">
          Send alerts to
          <input
            type="email"
            name="notifyEmail"
            defaultValue={settings?.notifyEmail ?? SITE.email}
            className="mt-1 block w-full rounded-md border border-stone-300 px-2 py-2 text-sm"
          />
        </label>
        <label className="flex items-start gap-3">
          <input
            type="checkbox"
            name="notifyOnNewOrder"
            defaultChecked={settings?.notifyOnNewOrder ?? true}
            className="mt-0.5 h-4 w-4 rounded border-stone-300"
          />
          <span>
            <span className="block text-sm font-medium text-stone-700">Email me when a new order is paid</span>
            <span className="block text-xs text-stone-500">Sent right after payment is verified — order number, customer, and amount.</span>
          </span>
        </label>
        <label className="flex items-start gap-3">
          <input
            type="checkbox"
            name="notifyOnNewTicket"
            defaultChecked={settings?.notifyOnNewTicket ?? true}
            className="mt-0.5 h-4 w-4 rounded border-stone-300"
          />
          <span>
            <span className="block text-sm font-medium text-stone-700">Email me when a new support ticket comes in</span>
            <span className="block text-xs text-stone-500">From the contact form or a customer&apos;s account.</span>
          </span>
        </label>
        <button type="submit" className="rounded-md bg-rose-700 px-4 py-2 text-sm font-semibold text-white hover:bg-rose-800">
          Save
        </button>
      </form>
    </div>
  );
}