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

import {
  AdminListPanel,
  AdminPage,
  AdminPageHeading,
} from '@genarrative/shared/components';
import { CircleHelp, Plus, RefreshCcw, Save, Trash2 } from 'lucide-react';
import { useEffect, useState } from 'react';

import { getAgcModelCatalog, saveAgcModelCatalog } from '../api/adminApiClient';
import type { AdminAgcModel, AdminAgcModelCatalog } from '../api/adminApiTypes';
import { useAdminWriteConfirm } from '../components/useAdminWriteConfirm';
import { handlePageError } from './pageUtils';

export function AdminAgcModelsPage({
  token,
  onUnauthorized,
}: {
  token: string;
  onUnauthorized: (message?: string) => void;
}) {
  const [catalog, setCatalog] = useState<AdminAgcModelCatalog | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');
  const [saved, setSaved] = useState(false);
  const { confirmWrite, confirmDialog } = useAdminWriteConfirm();

  async function refresh() {
    if (!token) return;
    setBusy(true);
    setError('');
    setSaved(false);
    try {
      setCatalog(await getAgcModelCatalog(token));
    } catch (error) {
      handlePageError(error, onUnauthorized, setError);
    } finally {
      setBusy(false);
    }
  }

  useEffect(() => {
    void refresh();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token]);

  function update(id: string, patch: Partial<AdminAgcModel>) {
    setSaved(false);
    setCatalog(
      (current) =>
        current && {
          ...current,
          models: current.models.map((model) =>
            model.id === id ? { ...model, ...patch } : model,
          ),
        },
    );
  }

  async function save() {
    if (!catalog || busy) return;
    if (
      !(await confirmWrite({
        action: '保存 AGC 模型目录',
        target: `${catalog.models.length} 个模型`,
      }))
    )
      return;
    setBusy(true);
    setError('');
    setSaved(false);
    try {
      setCatalog(await saveAgcModelCatalog(token, catalog));
      setSaved(true);
    } catch (error) {
      handlePageError(error, onUnauthorized, setError);
    } finally {
      setBusy(false);
    }
  }

  return (
    <AdminPage wide className="admin-agc-models">
      <AdminPageHeading
        title="AGC 模型"
        description="管理客户端可用模型与用户看到的名称"
        actions={
          <span className="admin-agc-models-revision">
            版本 v{catalog?.revision ?? '-'}
          </span>
        }
      />
      <div className="admin-agc-models-summary">
        <div>
          <span>已启用</span>
          <strong>
            {catalog?.models.filter((model) => model.enabled).length ?? 0}
          </strong>
        </div>
        <div>
          <span>默认模型</span>
          <strong>
            {catalog
              ? (catalog.models.find(
                  (model) => model.id === catalog.defaultModelId,
                )?.alias ?? '未设置')
              : '未设置'}
          </strong>
        </div>
        <div>
          <span>发布状态</span>
          <strong>{busy ? '处理中' : saved ? '已保存' : '待修改'}</strong>
        </div>
      </div>
      <AdminListPanel
        className="admin-agc-models-panel"
        columns={[
          { key: 'alias', label: '别名' },
          { key: 'modelId', label: '实际模型名' },
          { key: 'agentMode', label: 'Agent 模式' },
          { key: 'enabled', label: '启用' },
          { key: 'default', label: '默认' },
          { key: 'actions', label: '操作' },
        ]}
        rows={catalog?.models ?? []}
        showEmpty={false}
        title="模型目录"
        description="客户端仅显示别名，实际模型名仅在这里维护"
        extra={<CircleHelp size={17} aria-label="模型目录帮助" />}
        toolbar={
          <>
            <div className="admin-agc-models-toolbar">
              <button
                type="button"
                title="重新读取"
                aria-label="重新读取模型"
                disabled={busy}
                onClick={() => void refresh()}
              >
                <RefreshCcw size={16} />
              </button>
              <button
                type="button"
                title="添加模型"
                aria-label="添加模型"
                disabled={busy || !catalog || catalog.models.length >= 32}
                onClick={() => {
                  setSaved(false);
                  setCatalog(
                    (current) =>
                      current && {
                        ...current,
                        models: [
                          ...current.models,
                          {
                            id: crypto.randomUUID(),
                            alias: '',
                            modelId: '',
                            enabled: true,
                            agentMode: 'codex',
                          },
                        ],
                      },
                  );
                }}
              >
                <Plus size={16} />
              </button>
              <button
                type="button"
                disabled={busy || !catalog}
                onClick={() => void save()}
              >
                <Save size={16} />
                保存
              </button>
            </div>
            {error ? <p role="alert">{error}</p> : null}
            {saved ? <p role="status">已保存</p> : null}
            {busy ? <p role="status">正在处理</p> : null}
          </>
        }
        renderRow={(model, index) => {
          if (!catalog) {
            return null;
          }
          return (
            <tr key={model.id}>
              <td>
                <input
                  aria-label={`模型 ${index + 1} 别名`}
                  maxLength={40}
                  required
                  value={model.alias}
                  disabled={busy}
                  onChange={(e) =>
                    update(model.id, {
                      alias: e.target.value,
                    })
                  }
                />
              </td>
              <td>
                <input
                  aria-label={`模型 ${index + 1} 实际模型名`}
                  maxLength={200}
                  required
                  value={model.modelId}
                  disabled={busy}
                  onChange={(e) =>
                    update(model.id, {
                      modelId: e.target.value,
                    })
                  }
                />
              </td>
              <td>
                <select
                  aria-label={`模型 ${index + 1} Agent 模式`}
                  value={model.agentMode}
                  disabled={busy}
                  onChange={(e) =>
                    update(model.id, {
                      agentMode: e.target.value as AdminAgcModel['agentMode'],
                    })
                  }
                >
                  <option value="codex">Codex</option>
                  <option value="cc">Claude Code</option>
                </select>
              </td>
              <td>
                <input
                  aria-label={`模型 ${index + 1} 启用`}
                  type="checkbox"
                  checked={model.enabled}
                  disabled={busy || model.id === catalog.defaultModelId}
                  onChange={(e) =>
                    update(model.id, {
                      enabled: e.target.checked,
                    })
                  }
                />
              </td>
              <td>
                <input
                  aria-label={`模型 ${index + 1} 默认`}
                  name="agc-default-model"
                  type="radio"
                  checked={model.id === catalog.defaultModelId}
                  disabled={busy || !model.enabled}
                  onChange={() => {
                    setSaved(false);
                    setCatalog({
                      ...catalog,
                      defaultModelId: model.id,
                    });
                  }}
                />
              </td>
              <td>
                <button
                  type="button"
                  title="删除模型"
                  aria-label={`删除模型 ${index + 1}`}
                  disabled={busy || model.id === catalog.defaultModelId}
                  onClick={() => {
                    setSaved(false);
                    setCatalog({
                      ...catalog,
                      models: catalog.models.filter(
                        (candidate) => candidate.id !== model.id,
                      ),
                    });
                  }}
                >
                  <Trash2 size={16} />
                </button>
              </td>
            </tr>
          );
        }}
        tableClassName="admin-agc-models-table-grid"
        wrapClassName="admin-agc-models-table"
      />
      {confirmDialog}
    </AdminPage>
  );
}