import { createFileRoute } from "@tanstack/react-router";
import { getCategoryPrefs, getNotificationSettings, updateNotificationSettings } from "~/fns/notification-settings";
import { NotificationCategoriesPanel } from "~/components/settings/NotificationCategoriesPanel";
import { getSecuritySettings } from "~/fns/account-security";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { CheckboxField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Panel } from "~/ui/Panel";

export const Route = createFileRoute("/settings/notifications")({
  loader: async () => {
    const [settings, security, categories] = await Promise.all([
      getNotificationSettings(),
      getSecuritySettings(),
      getCategoryPrefs(),
    ]);
    const primary = security.emails.find((entry) => entry.primary);
    if (!primary) throw new Error("Account has no primary email");
    return { settings, categories, emailVerified: primary.verified, email: primary.email };
  },
  head: () => ({ meta: [{ title: "Notification settings · gitfor" }] }),
  component: NotificationSettingsPage,
});

function NotificationSettingsPage() {
  const { settings, categories, emailVerified, email } = Route.useLoaderData();
  const save = useAction(updateNotificationSettings);

  return (
    <div className="space-y-8">
      <form
        className="space-y-6"
        onSubmit={(event) => {
          event.preventDefault();
          const form = new FormData(event.currentTarget);
          save.run({
            data: {
              emailParticipating: form.has("emailParticipating"),
              emailWatching: form.has("emailWatching"),
              webParticipating: form.has("webParticipating"),
              webWatching: form.has("webWatching"),
            },
          });
        }}
      >
        <ErrorBanner message={save.error} />
        <Panel title="Participating and @mentions">
          <div className="space-y-3 p-4">
            <p className="text-sm text-kumo-subtle">
              Threads you opened, commented on, were assigned to or were mentioned in.
            </p>
            <CheckboxField label="On the web" name="webParticipating" defaultChecked={settings.webParticipating} />
            <CheckboxField
              label="By email"
              name="emailParticipating"
              defaultChecked={settings.emailParticipating}
              hint={emailVerified ? `Sent to ${email}` : "Verify your email address to receive email"}
            />
          </div>
        </Panel>
        <Panel title="Watching">
          <div className="space-y-3 p-4">
            <p className="text-sm text-kumo-subtle">
              Activity in repositories you watch. Pick a watch level (all, releases only, ignore) from each repository's
              Watch menu.
            </p>
            <CheckboxField label="On the web" name="webWatching" defaultChecked={settings.webWatching} />
            <CheckboxField label="By email" name="emailWatching" defaultChecked={settings.emailWatching} />
          </div>
        </Panel>
        <Button type="submit" variant="primary" pending={save.pending}>
          Save notification settings
        </Button>
      </form>
      <NotificationCategoriesPanel prefs={categories} />
    </div>
  );
}