content-find-agent-new/web/features/config/ConfigPage.tsx

"use client";

import { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import {
  getConfigQueryPrompts,
  getConfigRulePacks,
  getConfigWalkPolicy,
  getConfigWalkStrategy
} from "@/lib/api/client";
import type { ConfigFileResponse } from "@/lib/api/types";
import { AppShell } from "@/components/layout/AppShell";
import { RulePacksTab, WalkStrategyTab, WalkPolicyTab, QueryPromptsTab } from "@/features/config/configTables";

const TABS = [
  { id: "rule-packs", label: "规则包" },
  { id: "walk-strategy", label: "游走策略" },
  { id: "walk-policy", label: "游走护栏(walk-policy)" },
  { id: "query-prompts", label: "Query Prompts" }
] as const;

type TabId = (typeof TABS)[number]["id"];

export function ConfigPage() {
  const router = useRouter();
  const [tab, setTab] = useState<TabId>("rule-packs");
  const [responses, setResponses] = useState<Partial<Record<TabId, ConfigFileResponse>>>({});
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const [rulePacks, walkStrategy, walkPolicy, queryPrompts] = await Promise.all([
        getConfigRulePacks(),
        getConfigWalkStrategy(),
        getConfigWalkPolicy(),
        getConfigQueryPrompts()
      ]);
      setResponses({
        "rule-packs": rulePacks,
        "walk-strategy": walkStrategy,
        "walk-policy": walkPolicy,
        "query-prompts": queryPrompts
      });
    } catch (err) {
      setError(err instanceof Error ? err.message : "配置加载失败");
    } finally {
      setLoading(false);
    }
  }, []);

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

  const current = responses[tab];

  // 回退到来时的页面(通常是某个 run 的「策略配置」);无历史则兜底回 /runs。
  const goBack = () => {
    if (typeof window !== "undefined" && window.history.length > 1) {
      router.back();
    } else {
      router.push("/runs");
    }
  };

  return (
    <AppShell onRefresh={load} onBack={goBack}>
      <section className="detail-panel">
        <header className="detail-header">
          <div>
            <h1 className="detail-title">配置即真相(只读)</h1>
            <p className="muted">
              运行时读取的 JSON 配置原文。只读展示;编辑走 Excel→JSON 工具链(可视化编辑留 Web V3)。
            </p>
          </div>
          {current ? <span className="muted">{current.source_file}</span> : null}
        </header>
        <div className="filter-bar">
          {TABS.map((option) => (
            <button
              key={option.id}
              type="button"
              className={`chip${tab === option.id ? " active" : ""}`}
              onClick={() => setTab(option.id)}
            >
              {option.label}
            </button>
          ))}
        </div>
        {loading ? <div className="loading-state">配置加载中…</div> : null}
        {error ? <div className="error-state">{error}</div> : null}
        {current && tab === "rule-packs" ? <RulePacksTab data={current.data} /> : null}
        {current && tab === "walk-strategy" ? <WalkStrategyTab data={current.data} /> : null}
        {current && tab === "walk-policy" ? <WalkPolicyTab data={current.data} /> : null}
        {current && tab === "query-prompts" ? <QueryPromptsTab data={current.data} /> : null}
      </section>
    </AppShell>
  );
}