yingqing/core/frontend/src/routes/admin/admin-tasks.tsx

import { useCallback, useEffect, useState } from "react";
import { Activity, X } from "lucide-react";
import { adminApi } from "../../api";
import { Pager } from "../../components/pager";
import { IconKitSvg } from "../../components/IconKitSvg";
import type { AdminTask, AdminTaskDetail } from "../../types";
import { pts } from "../stage-config";

type Notify = (type: "success" | "error" | "info", text: string) => void;

const PAGE_SIZE = 10;

const TABS = [
  { key: "", label: "全部" },
  { key: "failed", label: "失败" },
  { key: "succeeded", label: "成功" }
];

function fmtDate(iso: string) {
  if (!iso) return "—";
  const d = new Date(iso);
  const p = (n: number) => String(n).padStart(2, "0");
  return `${d.getFullYear()}/${p(d.getMonth() + 1)}/${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
}

function statusPill(status: string) {
  if (status === "succeeded") return <span className="pill ok"><span className="dot" />成功</span>;
  if (status === "failed") return <span className="pill err"><span className="dot" />失败</span>;
  if (["cancelled", "compensating"].includes(status)) return <span className="pill neutral"><span className="dot" />{status}</span>;
  return <span className="pill info"><span className="dot" />进行中</span>;
}

export function AdminTasksPage({ notify }: { notify: Notify }) {
  const [tasks, setTasks] = useState<AdminTask[]>([]);
  const [count, setCount] = useState(0);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [tab, setTab] = useState("");
  const [anomalyOnly, setAnomalyOnly] = useState(false);
  const [detail, setDetail] = useState<AdminTaskDetail | null>(null);
  const [detailLoading, setDetailLoading] = useState(false);
  const [busy, setBusy] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const res = await adminApi.tasks({ status: tab || undefined, anomaly: anomalyOnly ? "1" : undefined, page, page_size: PAGE_SIZE });
      if (res.results.length === 0 && res.count > 0 && page > 1) { setPage((p) => Math.max(1, p - 1)); return; }
      setTasks(res.results);
      setCount(res.count);
    } catch {
      notify("error", "加载任务失败");
    } finally {
      setLoading(false);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tab, anomalyOnly, page]);

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

  async function openDetail(id: string) {
    setDetailLoading(true);
    setDetail(null);
    try {
      setDetail(await adminApi.taskDetail(id));
    } catch {
      notify("error", "加载详情失败");
    } finally {
      setDetailLoading(false);
    }
  }

  async function retry(t: AdminTask) {
    if (busy) return;
    setBusy(true);
    try {
      await adminApi.retryTask(t.id);
      notify("success", "已重投,稍后刷新查看");
      await load();
    } catch (e) {
      notify("error", e instanceof Error ? e.message : "重投失败");
    } finally {
      setBusy(false);
    }
  }

  return (
    <>
      <div className="page-head">
        <div>
          <h1>任务监控</h1>
          <div className="sub"><span className="mono">// {count} 个任务</span> · 全局 AI 任务 · 成本异常 · 失败重投</div>
        </div>
      </div>

      <div className="admin-toolbar">
        <div className="tabs-sub">
          {TABS.map((t) => (
            <button key={t.key || "all"} type="button" className={`tab-sub${tab === t.key ? " active" : ""}`} onClick={() => { setTab(t.key); setPage(1); }}>{t.label}</button>
          ))}
        </div>
        <button type="button" className={`chip admin-anomaly-chip${anomalyOnly ? " active" : ""}`} onClick={() => { setAnomalyOnly((v) => !v); setPage(1); }}>
          仅成本异常
        </button>
      </div>

      {loading ? (
        <div className="empty-state show"><div className="ic-empty"><IconKitSvg name="activity" size={24} /></div><h3>加载中…</h3><p>// fetching tasks</p></div>
      ) : tasks.length === 0 ? (
        <div className="empty-state show"><div className="ic-empty"><IconKitSvg name="activity" size={24} /></div><h3>暂无任务</h3><p>// no tasks</p></div>
      ) : (
        <div className="admin-table-wrap">
          <table className="t admin-table">
            <thead>
              <tr><th>类型</th><th>团队</th><th>模型</th><th>状态</th><th>成本(预估→实际)</th><th>时间</th><th className="col-actions">操作</th></tr>
            </thead>
            <tbody>
              {tasks.map((t) => (
                <tr key={t.id}>
                  <td className="mono admin-code">{t.task_type}</td>
                  <td>{t.team_name || <span className="muted">—</span>}</td>
                  <td>{t.model_name || <span className="muted">—</span>}</td>
                  <td>{statusPill(t.status)}</td>
                  <td className="mono">
                    {pts(t.estimated_cost)} → {pts(t.actual_cost)} 积分{t.margin_yuan != null ? ` · 毛利 ¥${t.margin_yuan}` : ""}
                    {t.cost_anomaly && <span className="pill err admin-inline-pill">异常</span>}
                  </td>
                  <td className="mono col-time">{fmtDate(t.created_at)}</td>
                  <td className="col-actions">
                    <button className="btn btn-sm btn-ghost" type="button" onClick={() => openDetail(t.id)}>详情</button>
                    {t.status === "failed" && (
                      <button className="btn btn-sm btn-ghost" type="button" disabled={busy} onClick={() => retry(t)}>重投</button>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          <Pager page={page} total={count} pageSize={PAGE_SIZE} onChange={setPage} alwaysShow />
        </div>
      )}

      {(detail || detailLoading) && (
        <div className="drawer-bg show" onClick={(e) => { if (e.target === e.currentTarget) setDetail(null); }}>
          <div className="drawer admin-drawer show" role="dialog" aria-modal="true" aria-label="任务详情">
            <div className="drawer-h">
              <h3><Activity size={15} style={{ verticalAlign: "-2px", marginRight: 6 }} />任务详情</h3>
              <button className="x" type="button" aria-label="关闭" onClick={() => setDetail(null)}><X size={14} /></button>
            </div>
            <div className="drawer-b">
              {detailLoading || !detail ? (
                <p className="admin-modal-desc">加载中…</p>
              ) : (
                <>
                  <div className="admin-detail-meta">
                    <div><span className="k">状态</span><span className="v">{statusPill(detail.status)}</span></div>
                    <div><span className="k">团队</span><span className="v">{detail.team_name || "—"}</span></div>
                    <div><span className="k">模型</span><span className="v">{detail.model_name || "—"}</span></div>
                    <div><span className="k">计价</span><span className="v mono">{pts(detail.estimated_cost)} → {pts(detail.actual_cost)} 积分{detail.cost_anomaly ? " ⚠" : ""}</span></div>
                    <div><span className="k">平台成本</span><span className="v mono">{Number(detail.base_cost || 0) > 0 ? `¥${detail.base_cost} · 毛利 ${detail.margin_yuan != null ? `¥${detail.margin_yuan}` : "—"}` : "未知"}</span></div>
                  </div>
                  {detail.error_message && (
                    <>
                      <div className="admin-detail-subhead">错误</div>
                      <pre className="admin-json admin-json-err">{detail.error_message}</pre>
                    </>
                  )}
                  <div className="admin-detail-subhead">请求 payload</div>
                  <pre className="admin-json">{JSON.stringify(detail.request_payload, null, 2)}</pre>
                  <div className="admin-detail-subhead">响应 payload</div>
                  <pre className="admin-json">{JSON.stringify(detail.response_payload, null, 2)}</pre>
                </>
              )}
            </div>
          </div>
        </div>
      )}
    </>
  );
}