Genarrative/apps/admin-web/src/pages/AdminGameDistributionReviewPage.tsx

import {
  AdminActionRow,
  AdminAlert,
  AdminButton,
  AdminListPanel,
  AdminPage,
  AdminPageHeading,
  formatAdminDateTime,
  Modal,
  TextField,
} from '@genarrative/shared/components';
import { RefreshCcw } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';

import {
  listAdminGameDistributionReviews,
  reviewAdminGameDistributionVersion,
  suspendAdminGameDistributionGame,
} from '../api/adminApiClient';
import type { AdminGameDistributionReviewEntry } from '../api/adminApiTypes';
import { useAdminWriteConfirm } from '../components/useAdminWriteConfirm';
import { handlePageError } from './pageUtils';

interface AdminGameDistributionReviewPageProps {
  token: string;
  onUnauthorized: (message?: string) => void;
}

interface ReviewReasonPrompt {
  decision: 'reject' | 'suspend';
  entry: AdminGameDistributionReviewEntry;
}

function formatBytes(value: number) {
  if (value >= 1024 * 1024) {
    return `${(value / (1024 * 1024)).toFixed(1)} MiB`;
  }
  if (value >= 1024) {
    return `${(value / 1024).toFixed(1)} KiB`;
  }
  return `${value} B`;
}

function createSuspendIdempotencyKey(gameId: string) {
  const random =
    typeof crypto !== 'undefined' && 'randomUUID' in crypto
      ? crypto.randomUUID()
      : `${Date.now()}-${Math.random().toString(16).slice(2)}`;
  return `game-suspend-${gameId}-${random}`.slice(0, 128);
}

function createReviewIdempotencyKey(versionId: string) {
  const random =
    typeof crypto !== 'undefined' && 'randomUUID' in crypto
      ? crypto.randomUUID()
      : `${Date.now()}-${Math.random().toString(16).slice(2)}`;
  return `game-review-${versionId}-${random}`.slice(0, 128);
}

