import { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom';

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

import { apiGet } from '../lib/api';
import { PluginFrame } from '../plugins/PluginFrame';

/**
 * Site-Admin preview of one installed plugin (issue #73): mounts each of the
 * plugin's extension points in a real sandbox frame, with the declared
 * permissions listed next to it. Doubles as the surface the plugin security
 * e2e pack drives — the sandbox here is byte-identical to what pages embed.
 */
export function PluginPreviewPage(): React.JSX.Element {
  const { t } = useTranslation('plugins');
  const { pluginId } = useParams<{ pluginId: string }>();
  const [plugins, setPlugins] = useState<PluginView[] | null>(null);
  const [error, setError] = useState(false);

  useEffect(() => {
    let cancelled = false;
    apiGet<PluginView[]>('/admin/plugins')
      .then((list) => {
        if (!cancelled) setPlugins(list);
      })
      .catch(() => {
        if (!cancelled) setError(true);
      });
    return () => {
      cancelled = true;
    };
  }, []);

  const plugin = useMemo(
    () => plugins?.find((entry) => entry.id === pluginId) ?? null,
    [plugins, pluginId],
  );

  if (error) return <p role="alert">{t('preview.loadFailed')}</p>;
  if (!plugins) return <p>{t('preview.loading')}</p>;
  if (!plugin) return <p role="alert">{t('preview.notFound')}</p>;

  return (
    <div className="plugin-preview">
      <h1>
        {t('preview.title', { name: plugin.name })}{' '}
        <span className="plugin-preview__version">v{plugin.version}</span>
      </h1>
      <section>
        <h2>{t('preview.permissions')}</h2>
        {plugin.permissions.length === 0 ? (
          <p>{t('preview.noPermissions')}</p>
        ) : (
          <ul className="plugin-preview__permissions">
            {plugin.permissions.map((permission) => (
              <li key={permission}>
                <code>{permission}</code>
              </li>
            ))}
          </ul>
        )}
      </section>
      {plugin.extensionPoints.map((point) => (
        <section key={point.id} className="plugin-preview__surface">
          <h2>
            {t('preview.surface')} <code>{point.id}</code> ({point.type})
          </h2>
          <PluginFrame plugin={plugin} extensionPointId={point.id} />
        </section>
      ))}
      {plugin.extensionPoints.length === 0 ? <p>{t('preview.noSurfaces')}</p> : null}
    </div>
  );
}