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

import {
  AdminAlert,
  AdminButton,
  AdminInfoList,
  AdminListPanel,
  AdminPage,
  AdminPageHeading,
  AdminPanel,
  AdminStatusPill,
} from '@genarrative/shared/components';
import { RefreshCw } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';

import { getAdminOverview } from '../api/adminApiClient';
import type {
  AdminDatabaseTableStatPayload,
  AdminOverviewResponse,
} from '../api/adminApiTypes';
import { handlePageError } from './pageUtils';

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

export function AdminOverviewPage({
  token,
  onUnauthorized,
}: AdminOverviewPageProps) {
  const [overview, setOverview] = useState<AdminOverviewResponse | null>(null);
  const [errorMessage, setErrorMessage] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const loadOverview = useCallback(async () => {
    setIsLoading(true);
    setErrorMessage('');
    try {
      const response = await getAdminOverview(token);
      setOverview(response);
    } catch (error: unknown) {
      handlePageError(error, onUnauthorized, setErrorMessage);
    } finally {
      setIsLoading(false);
    }
  }, [onUnauthorized, token]);

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

  return (
    <AdminPage>
      <AdminPageHeading
        title="总览"
        description="服务与数据库状态"
        actions={
          <AdminButton
            variant="secondary"
            disabled={isLoading}
            type="button"
            onClick={() => void loadOverview()}
          >
            <RefreshCw size={17} aria-hidden="true" />
            <span>{isLoading ? '刷新中' : '刷新'}</span>
          </AdminButton>
        }
      />

      {errorMessage ? <AdminAlert>{errorMessage}</AdminAlert> : null}

      <div className="admin-overview-grid">
        <InfoPanel
          title="服务"
          rows={[
            [
              '监听',
              overview
                ? `${overview.service.bindHost}:${overview.service.bindPort}`
                : '-',
            ],
            ['JWT issuer', overview?.service.jwtIssuer ?? '-'],
            ['后台', overview?.service.adminEnabled ? '已启用' : '未启用'],
          ]}
        />
        <InfoPanel
          title="SpacetimeDB"
          rows={[
            ['Server', overview?.service.spacetimeServerUrl ?? '-'],
            ['Database', overview?.service.spacetimeDatabase ?? '-'],
            ['Identity', overview?.database.databaseIdentity ?? '-'],
            ['Owner', overview?.database.ownerIdentity ?? '-'],
            ['Host', overview?.database.hostType ?? '-'],
          ]}
        />
      </div>

      <AdminListPanel
        columns={[
          { key: 'table', label: '表' },
          { key: 'rowCount', label: '行数' },
          { key: 'status', label: '状态' },
        ]}
        count={<>{overview?.database.schemaTableNames.length ?? 0} tables</>}
        emptyText="暂无统计"
        emptyVariant="row"
        renderRow={(stat) => <TableStatRow key={stat.tableName} stat={stat} />}
        rows={overview?.database.tableStats ?? []}
        showEmpty={Boolean(
          overview && overview.database.tableStats.length === 0,
        )}
        title="表统计"
      />

      {overview?.database.fetchErrors.length ? (
        <AdminPanel
          tone="warning"
          title="读取异常"
          count={overview.database.fetchErrors.length}
        >
          <ul className="admin-error-list">
            {overview.database.fetchErrors.map((message) => (
              <li key={message}>{message}</li>
            ))}
          </ul>
        </AdminPanel>
      ) : null}
    </AdminPage>
  );
}

function InfoPanel({
  title,
  rows,
}: {
  title: string;
  rows: Array<[string, string]>;
}) {
  return (
    <AdminPanel title={title}>
      <AdminInfoList>
        {rows.map(([label, value]) => (
          <div key={label}>
            <dt>{label}</dt>
            <dd>{value}</dd>
          </div>
        ))}
      </AdminInfoList>
    </AdminPanel>
  );
}

function TableStatRow({ stat }: { stat: AdminDatabaseTableStatPayload }) {
  return (
    <tr>
      <td>
        <AdminButton
          variant="text"
          type="button"
          onClick={() => {
            window.location.hash = `#tables?table=${encodeURIComponent(stat.tableName)}`;
          }}
        >
          {stat.tableName}
        </AdminButton>
      </td>
      <td>{typeof stat.rowCount === 'number' ? stat.rowCount : '-'}</td>
      <td>
        {stat.errorMessage ? (
          <AdminStatusPill tone="error">{stat.errorMessage}</AdminStatusPill>
        ) : (
          <AdminStatusPill tone="ok">OK</AdminStatusPill>
        )}
      </td>
    </tr>
  );
}