UHD_Media_Tool/apps/web/app/routes/console/rules.tsx

import type { RuleGroup, RuleGroupKind, RuleGroupSource } from "@umt/contracts";
import { FilePlus2, Plus } from "lucide-react";
import { useMemo, useState } from "react";
import { useSearchParams } from "react-router";
import { useRuleGroups, useRuleRefs } from "~/api/rules.ts";
import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
import { PageHeader } from "~/components/console/page-header.tsx";
import { PolicyWorkspace } from "~/components/library/subscriptions-policy.tsx";
import { RuleGroupEditor } from "~/components/rules/group-editor.tsx";
import { RuleGroupTable, RuleTags } from "~/components/rules/group-list.tsx";
import { isTagLike, RULE_KIND, RULE_SOURCE } from "~/components/rules/labels.ts";
import { AtomsTab, DefaultsTab, SuppressionsTab } from "~/components/rules/tabs.tsx";
import { Button } from "~/components/ui/button.tsx";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs.tsx";

// 规则(docs/design/subscriptions.md §6):收录策略 + 偏好标签合一。
// Tab:规则组(含单条规则的标签形态)/ 自定义条件 / 默认值 / 收录策略 / 抑制记录。

export const meta = () => [{ title: "规则 · UHD 媒体自动化控制台" }];

const TABS = ["groups", "atoms", "defaults", "policies", "suppressions"] as const;
type Tab = (typeof TABS)[number];

/** 旧 /preferences?origin= 透传过来的来源 */
const ORIGIN_TO_SOURCE: Record<string, RuleGroupSource> = {
  manual: "manual",
  conversation: "chat",
  agent_inferred: "agent",
};

export default function RulesPage() {
  const [params, setParams] = useSearchParams();
  const tabParam = params.get("tab") ?? "groups";
  const tab: Tab = (TABS as readonly string[]).includes(tabParam) ? (tabParam as Tab) : "groups";
  const setParam = (k: string, v: string) =>
    setParams(
      (p) => {
        if (v) p.set(k, v);
        else p.delete(k);
        return p;
      },
      { replace: true },
    );

  const kind = params.get("kind") ?? "";
  const source = params.get("source") ?? ORIGIN_TO_SOURCE[params.get("origin") ?? ""] ?? "";
  const enabled = params.get("enabled") ?? "";
  const [q, setQ] = useState(params.get("q") ?? "");
  const filtered = !!(kind || source || enabled || q.trim());

  const groups = useRuleGroups({
    kind: (kind || undefined) as RuleGroupKind | undefined,
    source: (source || undefined) as RuleGroupSource | undefined,
    enabled: (enabled || undefined) as "true" | "false" | undefined,
    q: q.trim() || undefined,
  });
  const all = useRuleGroups({});
  const refs = useRuleRefs();
  const [editor, setEditor] = useState<{ open: boolean; id: string | null }>({ open: false, id: null });
  const [creatingPolicy, setCreatingPolicy] = useState(false);

  const items = groups.data?.items;
  const tags = useMemo(() => (items ?? []).filter(isTagLike), [items]);
  const rest = useMemo(() => items?.filter((g) => !isTagLike(g)), [items]);
  const editing: RuleGroup | null = editor.id
    ? ((items ?? []).find((g) => g.id === editor.id) ?? all.data?.items.find((g) => g.id === editor.id) ?? null)
    : null;
  const open = (g: RuleGroup) => setEditor({ open: true, id: g.id });
  const create = () => setEditor({ open: true, id: null });

  return (
    <>
      <PageHeader
        title="规则"
        actions={
          tab === "policies" ? (
            <Button onClick={() => setCreatingPolicy(true)}>
              <FilePlus2 />
              新建
            </Button>
          ) : (
            <Button onClick={create}>
              <Plus />
              新建规则组
            </Button>
          )
        }
      />

      <Tabs
        value={tab}
        onValueChange={(v) =>
          setParams(
            (p) => {
              if (v === "groups") p.delete("tab");
              else p.set("tab", v);
              return p;
            },
            { replace: true },
          )
        }
      >
        <TabsList aria-label="规则分节">
          <TabsTrigger value="groups">规则组</TabsTrigger>
          <TabsTrigger value="atoms">自定义条件</TabsTrigger>
          <TabsTrigger value="defaults">默认规则</TabsTrigger>
          <TabsTrigger value="policies">自动收新作品</TabsTrigger>
          <TabsTrigger value="suppressions">已忽略</TabsTrigger>
        </TabsList>

        <TabsContent value="groups">
          <FilterBar
            search={{
              value: q,
              onChange: (v) => {
                setQ(v);
                setParam("q", v);
              },
              placeholder: "搜索名称",
            }}
            onReset={
              filtered
                ? () => {
                    setQ("");
                    setParams(new URLSearchParams(), { replace: true });
                  }
                : undefined
            }
          >
            <FilterSelect
              label="类型"
              value={kind}
              onChange={(v) => setParam("kind", v)}
              options={(Object.keys(RULE_KIND) as RuleGroupKind[]).map((k) => ({
                value: k,
                label: RULE_KIND[k].label,
              }))}
            />
            <FilterSelect
              label="来源"
              value={source}
              onChange={(v) => {
                setParam("origin", "");
                setParam("source", v);
              }}
              options={(Object.keys(RULE_SOURCE) as RuleGroupSource[]).map((k) => ({
                value: k,
                label: RULE_SOURCE[k],
              }))}
            />
            <FilterSelect
              label="状态"
              value={enabled}
              onChange={(v) => setParam("enabled", v)}
              options={[
                { value: "true", label: "启用" },
                { value: "false", label: "停用" },
              ]}
            />
          </FilterBar>
          <div className="space-y-6">
            {groups.isSuccess && (tags.length > 0 || !filtered) ? <RuleTags rows={tags} onOpen={open} /> : null}
            <RuleGroupTable
              rows={rest}
              loading={groups.isPending}
              error={groups.error}
              onRetry={() => groups.refetch()}
              refs={refs.data}
              filtered={filtered}
              onOpen={open}
              onCreate={create}
            />
          </div>
        </TabsContent>

        <TabsContent value="atoms">
          <AtomsTab />
        </TabsContent>
        <TabsContent value="defaults">
          <DefaultsTab groups={all.data?.items} />
        </TabsContent>
        <TabsContent value="policies">
          <PolicyWorkspace creating={creatingPolicy} onCreatingChange={setCreatingPolicy} />
        </TabsContent>
        <TabsContent value="suppressions">
          <SuppressionsTab />
        </TabsContent>
      </Tabs>

      <RuleGroupEditor
        open={editor.open}
        group={editing}
        defaultKind={(kind || "acquisition") as RuleGroupKind}
        onOpenChange={(o) => setEditor((e) => ({ ...e, open: o }))}
      />
    </>
  );
}