import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { fetchAppShareMeta } from '../api';
import { AppRunner } from '../components/spaces/AppRunner';
import { createPublicAppGateway } from '../components/spaces/app-file-gateway';

/**
 * SharedAppView — 公開アプリ実行ページ（/ui/app/:token・認証不要・read-only）。
 *
 * トークンから (spaceId, appName) を解決する公開 API のメタを取得し、read-only の
 * 公開 gateway を注入した AppRunner を全画面で表示する。書き込み・削除は gateway に
 * メソッドが無いので不可（サーバ側も GET のみ）。失効/不正トークン・entryPath が
 * 取れないアプリは専用 404 画面（SharedView の notFound と同トーン）を出す。
 */
export function SharedAppView({ token }: { token: string }) {
  const { t } = useTranslation('shared');
  const metaQuery = useQuery({
    queryKey: ['app-share-meta', token],
    queryFn: () => fetchAppShareMeta(token),
    retry: false,
  });

  if (metaQuery.isLoading) {
    return (
      <div className="h-dvh flex items-center justify-center bg-surface">
        <div className="w-7 h-7 border-2 border-accent border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  const meta = metaQuery.data;
  // 失効/不正トークン（fetch throw）、または entry HTML が見つからないアプリ（空 apps/
  // フォルダ等）は公開アクセス不可として 404 トーンを出す。
  if (metaQuery.isError || !meta || !meta.entryPath) {
    return (
      <div className="h-dvh flex items-center justify-center bg-surface px-6">
        <div className="text-center max-w-sm">
          <div className="text-4xl mb-3" aria-hidden="true">🔒</div>
          <div className="text-sm font-bold text-slate-900 mb-1.5">{t('appNotFoundTitle')}</div>
          <div className="text-[13px] text-slate-500 leading-relaxed">
            {t('appNotFoundBody')}
          </div>
        </div>
      </div>
    );
  }

  return (
    <AppRunner
      gateway={createPublicAppGateway(token)}
      appName={meta.appName}
      entryPath={meta.entryPath}
      canWrite={false}
      // 全画面の公開ページなので「閉じる」は履歴を戻すだけ。戻り先が無ければ no-op。
      onClose={() => {
        if (window.history.length > 1) window.history.back();
      }}
    />
  );
}
