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

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

import { PLUGIN_INSTANCE_MODES, type PluginInstanceMode, type PluginView } from '@dorfteich/shared';

import { FormError } from '../components/forms';
import { apiDelete, apiGet, apiPatch, apiUploadFile } from '../lib/api';

/**
 * Site Admin plugin administration (issue #72): the installed-plugin list with
 * each plugin's declared permissions surfaced prominently (security.md), an
 * upload dialog that shows validation errors, and the instance-mode switch
 * (disabled / optional / required). Mode changes and installs are audit-logged
 * server-side.
 */
export function PluginManager(): React.JSX.Element {
  const { t } = useTranslation('plugins');
  const queryClient = useQueryClient();
  const fileRef = useRef<HTMLInputElement | null>(null);
  const [uploadError, setUploadError] = useState<unknown>(null);

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

  const invalidate = () => queryClient.invalidateQueries({ queryKey: ['admin', 'plugins'] });

  const install = useMutation({
    mutationFn: (file: File) => apiUploadFile<PluginView>('/admin/plugins', file),
    onSuccess: () => {
      setUploadError(null);
      if (fileRef.current) fileRef.current.value = '';
      void invalidate();
    },
    onError: (error) => setUploadError(error),
  });

  const setMode = useMutation({
    mutationFn: ({ id, mode }: { id: string; mode: PluginInstanceMode }) =>
      apiPatch<PluginView>(`/admin/plugins/${id}/mode`, { mode }),
    onSuccess: () => void invalidate(),
  });

  const uninstall = useMutation({
    mutationFn: (id: string) => apiDelete(`/admin/plugins/${id}`),
    onSuccess: () => void invalidate(),
    onError: (error) => setUploadError(error),
  });

  return (
    <section className="settings-section plugin-manager">
      <h2>{t('admin.title')}</h2>
      <p className="plugin-manager__intro">{t('admin.intro')}</p>

      <div className="plugin-manager__upload">
        <label className="button">
          {t('admin.upload')}
          <input
            ref={fileRef}
            type="file"
            accept=".zip"
            className="plugin-manager__upload-input"
            onChange={(event) => {
              const file = event.target.files?.[0];
              if (file) install.mutate(file);
            }}
          />
        </label>
        <FormError error={uploadError} />
      </div>

      {plugins.data && plugins.data.length === 0 ? <p>{t('admin.empty')}</p> : null}

      <ul className="plugin-manager__list">
        {plugins.data?.map((plugin) => (
          <li key={plugin.id} className="plugin-manager__item" data-plugin-id={plugin.id}>
            <div className="plugin-manager__head">
              <span className="plugin-manager__name">{plugin.name}</span>
              <span className="plugin-manager__version">v{plugin.version}</span>
              <span className="plugin-manager__kind">{plugin.kind}</span>
            </div>

            <div className="plugin-manager__permissions">
              <span>{t('admin.permissions')}:</span>{' '}
              {plugin.permissions.length === 0 ? (
                <em>{t('admin.noPermissions')}</em>
              ) : (
                plugin.permissions.map((permission) => (
                  <code key={permission} className="plugin-manager__permission">
                    {permission}
                  </code>
                ))
              )}
            </div>

            <div className="plugin-manager__controls">
              <label>
                {t('admin.mode')}:{' '}
                <select
                  className="plugin-manager__mode"
                  value={plugin.mode}
                  onChange={(event) =>
                    setMode.mutate({
                      id: plugin.id,
                      mode: event.target.value as PluginInstanceMode,
                    })
                  }
                >
                  {PLUGIN_INSTANCE_MODES.map((mode) => (
                    <option key={mode} value={mode}>
                      {t(`mode.${mode}`)}
                    </option>
                  ))}
                </select>
              </label>
              <span className="plugin-manager__mode-hint">{t(`mode.hint.${plugin.mode}`)}</span>
              <Link className="plugin-manager__preview" to={`/admin/plugins/${plugin.id}/preview`}>
                {t('admin.preview')}
              </Link>
              <button
                type="button"
                className="button button--danger"
                disabled={plugin.mode === 'required'}
                title={plugin.mode === 'required' ? t('admin.requiredLocked') : undefined}
                onClick={() => uninstall.mutate(plugin.id)}
              >
                {t('admin.uninstall')}
              </button>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}