export function AdminGameDistributionReviewPage({
  token,
  onUnauthorized,
}: AdminGameDistributionReviewPageProps) {
  const [entries, setEntries] = useState<AdminGameDistributionReviewEntry[]>(
    [],
  );
  const [isLoading, setIsLoading] = useState(false);
  const [busyVersionId, setBusyVersionId] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const [statusMessage, setStatusMessage] = useState('');
  const [reasonPrompt, setReasonPrompt] = useState<ReviewReasonPrompt | null>(
    null,
  );
  const [reasonDraft, setReasonDraft] = useState('');
  const [reasonError, setReasonError] = useState('');
  const [busyGameId, setBusyGameId] = useState('');
  const writeConfirm = useAdminWriteConfirm();

  const loadReviews = useCallback(async () => {
    setIsLoading(true);
    setErrorMessage('');
    try {
      const response = await listAdminGameDistributionReviews(token);
      setEntries(response.entries);
    } catch (error) {
      handlePageError(error, onUnauthorized, setErrorMessage);
    } finally {
      setIsLoading(false);
    }
  }, [token, onUnauthorized]);

  useEffect(() => {
    void loadReviews();
  }, [loadReviews]);

  async function submitReview(
    entry: AdminGameDistributionReviewEntry,
    decision: 'approve' | 'reject',
    reason = '',
  ) {
    const trimmedReason = reason.trim();
    if (decision === 'reject' && !trimmedReason) {
      setErrorMessage('拒绝审核必须填写理由');
      return;
    }
    setBusyVersionId(entry.versionId);
    setErrorMessage('');
    setStatusMessage('');
    try {
      await reviewAdminGameDistributionVersion(
        token,
        entry.versionId,
        createReviewIdempotencyKey(entry.versionId),
        decision === 'approve'
          ? {
              decision,
              expectedPublicationRevision: entry.publicationRevision,
            }
          : {
              decision,
              expectedPublicationRevision: entry.publicationRevision,
              reviewReason: trimmedReason,
            },
      );
      setStatusMessage(
        decision === 'approve'
          ? `版本 v${entry.versionNumber} 已通过审核`
          : `版本 v${entry.versionNumber} 已拒绝`,
      );
      await loadReviews();
    } catch (error) {
      handlePageError(error, onUnauthorized, setErrorMessage);
    } finally {
      setBusyVersionId('');
    }
  }

  /**
   * 管理员安全下架：先二次确认，再带当前公开修订号调用后端；并发审核导致修订号变化时
   * 由服务端返回冲突，前端只提示刷新，不静默重试。
   */
  async function suspendGame(
    entry: AdminGameDistributionReviewEntry,
    reason: string,
  ) {
    const trimmedReason = reason.trim();
    const confirmed = await writeConfirm.confirmWrite({
      action: '安全下架游戏',
      target: `${entry.gameId}（版本 v${entry.versionNumber}）`,
    });
    if (!confirmed) return;
    setBusyGameId(entry.gameId);
    setErrorMessage('');
    setStatusMessage('');
    try {
      await suspendAdminGameDistributionGame(
        token,
        entry.gameId,
        createSuspendIdempotencyKey(entry.gameId),
        {
          expectedPublicationRevision: entry.publicationRevision,
          ...(trimmedReason ? { reason: trimmedReason } : {}),
        },
      );
      setStatusMessage(`游戏 ${entry.gameId} 已安全下架，发行入口已关闭`);
      await loadReviews();
    } catch (error) {
      handlePageError(error, onUnauthorized, setErrorMessage);
    } finally {
      setBusyGameId('');
    }
  }

  function openReasonPrompt(
    entry: AdminGameDistributionReviewEntry,
    decision: ReviewReasonPrompt['decision'],
  ) {
    setReasonDraft('');
    setReasonError('');
    setReasonPrompt({ decision, entry });
  }

  function closeReasonPrompt() {
    setReasonPrompt(null);
    setReasonDraft('');
    setReasonError('');
  }

  function confirmReasonPrompt() {
    if (!reasonPrompt) return;

    const reason = reasonDraft.trim();
    if (reasonPrompt.decision === 'reject' && !reason) {
      setReasonError('拒绝审核必须填写理由');
      return;
    }

    const { decision, entry } = reasonPrompt;
    closeReasonPrompt();
    if (decision === 'reject') {
      void submitReview(entry, 'reject', reason);
      return;
    }
    void suspendGame(entry, reason);
  }

  return (
    <AdminPage wide>
      <AdminPageHeading
        title="游戏审核"
        actions={
          <AdminButton
            variant="secondary"
            type="button"
            onClick={() => void loadReviews()}
            disabled={isLoading}
          >
            <RefreshCcw aria-hidden="true" />
            刷新
          </AdminButton>
        }
      />

      {errorMessage ? (
        <AdminAlert tone="warning" role="alert">
          {errorMessage}
        </AdminAlert>
      ) : null}
      {statusMessage ? (
        <AdminAlert tone="success">{statusMessage}</AdminAlert>
      ) : null}

      <AdminListPanel
        busy={isLoading}
        busyText="正在加载待审版本…"
        busyVariant="line"
        emptyText="当前没有待审核的游戏版本。"
        emptyVariant="text"
        title="待审版本"
        extra={<span className="admin-muted-text">共 {entries.length} 条</span>}
        rows={entries}
        size="wide"
        columns={[
          { key: 'gameId', label: '游戏' },
          { key: 'versionNumber', label: '版本' },
          { key: 'packageBytes', label: '发行包' },
          { key: 'createdAt', label: '提交时间' },
          { key: 'actions', label: '审核' },
        ]}
        renderRow={(entry) => {
          const busy = busyVersionId === entry.versionId;
          return (
            <tr key={entry.versionId}>
              <td>
                <code>{entry.gameId}</code>
              </td>
              <td>
                v{entry.versionNumber}
                <div className="admin-muted-text">{entry.status}</div>
                {entry.reviewReason ? (
                  <div className="admin-muted-text">{entry.reviewReason}</div>
                ) : null}
              </td>
              <td>
                {formatBytes(entry.packageBytes)}
                <div className="admin-muted-text">
                  <code>{entry.packageSha256.slice(0, 12)}</code>
                </div>
              </td>
              <td>{formatAdminDateTime(entry.createdAt)}</td>
              <td>
                <AdminActionRow>
                  <AdminButton
                    variant="primary"
                    type="button"
                    disabled={busy}
                    onClick={() => void submitReview(entry, 'approve')}
                  >
                    通过
                  </AdminButton>
                  <AdminButton
                    variant="ghost"
                    type="button"
                    disabled={busy}
                    onClick={() => openReasonPrompt(entry, 'reject')}
                  >
                    拒绝
                  </AdminButton>
                  <AdminButton
                    variant="danger"
                    type="button"
                    disabled={busy || busyGameId === entry.gameId}
                    onClick={() => openReasonPrompt(entry, 'suspend')}
                  >
                    {busyGameId === entry.gameId ? '正在下架…' : '安全下架'}
                  </AdminButton>
                </AdminActionRow>
              </td>
            </tr>
          );
        }}
      />
      {reasonPrompt ? (
        <Modal
          open
          title={reasonPrompt.decision === 'reject' ? '拒绝审核' : '安全下架'}
          description={`${reasonPrompt.entry.gameId} · 版本 v${reasonPrompt.entry.versionNumber}`}
          closeLabel="关闭理由输入"
          onClose={closeReasonPrompt}
          size="sm"
          className="genarrative-ui"
          footer={
            <div
              className="admin-confirm-actions"
              style={{
                width: '100%',
              }}
            >
              <AdminButton
                variant="secondary"
                type="button"
                onClick={closeReasonPrompt}
              >
                取消
              </AdminButton>
              <AdminButton
                type="button"
                variant={
                  reasonPrompt.decision === 'reject' ? 'ghost' : 'danger'
                }
                onClick={confirmReasonPrompt}
              >
                {reasonPrompt.decision === 'reject' ? '确认拒绝' : '继续下架'}
              </AdminButton>
            </div>
          }
        >
          <TextField
            autoFocus
            multiline
            label={reasonPrompt.decision === 'reject' ? '拒绝理由' : '下架原因'}
            value={reasonDraft}
            error={reasonError}
            rows={4}
            onChange={(event) => {
              setReasonDraft(event.target.value);
              if (reasonError) setReasonError('');
            }}
          />
        </Modal>
      ) : null}
      {writeConfirm.confirmDialog}
    </AdminPage>
  );
}