dorfteich/apps/web/src/pages/AdminSettingsPage.tsx

import { useQuery, useQueryClient } from '@tanstack/react-query';
import { docToHtml, markdownToDoc } from '@dorfteich/shared';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';

import { Field, FormError, FormSuccess } from '../components/forms';
import { SettingsLayout } from '../components/SettingsLayout';
import { apiGet, apiPatch } from '../lib/api';
import { PluginManager } from './PluginManager';
import { QuotaManager } from './QuotaManager';
import { UserManager } from './UserManager';

interface InstanceSettings {
  'auth.registrationMode': 'open' | 'closed';
  'instance.name': string;
  'instance.defaultLocale': 'de' | 'en';
  'quota.editorsPerPond': number;
  'quota.readersPerPond': number;
  'quota.additionalPonds': number;
  'quota.storageBytes': number;
  'quota.maxFileBytes': number;
  'api.enabled': boolean;
  'mcp.enabled': boolean;
  'upload.allowedExtensions': string[];
  'upload.svgPolicy': 'reject' | 'sanitize';
  'legal.imprint': string;
  'legal.privacyPolicy': string;
  'home.content': string;
}

export function AdminSettingsPage(): React.JSX.Element {
  const { t } = useTranslation();
  const { t: tQuotas } = useTranslation('quotas');
  const queryClient = useQueryClient();
  const [error, setError] = useState<unknown>(null);
  const [saved, setSaved] = useState(false);

  const settings = useQuery({
    queryKey: ['admin', 'settings'],
    queryFn: () => apiGet<InstanceSettings>('/admin/settings'),
  });

  const form = useForm<InstanceSettings>({ values: settings.data });

  const onSubmit = form.handleSubmit(async (input) => {
    setError(null);
    setSaved(false);
    try {
      await apiPatch('/admin/settings', input);
      await queryClient.invalidateQueries({ queryKey: ['admin', 'settings'] });
      setSaved(true);
    } catch (err) {
      setError(err);
    }
  });

  if (!settings.data) return <h1>{t('settings:admin.title')}</h1>;

  return (
    <>
      <h1>{t('settings:admin.title')}</h1>
      <p>
        <Link to="/admin/system">{t('system:settingsLink')} →</Link>
      </p>
      <SettingsLayout>
        <section className="settings-section">
          <h2>{t('settings:admin.general')}</h2>
          <form onSubmit={onSubmit} noValidate>
            <FormError error={error} />
            <FormSuccess message={saved ? t('settings:admin.saved') : null} />
            <Field label={t('settings:admin.instanceName')}>
              <input type="text" {...form.register('instance.name')} />
            </Field>
            <Field label={t('settings:admin.defaultLocale')}>
              <select {...form.register('instance.defaultLocale')}>
                <option value="de">{t('settings:profile.locales.de')}</option>
                <option value="en">{t('settings:profile.locales.en')}</option>
              </select>
            </Field>
            <Field label={t('settings:admin.registrationMode')}>
              <select {...form.register('auth.registrationMode')}>
                <option value="open">{t('settings:admin.registrationOpen')}</option>
                <option value="closed">{t('settings:admin.registrationClosed')}</option>
              </select>
            </Field>
            <button type="submit" className="button" disabled={form.formState.isSubmitting}>
              {t('settings:admin.save')}
            </button>
          </form>
        </section>

        <section className="settings-section">
          <h2>{tQuotas('defaults.title')}</h2>
          <form onSubmit={onSubmit} noValidate>
            {(
              [
                'quota.editorsPerPond',
                'quota.readersPerPond',
                'quota.additionalPonds',
                'quota.storageBytes',
                'quota.maxFileBytes',
              ] as const
            ).map((key) => (
              <Field key={key} label={tQuotas(`defaults.${SETTING_TO_QUOTA_KEY[key]}`)}>
                <input type="number" min={0} {...form.register(key, { valueAsNumber: true })} />
              </Field>
            ))}
            <button type="submit" className="button" disabled={form.formState.isSubmitting}>
              {tQuotas('defaults.save')}
            </button>
          </form>
        </section>

        <UploadSettingsForm settings={settings.data} />
        <PublicApiSettingsForm settings={settings.data} />
        <LandingSettingsForm settings={settings.data} />
        <LegalSettingsForm settings={settings.data} />

        <PluginManager />
        <QuotaManager />
        <UserManager />
      </SettingsLayout>
    </>
  );
}

/**
 * Upload allowlist + SVG policy (issue #61). The allowlist is an array in the
 * api but edited here as a comma-separated field; images are always allowed
 * and are not part of this list.
 */
