spsays-training/app/(app)/settings/chat/page.tsx

"use client";

/**
 * /settings/chat — chat preferences.
 *
 * Each control saves on change rather than behind a Save button: these are
 * independent switches, and a half-applied form is worse than an immediate
 * write that can be toggled back.
 */

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { toast } from "sonner";
import { SettingsShell, Section } from "@/components/settings/settings-ui";
import { SettingRow, ToggleSwitch } from "@/components/settings/setting-row";
import { chat, type ChatSettings } from "@/lib/chat";
import { cn } from "@/lib/utils";

const AGE_CHOICES = [1, 3, 6, 12] as const;

export default function ChatSettingsPage() {
  const [settings, setSettings] = useState<ChatSettings | null>(null);
  const [state, setState] = useState<"loading" | "ready" | "error">("loading");
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    let cancelled = false;
    chat
      .settings()
      .then((s) => {
        if (cancelled) return;
        setSettings(s);
        setState("ready");
      })
      .catch(() => !cancelled && setState("error"));
    return () => {
      cancelled = true;
    };
  }, []);

  const save = useCallback(
    async (patch: Partial<Omit<ChatSettings, "gender_set">>) => {
      setBusy(true);
      try {
        setSettings(await chat.updateSettings(patch));
      } catch (err) {
        // The BFF explains *why* — notably "add your gender in profile
        // settings" — so surface its message rather than a generic failure.
        toast.error(
          err instanceof Error && err.message
            ? err.message
            : "Could not save that setting",
        );
      } finally {
        setBusy(false);
      }
    },
    [],
  );

  return (
    <SettingsShell
      backHref="/settings"
      backLabel="Back to settings"
      title="Chat"
    >
      {state === "error" ? (
        <p className="text-sm text-destructive">
          Could not load your chat settings.
        </p>
      ) : state === "loading" || !settings ? (
        <p className="text-sm text-muted-foreground">Loading…</p>
      ) : (
        <div className="space-y-8">
          <Section
            title="Read receipts"
            description="If you turn these off, you won't see when others have read your messages either."
          >
            <SettingRow
              label="Send read receipts"
              description="People you chat with can see when you've read their messages. Delivery ticks are unaffected."
              control={
                <ToggleSwitch
                  label="Send read receipts"
                  checked={settings.read_receipts}
                  disabled={busy}
                  onToggle={() =>
                    save({ read_receipts: !settings.read_receipts })
                  }
                />
              }
            />
          </Section>

          <Section
            title="Who can message you"
            description="This applies to new conversations. People you're already chatting with can still reach you."
          >
            <div className="space-y-2">
              <Choice
                active={settings.who_can_message === "anyone"}
                disabled={busy}
                onClick={() => save({ who_can_message: "anyone" })}
                title="Anyone"
                description="No restriction."
              />
              <Choice
                active={settings.who_can_message === "friends"}
                disabled={busy}
                onClick={() => save({ who_can_message: "friends" })}
                title="Your friends"
                description="Only people you follow, or who follow you."
              />
              <Choice
                active={settings.who_can_message === "account_age"}
                disabled={busy}
                onClick={() => save({ who_can_message: "account_age" })}
                title="Established accounts"
                description="Only accounts older than a chosen age."
              >
                {settings.who_can_message === "account_age" && (
                  <div className="mt-3 flex flex-wrap gap-2">
                    {AGE_CHOICES.map((months) => (
                      <button
                        key={months}
                        type="button"
                        disabled={busy}
                        onClick={(e) => {
                          e.stopPropagation();
                          void save({ min_account_age_months: months });
                        }}
                        className={cn(
                          "rounded-full border px-3 py-1 text-xs transition-colors",
                          settings.min_account_age_months === months
                            ? "border-primary bg-primary/10 text-primary"
                            : "border-border text-muted-foreground hover:text-foreground",
                        )}
                      >
                        {months} {months === 1 ? "month" : "months"}
                      </button>
                    ))}
                  </div>
                )}
              </Choice>
              <Choice
                active={settings.who_can_message === "same_gender"}
                disabled={busy || !settings.gender_set}
                onClick={() => save({ who_can_message: "same_gender" })}
                title="Only accounts of your gender"
                description={
                  settings.gender_set
                    ? "Only accounts whose gender matches yours."
                    : undefined
                }
              >
                {!settings.gender_set && (
                  <p className="mt-1 text-xs text-muted-foreground">
                    Add your gender in{" "}
                    <Link
                      href="/settings/profile"
                      className="underline underline-offset-2 hover:text-foreground"
                    >
                      profile settings
                    </Link>{" "}
                    to use this option.
                  </p>
                )}
              </Choice>
            </div>
          </Section>

          <Section
            title="Kautilya"
            description="Kautilya is the AI study companion, tuned on Śrīla Prabhupāda's books, letters, and lectures."
          >
            <SettingRow
              label="Use your chats to train Kautilya"
              description="Your conversations may help improve the assistant's answers. Turning this off excludes them."
              control={
                <ToggleSwitch
                  label="Use your chats to train Kautilya"
                  checked={settings.train_kautilya}
                  disabled={busy}
                  onToggle={() =>
                    save({ train_kautilya: !settings.train_kautilya })
                  }
                />
              }
            />
          </Section>
        </div>
      )}
    </SettingsShell>
  );
}

function Choice({
  active,
  disabled,
  onClick,
  title,
  description,
  children,
}: {
  active: boolean;
  disabled?: boolean;
  onClick: () => void;
  title: string;
  description?: string;
  children?: React.ReactNode;
}) {
  return (
    <div
      className={cn(
        "rounded-xl border p-3 transition-colors",
        active ? "border-primary bg-primary/5" : "border-border",
        disabled && !active && "opacity-60",
      )}
    >
      <button
        type="button"
        role="radio"
        aria-checked={active}
        disabled={disabled}
        onClick={onClick}
        className="w-full text-left disabled:cursor-default"
      >
        <span className="block text-sm font-medium text-foreground">
          {title}
        </span>
        {description && (
          <span className="block text-xs text-muted-foreground">
            {description}
          </span>
        )}
      </button>
      {children}
    </div>
  );
}