tessera-ctl/apps/web/src/components/custom-modules/custom-module-form-modal.tsx

'use client';

import { CUSTOM_MODULE_CATEGORIES, CUSTOM_MODULE_CATEGORY } from '@tessera/shared';
import { useTranslations } from 'next-intl';
import { useState } from 'react';
import {
  type CustomModule,
  CustomModuleRequestError,
  checkCustomModuleUrl,
  createCustomModule,
  updateCustomModule,
} from '@/lib/custom-modules-api';
import { useCustomModuleCacheStore } from '@/lib/stores/custom-module-cache-store';
import { useCategoryLabel } from '@/lib/use-category-label';

interface CustomModuleFormModalProps {
  /** `null` = neues Modul anlegen, sonst bearbeiten. */
  mod: CustomModule | null;
  /**
   * Beim Anlegen: `true` = gemeinsamer Eintrag fuer alle Benutzer (Verwaltung),
   * sonst persoenlicher Eintrag (Einstellungen). Beim Bearbeiten ohne Wirkung —
   * ob ein Eintrag gemeinsam ist, aendert sich nie.
   */
  shared?: boolean;
  onClose: () => void;
  onSaved: () => void;
}

const NAME_MAX = 100;
const URL_MAX = 2048;

/**
 * Fehlertext fuer Speichern und Loeschen: 403 = keine Berechtigung, 400 = die
 * API hat die Angaben abgelehnt (mit ihrer Meldung), alles andere (500,
 * Netzwerk) = der allgemeine „bitte erneut versuchen“-Text `fallbackKey`.
 */
export function customModuleErrorText(
  err: unknown,
  t: (key: string, values?: Record<string, string>) => string,
  fallbackKey: 'saveError' | 'deleteError',
): string {
  if (err instanceof CustomModuleRequestError) {
    if (err.status === 403) return t('forbidden');
    if (err.status === 400) return t('invalidInput');
  }
  return t(fallbackKey);
}

/**
 * Formular „Eigenes Modul“ (quick-260929-9wc, Vorbild `GroupFormModal`;
 * quick-260929-dzu: ein Formular, zwei Aufrufer — Verwaltung legt gemeinsame,
 * Einstellungen persoenliche Eintraege an).
 * Die Adresse wird VOR dem Senden geprueft (`checkCustomModuleUrl`, dieselbe
 * Regel wie die API): nur https, keine Zugangsdaten. `noValidate`, damit die
 * eigenen, uebersetzten Meldungen erscheinen statt der des Browsers.
 */
export function CustomModuleFormModal({
  mod,
  shared = false,
  onClose,
  onSaved,
}: CustomModuleFormModalProps) {
  const t = useTranslations('customModules.form');
  const tCommon = useTranslations('common');
  const categoryLabel = useCategoryLabel();

  const [name, setName] = useState(mod?.name ?? '');
  const [url, setUrl] = useState(mod?.url ?? '');
  // Neue Eintraege landen vorbelegt in der Gruppe „Eigene Module“; beim
  // Bearbeiten bleibt die gespeicherte Kategorie.
  const [category, setCategory] = useState<string>(mod?.category ?? CUSTOM_MODULE_CATEGORY);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);

    const trimmedName = name.trim();
    if (trimmedName === '') {
      setError(t('nameRequired'));
      return;
    }
    const trimmedUrl = url.trim();
    const check = checkCustomModuleUrl(trimmedUrl);
    if (check === 'notHttps') {
      setError(t('urlNotHttps'));
      return;
    }
    if (check === 'credentials') {
      setError(t('urlCredentials'));
      return;
    }

    setSaving(true);
    try {
      const input = { name: trimmedName, url: trimmedUrl, category };
      if (mod) {
        await updateCustomModule(mod.id, input);
        // Sitzungsspeicher der offen gehaltenen Module nachziehen — nur wenn
        // das Modul dort schon liegt; eine neue Adresse laedt dessen <iframe> um.
        const cache = useCustomModuleCacheStore.getState();
        if (cache.modules[mod.id]) cache.remember({ id: mod.id, name: input.name, url: input.url });
      } else {
        await createCustomModule(shared ? { ...input, shared: true } : input);
      }
      onSaved();
      onClose();
    } catch (err) {
      setError(customModuleErrorText(err, t, 'saveError'));
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby="custom-module-form-title"
        className="w-full max-w-md rounded-lg bg-card p-6 shadow-lg dark:border dark:border-border"
      >
        <h2 id="custom-module-form-title" className="mb-4 text-lg font-semibold text-foreground">
          {mod ? t('edit') : t('create')}
        </h2>
        <form onSubmit={handleSubmit} noValidate className="space-y-4">
          <div className="space-y-2">
            <label htmlFor="custom-module-name" className="text-sm font-medium text-foreground">
              {t('name')}
            </label>
            <input
              id="custom-module-name"
              type="text"
              required
              maxLength={NAME_MAX}
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
            />
          </div>

          <div className="space-y-2">
            <label htmlFor="custom-module-url" className="text-sm font-medium text-foreground">
              {t('url')}
            </label>
            <input
              id="custom-module-url"
              type="url"
              required
              maxLength={URL_MAX}
              placeholder="https://…"
              value={url}
              onChange={(e) => setUrl(e.target.value)}
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
            />
            <p className="text-xs text-muted-foreground">{t('urlHint')}</p>
          </div>

          <div className="space-y-2">
            <label htmlFor="custom-module-category" className="text-sm font-medium text-foreground">
              {t('category')}
            </label>
            <select
              id="custom-module-category"
              value={category}
              onChange={(e) => setCategory(e.target.value)}
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
            >
              {CUSTOM_MODULE_CATEGORIES.map((c) => (
                <option key={c} value={c}>
                  {categoryLabel(c)}
                </option>
              ))}
            </select>
          </div>

          {error && (
            <div
              role="alert"
              className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive"
            >
              {error}
            </div>
          )}

          <div className="flex justify-end gap-3 pt-2">
            <button type="button" onClick={onClose} className="btn btn-secondary">
              {tCommon('cancel')}
            </button>
            <button type="submit" disabled={saving} className="btn btn-primary">
              {saving ? tCommon('loading') : tCommon('save')}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}