function UploadSettingsForm({ settings }: { settings: InstanceSettings }): React.JSX.Element {
  const { t } = useTranslation('files');
  const queryClient = useQueryClient();
  const [extensions, setExtensions] = useState(settings['upload.allowedExtensions'].join(', '));
  const [svgPolicy, setSvgPolicy] = useState(settings['upload.svgPolicy']);
  const [error, setError] = useState<unknown>(null);
  const [saved, setSaved] = useState(false);
  const [busy, setBusy] = useState(false);

  async function onSubmit(event: React.FormEvent): Promise<void> {
    event.preventDefault();
    setError(null);
    setSaved(false);
    setBusy(true);
    try {
      await apiPatch('/admin/settings', {
        'upload.allowedExtensions': extensions
          .split(',')
          .map((e) => e.trim())
          .filter(Boolean),
        'upload.svgPolicy': svgPolicy,
      });
      await queryClient.invalidateQueries({ queryKey: ['admin', 'settings'] });
      setSaved(true);
    } catch (err) {
      setError(err);
    } finally {
      setBusy(false);
    }
  }

  return (
    <section className="settings-section">
      <h2>{t('settings.title')}</h2>
      <form onSubmit={(event) => void onSubmit(event)} noValidate>
        <FormError error={error} />
        <FormSuccess message={saved ? t('settings.save') : null} />
        <Field label={t('settings.allowedExtensions')} hint={t('settings.allowedExtensionsHelp')}>
          <input
            type="text"
            value={extensions}
            onChange={(event) => setExtensions(event.target.value)}
          />
        </Field>
        <Field label={t('settings.svgPolicy')}>
          <select
            value={svgPolicy}
            onChange={(event) => setSvgPolicy(event.target.value as 'reject' | 'sanitize')}
          >
            <option value="sanitize">{t('settings.svgSanitize')}</option>
            <option value="reject">{t('settings.svgReject')}</option>
          </select>
        </Field>
        <button type="submit" className="button" disabled={busy}>
          {t('settings.save')}
        </button>
      </form>
    </section>
  );
}

/**
 * Public REST API master switch (issue #104, default off). Users create
 * their tokens in the user settings; ponds opt in individually.
 */
function PublicApiSettingsForm({ settings }: { settings: InstanceSettings }): React.JSX.Element {
  const { t } = useTranslation('apiTokens');
  const queryClient = useQueryClient();
  const [error, setError] = useState<unknown>(null);
  const [saved, setSaved] = useState(false);

  async function save(patch: Record<string, boolean>): Promise<void> {
    setError(null);
    setSaved(false);
    try {
      await apiPatch('/admin/settings', patch);
      await queryClient.invalidateQueries({ queryKey: ['admin', 'settings'] });
      setSaved(true);
    } catch (err) {
      setError(err);
    }
  }

  return (
    <section className="settings-section">
      <h2>{t('admin.title')}</h2>
      <FormError error={error} />
      <FormSuccess message={saved ? t('admin.saved') : null} />
      <label className="api-opt-in__label">
        <input
          type="checkbox"
          checked={settings['api.enabled']}
          onChange={(event) => void save({ 'api.enabled': event.target.checked })}
        />
        {t('admin.label')}
      </label>
      <p className="api-opt-in__hint">{t('admin.hint')}</p>
      <label className="api-opt-in__label">
        <input
          type="checkbox"
          checked={settings['mcp.enabled']}
          onChange={(event) => void save({ 'mcp.enabled': event.target.checked })}
        />
        {t('admin.mcpLabel')}
      </label>
      <p className="api-opt-in__hint">{t('admin.mcpHint')}</p>
    </section>
  );
}

/**
 * Editable landing page: the Site Admin's Markdown for the public home page
 * (`/`), rendered through the same sanitizing pipeline as the legal pages.
 * Empty falls back to the built-in welcome text.
 */
