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

import { Modal } from '@genarrative/shared/components';
import { FormEvent, useEffect, useRef, useState } from 'react';

import { listAdminAgcTrackingEvents } from '../api/adminApiClient';
import type {
  AdminAgcTrackingEventEntry,
  AdminAgcTrackingEventListResponse,
  AdminAgcTrackingEventQuery,
} from '../api/adminApiTypes';
import { AdminUserReferenceButton } from '../components/AdminUserReferenceButton';
import { handlePageError } from './pageUtils';

const eventLabels: Record<string, string> = {
  editor_session_start: '编辑器会话开始',
  editor_session_end: '编辑器会话结束',
  editor_focus_start: '编辑器获得焦点',
  editor_focus_end: '编辑器失去焦点',
  project_create_success: '项目创建成功',
  project_open: '打开项目',
  creative_task_submit: '首次提交创作目标',
  agent_run_completed: 'Agent 运行完成',
  agent_run_failed: 'Agent 运行失败',
  project_revision_created: '项目产生修改',
  preview_ready: '预览就绪',
  project_save: '保存项目',
};

const fieldLabels: Record<keyof AdminAgcTrackingEventEntry, string> = {
  eventId: '事件 ID',
  schemaVersion: '事件版本',
  eventName: '事件类型',
  eventTime: '发生时间',
  userId: '用户 ID',
  editorSessionId: '编辑器会话 ID',
  projectId: '项目 ID',
  creativeTaskId: '创作目标 ID',
  agentRunId: 'Agent run ID',
  agentTurnId: 'Agent turn ID',
  status: '结果',
  errorCode: '错误码',
  source: '来源',
  clientVersion: '客户端版本',
  properties: '事件属性',
  batchId: '批次 ID',
  receivedAt: '入库时间',
};

function formatTime(value: string) {
  const date = new Date(value);
  return Number.isNaN(date.getTime()) ? value : date.toLocaleString('zh-CN');
}

