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

import { 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 formatTime(value: string) {
  const parsed = new Date(value);
  if (Number.isNaN(parsed.getTime())) return value;
  return parsed.toLocaleString('zh-CN', { hour12: false });
}

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 (
    <section className="admin-page admin-page-wide">
      <div className="admin-page-heading">
        <h1>游戏审核</h1>
        <button
          type="button"
          className="admin-secondary-button"
          onClick={() => void loadReviews()}
          disabled={isLoading}
        >
          <RefreshCcw aria-hidden="true" />
          刷新
        </button>
      </div>

      {errorMessage ? (
        <div className="admin-alert admin-alert-warning" role="alert">
          {errorMessage}
        </div>
      ) : null}
      {statusMessage ? (
        <div className="admin-alert admin-alert-success" role="status">
          {statusMessage}
        </div>
      ) : null}

      <div className="admin-panel">
        <div className="admin-panel-heading">
          <h2>待审版本</h2>
          <span className="admin-muted-text">共 {entries.length} 条</span>
        </div>

        {isLoading ? (
          <p className="admin-muted-text">正在加载待审版本…</p>
        ) : null}

        {!isLoading && entries.length === 0 ? (
          <p className="admin-muted-text">当前没有待审核的游戏版本。</p>
        ) : null}

        {!isLoading && entries.length > 0 ? (
          <div className="admin-table-wrap">
            <table className="admin-table admin-table-wide">
              <thead>
                <tr>
                  <th>游戏</th>
                  <th>版本</th>
                  <th>发行包</th>
                  <th>提交时间</th>
                  <th>审核</th>
                </tr>
              </thead>
              <tbody>
                {entries.map((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>{formatTime(entry.createdAt)}</td>
                      <td>
                        <div className="admin-action-row">
                          <button
                            type="button"
                            className="admin-primary-button"
                            disabled={busy}
                            onClick={() => void submitReview(entry, 'approve')}
                          >
                            通过
                          </button>
                          <button
                            type="button"
                            className="admin-ghost-button"
                            disabled={busy}
                            onClick={() => openReasonPrompt(entry, 'reject')}
                          >
                            拒绝
                          </button>
                          <button
                            type="button"
                            className="admin-danger-button"
                            disabled={busy || busyGameId === entry.gameId}
                            onClick={() => openReasonPrompt(entry, 'suspend')}
                          >
                            {busyGameId === entry.gameId
                              ? '正在下架…'
                              : '安全下架'}
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        ) : null}
      </div>
      {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%' }}>
              <button
                type="button"
                className="admin-secondary-button"
                onClick={closeReasonPrompt}
              >
                取消
              </button>
              <button
                type="button"
                className={
                  reasonPrompt.decision === 'reject'
                    ? 'admin-ghost-button'
                    : 'admin-danger-button'
                }
                onClick={confirmReasonPrompt}
              >
                {reasonPrompt.decision === 'reject' ? '确认拒绝' : '继续下架'}
              </button>
            </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}
    </section>
  );
}