dorfteich/apps/web/src/theme/PondThemeSection.tsx

import { deriveAccentTokens, THEME_PRESETS, type PondTheme } from '@dorfteich/shared';
import { useQueryClient } from '@tanstack/react-query';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

import { FormError } from '../components/forms';
import { apiPatch } from '../lib/api';
import { AccentSwatches } from './AccentSwatches';

/**
 * Pond accent setting (issue #186, ADR 0018 stage C): inherit | preset |
 * custom color, applied to the pond's content via PondThemeScope. Explicit
 * save like the font manager (AppearanceManager); Pond-Admin-gated by the
 * api's PATCH guard. Presets here include the default green — unlike the
 * user setting, picking it PINS the pond to green for every viewer.
 */
export function PondThemeSection({
  pondId,
  pondSlug,
  theme,
}: {
  pondId: string;
  pondSlug: string;
  theme: PondTheme;
}): React.JSX.Element {
  const { t } = useTranslation('font');
  const { t: tSettings } = useTranslation('settings');
  const queryClient = useQueryClient();
  const [accent, setAccent] = useState<string | null>(theme.accent);
  const [status, setStatus] = useState<'idle' | 'saving' | 'saved'>('idle');
  const [error, setError] = useState<unknown>(null);

  const presetHexes = THEME_PRESETS.map((preset) => preset.accent);
  const isCustom = accent !== null && !presetHexes.includes(accent);
  const [customHex, setCustomHex] = useState(isCustom ? accent : '#2f6f4f');

  const choose = (value: string | null): void => {
    setAccent(value);
    setStatus('idle');
  };

  const derivedPair = (hex: string): { light: string; dark: string } => ({
    light: deriveAccentTokens(hex, 'light').accent,
    dark: deriveAccentTokens(hex, 'dark').accent,
  });

  async function save(): Promise<void> {
    setStatus('saving');
    setError(null);
    try {
      await apiPatch(`/ponds/${pondId}`, { theme: { accent } });
      await queryClient.invalidateQueries({ queryKey: ['pond', pondSlug] });
      setStatus('saved');
    } catch (err) {
      setError(err);
      setStatus('idle');
    }
  }

  return (
    <div className="pond-theme">
      <FormError error={error} />
      <fieldset className="settings-fieldset">
        <legend>{t('pondTheme.legend')}</legend>
        <label className="settings-checkbox">
          <input
            type="radio"
            name="pond-theme-accent"
            value=""
            checked={accent === null}
            onChange={() => choose(null)}
          />
          {t('pondTheme.inherit')}
        </label>
        {THEME_PRESETS.map((preset) => (
          <label key={preset.id} className="settings-checkbox">
            <input
              type="radio"
              name="pond-theme-accent"
              value={preset.accent}
              checked={accent === preset.accent}
              onChange={() => choose(preset.accent)}
            />
            {tSettings(`appearance.presets.${preset.id}`)}
            <AccentSwatches {...derivedPair(preset.accent)} />
          </label>
        ))}
        <div className="settings-checkbox">
          <input
            type="radio"
            id="pond-theme-custom"
            name="pond-theme-accent"
            value="custom"
            checked={isCustom}
            onChange={() => choose(customHex)}
          />
          <label htmlFor="pond-theme-custom">{tSettings('appearance.custom')}</label>
          <input
            type="color"
            className="accent-color-input"
            value={isCustom ? accent : customHex}
            aria-label={tSettings('appearance.customPick')}
            onChange={(event) => {
              setCustomHex(event.target.value);
              choose(event.target.value);
            }}
          />
          {isCustom && <AccentSwatches {...derivedPair(accent)} />}
        </div>
      </fieldset>
      <p className="field__hint">{t('pondTheme.hint')}</p>
      <button
        type="button"
        className="button"
        onClick={() => void save()}
        disabled={status === 'saving'}
      >
        {status === 'saved' ? t('pondTheme.saved') : t('pondTheme.save')}
      </button>
    </div>
  );
}