writer-work-flow/apps/web/components/rules/RulesPage.tsx

"use client";

import { useMemo, useState } from "react";

import { AppShell } from "@/components/AppShell";
import type { ProjectResponse, RuleView } from "@/lib/api/types";
import {
  RULE_LEVELS,
  RULE_LEVEL_LABELS,
  groupByLevel,
  type RuleLevel,
} from "@/lib/rules/rules";
import { useRules } from "@/lib/rules/useRules";

interface RulesPageProps {
  project: ProjectResponse;
  initialRules: RuleView[];
}

// 规则页（UX §7）：四级规则列表 + 新增（乐观 + 回滚）。
export function RulesPage({ project, initialRules }: RulesPageProps) {
  const { items, busy, add, remove } = useRules(initialRules);
  const [level, setLevel] = useState<RuleLevel>("project");
  const [content, setContent] = useState("");
  const groups = useMemo(() => groupByLevel(items), [items]);

  const onSubmit = async (e: React.FormEvent): Promise<void> => {
    e.preventDefault();
    const ok = await add(project.id, level, content);
    if (ok) setContent("");
  };

  return (
    <AppShell
      title={`〈${project.title}〉`}
      subtitle="规则"
      projectId={project.id}
      activeNav="rules"
    >
      <div className="mx-auto flex max-w-3xl flex-col gap-6 p-6">
        <form
          onSubmit={onSubmit}
          className="rounded border border-line bg-panel p-4"
        >
          <h1 className="mb-3 font-serif text-lg text-ink">新增规则</h1>
          <div className="mb-3 flex items-end gap-3">
            <label className="text-sm text-ink-soft">
              级别
              <select
                value={level}
                onChange={(e) => setLevel(e.target.value as RuleLevel)}
                className="mt-1 block rounded border border-line bg-bg px-2 py-1.5 text-sm text-ink"
              >
                {RULE_LEVELS.map((lv) => (
                  <option key={lv} value={lv}>
                    {RULE_LEVEL_LABELS[lv]}
                  </option>
                ))}
              </select>
            </label>
          </div>
          <textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            placeholder="如：本作禁用现代科技词汇；称呼一律用「道友」"
            rows={3}
            className="w-full resize-y rounded border border-line bg-bg px-3 py-2 text-sm text-ink"
          />
          <button
            type="submit"
            disabled={busy || content.trim().length === 0}
            className="mt-3 rounded bg-cinnabar px-4 py-2 text-sm text-white disabled:opacity-50"
          >
            {busy ? "保存中…" : "新增规则"}
          </button>
        </form>

        <div className="flex flex-col gap-4">
          {RULE_LEVELS.map((lv) => (
            <section key={lv}>
              <h2 className="mb-2 font-serif text-sm text-ink">
                {RULE_LEVEL_LABELS[lv]}
                <span className="ml-2 text-xs text-ink-soft">
                  {groups[lv].length}
                </span>
              </h2>
              {groups[lv].length === 0 ? (
                <p className="text-xs text-ink-soft">（暂无）</p>
              ) : (
                <ul className="flex flex-col gap-2">
                  {groups[lv].map((rule) => (
                    <li
                      key={rule.id}
                      className="flex items-start justify-between gap-3 rounded border border-line bg-panel px-3 py-2 text-sm text-ink"
                    >
                      <span className="min-w-0 flex-1 break-words">
                        {rule.content}
                      </span>
                      <button
                        type="button"
                        disabled={busy}
                        onClick={() => void remove(project.id, rule.id)}
                        aria-label="删除规则"
                        className="shrink-0 text-xs text-ink-soft hover:text-cinnabar disabled:opacity-50"
                      >
                        删除
                      </button>
                    </li>
                  ))}
                </ul>
              )}
            </section>
          ))}
        </div>
      </div>
    </AppShell>
  );
}