export function AdminAgcTrackingPage({
  token,
  onUnauthorized,
}: {
  token: string;
  onUnauthorized: (message?: string) => void;
}) {
  const [filters, setFilters] = useState({
    userId: '',
    projectId: '',
    eventName: '',
    startTime: '',
    endTime: '',
  });
  const [query, setQuery] = useState<AdminAgcTrackingEventQuery>({});
  const [cursors, setCursors] = useState<Array<string | undefined>>([
    undefined,
  ]);
  const [page, setPage] = useState(0);
  const [refresh, setRefresh] = useState(0);
  const [entries, setEntries] = useState<AdminAgcTrackingEventEntry[]>([]);
  const [nextCursor, setNextCursor] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [detail, setDetail] = useState<AdminAgcTrackingEventEntry | null>(null);
  const cursor = cursors[page];
  // 首页没有入站游标，返回首页时保留原快照，刷新才获取新数据。
  const firstPage = useRef<{
    token: string;
    query: AdminAgcTrackingEventQuery;
    response: AdminAgcTrackingEventListResponse;
  } | null>(null);

  useEffect(() => {
    const saved = firstPage.current;
    if (!cursor && saved?.token === token && saved.query === query) {
      setEntries(saved.response.entries);
      setNextCursor(saved.response.nextCursor);
      setError('');
      setLoading(false);
      return;
    }
    let active = true;
    setLoading(true);
    setError('');
    setEntries([]);
    setNextCursor(null);
    void listAdminAgcTrackingEvents(token, { ...query, cursor, limit: 50 })
      .then((response) => {
        if (!active) return;
        if (!cursor) firstPage.current = { token, query, response };
        setEntries(response.entries);
        setNextCursor(response.nextCursor);
      })
      .catch((failure: unknown) => {
        if (active) handlePageError(failure, onUnauthorized, setError);
      })
      .finally(() => {
        if (active) setLoading(false);
      });
    return () => {
      active = false;
    };
  }, [token, query, cursor, refresh, onUnauthorized]);

  function resetPages() {
    firstPage.current = null;
    setCursors([undefined]);
    setPage(0);
    setDetail(null);
  }

  function search(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (
      filters.startTime &&
      filters.endTime &&
      new Date(filters.startTime) >= new Date(filters.endTime)
    ) {
      setError('结束时间必须晚于开始时间');
      return;
    }
    resetPages();
    setQuery({
      userId: filters.userId.trim(),
      projectId: filters.projectId.trim(),
      eventName: filters.eventName,
      startTime: filters.startTime
        ? new Date(filters.startTime).toISOString()
        : undefined,
      endTime: filters.endTime
        ? new Date(filters.endTime).toISOString()
        : undefined,
    });
  }

  function related(
    key: 'creativeTaskId' | 'agentRunId' | 'clientVersion',
    value: string,
  ) {
    resetPages();
    setFilters({
      userId: '',
      projectId: '',
      eventName: '',
      startTime: '',
      endTime: '',
    });
    setQuery({ [key]: value });
  }

  return (
    <section className="admin-page admin-page-wide">
      <div className="admin-page-heading">
        <div>
          <h2>客户端埋点</h2>
          <p>按发生时间倒序展示</p>
        </div>
        <button
          type="button"
          className="admin-secondary-button"
          disabled={loading}
          onClick={() => {
            resetPages();
            setRefresh((value) => value + 1);
          }}
        >
          刷新
        </button>
      </div>
      <form className="admin-panel admin-form" onSubmit={search}>
        <div className="admin-filter-grid">
          {(['userId', 'projectId'] as const).map((key) => (
            <label key={key} className="admin-field">
              <span>{fieldLabels[key]}</span>
              <input
                value={filters[key]}
                onChange={(event) =>
                  setFilters({ ...filters, [key]: event.target.value })
                }
              />
            </label>
          ))}
          <label className="admin-field">
            <span>事件类型</span>
            <select
              value={filters.eventName}
              onChange={(event) =>
                setFilters({ ...filters, eventName: event.target.value })
              }
            >
              <option value="">全部</option>
              {Object.entries(eventLabels).map(([value, label]) => (
                <option key={value} value={value}>
                  {label}
                </option>
              ))}
            </select>
          </label>
          {(['startTime', 'endTime'] as const).map((key) => (
            <label key={key} className="admin-field">
              <span>
                {key === 'startTime'
                  ? '发生时间起点（含）'
                  : '发生时间终点（不含）'}
              </span>
              <input
                type="datetime-local"
                value={filters[key]}
                onChange={(event) =>
                  setFilters({ ...filters, [key]: event.target.value })
                }
              />
            </label>
          ))}
        </div>
        <div className="admin-action-row">
          <button
            type="submit"
            className="admin-primary-button"
            disabled={loading}
          >
            查询
          </button>
        </div>
        {(['creativeTaskId', 'agentRunId', 'clientVersion'] as const)
          .filter((key) => query[key])
          .map((key) => (
            <p key={key}>
              {fieldLabels[key]}：{query[key]}（重新查询可清除）
            </p>
          ))}
      </form>
      {error ? (
        <p role="alert" className="admin-error-message">
          {error}
        </p>
      ) : null}
      <div className="admin-panel">
        <div className="admin-table-wrap">
          <table className="admin-table">
            <thead>
              <tr>
                {[
                  '入库时间',
                  '发生时间',
                  '用户',
                  '事件名称',
                  '项目',
                  '来源',
                  '结果',
                  '客户端版本',
                  '详情',
                ].map((label) => (
                  <th key={label}>{label}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {entries.map((entry) => (
                <tr key={entry.eventId}>
                  <td>{formatTime(entry.receivedAt)}</td>
                  <td>{formatTime(entry.eventTime)}</td>
                  <td>
                    {entry.userId}
                    <AdminUserReferenceButton
                      token={token}
                      userId={entry.userId}
                      onUnauthorized={onUnauthorized}
                    />
                  </td>
                  <td>{eventLabels[entry.eventName] ?? entry.eventName}</td>
                  <td>{entry.projectId ?? '—'}</td>
                  <td>{entry.source}</td>
                  <td>{entry.status ?? '—'}</td>
                  <td>{entry.clientVersion}</td>
                  <td>
                    <button
                      type="button"
                      className="admin-ghost-button"
                      onClick={() => setDetail(entry)}
                    >
                      查看详情
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {loading ? (
          <p role="status">加载中…</p>
        ) : !error && entries.length === 0 ? (
          <p>暂无客户端埋点数据</p>
        ) : null}
        <div className="admin-action-row">
          <button
            type="button"
            className="admin-secondary-button"
            disabled={loading || page === 0}
            onClick={() => setPage((value) => value - 1)}
          >
            上一页
          </button>
          <span>第 {page + 1} 页</span>
          <button
            type="button"
            className="admin-secondary-button"
            disabled={loading || !nextCursor}
            onClick={() => {
              if (!nextCursor) return;
              setCursors([...cursors.slice(0, page + 1), nextCursor]);
              setPage(page + 1);
            }}
          >
            下一页
          </button>
        </div>
      </div>
      {detail ? (
        <Modal
          open
          title="客户端埋点详情"
          closeLabel="关闭详情"
          onClose={() => setDetail(null)}
          className="genarrative-ui"
        >
          <dl>
            {(
              Object.keys(fieldLabels) as Array<
                keyof AdminAgcTrackingEventEntry
              >
            )
              .filter((key) => key !== 'properties')
              .map((key) => (
                <div key={key}>
                  <dt>{fieldLabels[key]}</dt>
                  <dd style={{ overflowWrap: 'anywhere' }}>
                    {detail[key] == null ? '—' : String(detail[key])}
                  </dd>
                </div>
              ))}
          </dl>
          <div className="admin-action-row">
            {(['creativeTaskId', 'agentRunId', 'clientVersion'] as const).map(
              (key) =>
                detail[key] ? (
                  <button
                    type="button"
                    key={key}
                    className="admin-secondary-button"
                    onClick={() => related(key, detail[key]!)}
                  >
                    查询同一{fieldLabels[key]}
                  </button>
                ) : null,
            )}
          </div>
          <h3>事件属性</h3>
          <pre style={{ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }}>
            {JSON.stringify(detail.properties, null, 2)}
          </pre>
        </Modal>
      ) : null}
    </section>
  );
}