function LandingSettingsForm({ settings }: { settings: InstanceSettings }): React.JSX.Element {
  const { t } = useTranslation('settings');
  const queryClient = useQueryClient();
  const [content, setContent] = useState(settings['home.content']);
  const [error, setError] = useState<unknown>(null);
  const [saved, setSaved] = useState(false);
  const [busy, setBusy] = useState(false);

  async function onSubmit(event: React.FormEvent): Promise<void> {
    event.preventDefault();
    setError(null);
    setSaved(false);
    setBusy(true);
    try {
      await apiPatch('/admin/settings', { 'home.content': content });
      await queryClient.invalidateQueries({ queryKey: ['admin', 'settings'] });
      await queryClient.invalidateQueries({ queryKey: ['home-content'] });
      setSaved(true);
    } catch (err) {
      setError(err);
    } finally {
      setBusy(false);
    }
  }

  return (
    <section className="settings-section">
      <h2>{t('landing.title')}</h2>
      <p className="field__hint">{t('landing.hint')}</p>
      <form onSubmit={(event) => void onSubmit(event)} noValidate>
        <FormError error={error} />
        <FormSuccess message={saved ? t('landing.saved') : null} />
        <MarkdownTextField
          wrapperClass="markdown-field"
          label={t('landing.label')}
          value={content}
          onChange={setContent}
        />
        <button type="submit" className="button" disabled={busy}>
          {t('landing.save')}
        </button>
      </form>
    </section>
  );
}

/**
 * Legal pages (issue #82): imprint and privacy policy as Markdown, shown
 * publicly at /legal/imprint and /legal/privacy. The preview renders through
 * the same shared pipeline the api uses (markdown → schema doc → HTML), so
 * what the admin sees is what visitors get.
 */
function LegalSettingsForm({ settings }: { settings: InstanceSettings }): React.JSX.Element {
  const { t } = useTranslation('legal');
  const queryClient = useQueryClient();
  const [imprint, setImprint] = useState(settings['legal.imprint']);
  const [privacy, setPrivacy] = useState(settings['legal.privacyPolicy']);
  const [error, setError] = useState<unknown>(null);
  const [saved, setSaved] = useState(false);
  const [busy, setBusy] = useState(false);

  async function onSubmit(event: React.FormEvent): Promise<void> {
    event.preventDefault();
    setError(null);
    setSaved(false);
    setBusy(true);
    try {
      await apiPatch('/admin/settings', {
        'legal.imprint': imprint,
        'legal.privacyPolicy': privacy,
      });
      await queryClient.invalidateQueries({ queryKey: ['admin', 'settings'] });
      await queryClient.invalidateQueries({ queryKey: ['legal'] });
      setSaved(true);
    } catch (err) {
      setError(err);
    } finally {
      setBusy(false);
    }
  }

  return (
    <section className="settings-section">
      <h2>{t('admin.title')}</h2>
      <p className="field__hint">{t('admin.hint')}</p>
      <form onSubmit={(event) => void onSubmit(event)} noValidate>
        <FormError error={error} />
        <FormSuccess message={saved ? t('admin.save') : null} />
        <MarkdownTextField label={t('admin.imprint')} value={imprint} onChange={setImprint} />
        <MarkdownTextField label={t('admin.privacyPolicy')} value={privacy} onChange={setPrivacy} />
        <button type="submit" className="button" disabled={busy}>
          {t('admin.save')}
        </button>
      </form>
    </section>
  );
}

/**
 * One Markdown textarea with a toggleable rendered preview. `wrapperClass`
 * distinguishes instances on the page: the legal editors keep `legal-editor`
 * (the legal e2e selects them by that class and index), the landing editor
 * gets its own so it does not shift those indices.
 */
function MarkdownTextField({
  label,
  value,
  onChange,
  wrapperClass = 'legal-editor',
}: {
  label: string;
  value: string;
  onChange: (value: string) => void;
  wrapperClass?: string;
}): React.JSX.Element {
  const { t } = useTranslation('legal');
  const [preview, setPreview] = useState(false);
  return (
    <div className={wrapperClass}>
      <Field label={label}>
        <textarea
          rows={10}
          value={value}
          onChange={(event) => onChange(event.target.value)}
          spellCheck={false}
        />
      </Field>
      <button type="button" className="linklike" onClick={() => setPreview(!preview)}>
        {preview ? t('admin.hidePreview') : t('admin.preview')}
      </button>
      {preview && (
        // Same sanitizing pipeline as the api's public rendering — safe.
        <div
          className={`${wrapperClass}__preview legal-page__body`}
          dangerouslySetInnerHTML={{ __html: docToHtml(markdownToDoc(value)) }}
        />
      )}
    </div>
  );
}

/** Map the instance-setting key to the shared quota key its label lives under. */
const SETTING_TO_QUOTA_KEY = {
  'quota.editorsPerPond': 'editors_per_pond',
  'quota.readersPerPond': 'readers_per_pond',
  'quota.additionalPonds': 'additional_ponds',
  'quota.storageBytes': 'storage_bytes',
  'quota.maxFileBytes': 'max_file_bytes',
} as const;