import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useParams } from "react-router-dom";
import { AppShell } from "../components/AppShell";
import { AttachmentPanel } from "../components/AttachmentPanel";
import { RichTextEditor } from "../components/RichTextEditor";
import { Link2, Plus, Search, Sparkle } from "../components/icons";
import {
  Button,
  EmptyState,
  InlineAlert,
  PageHeader,
  Sheet,
  SkeletonRows,
  StatusPill,
} from "../components/ui";
import { ApiError, api } from "../lib/client";
import type {
  Attachment,
  Knowledge,
  KnowledgeCategoryNode,
  KnowledgeStatus,
  SearchHit,
} from "../lib/types";

const TABS = [
  { key: "draft", label: "待核对", statuses: ["draft", "in_review"] },
  { key: "published", label: "已发布", statuses: ["published"] },
  { key: "archived", label: "已归档", statuses: ["archived"] },
  { key: "all", label: "全部", statuses: [] },
] as const;

const DOC_TYPE_LABEL: Record<string, string> = {
  note: "笔记",
  howto: "怎么做",
  faq: "常见问题",
  postmortem: "复盘",
  decision: "决策",
};

const STATUS_LABEL: Record<KnowledgeStatus, string> = {
  draft: "草稿",
  in_review: "待审议",
  published: "已发布",
  archived: "已归档",
};

const SOURCE_LABEL: Record<string, string> = {
  manual: "手记",
  task: "来自任务",
  ticket: "来自工单",
};

const ACTION_LABEL: Record<string, string> = {
  submit_review: "提交审议",
  withdraw: "撤回审议",
  publish: "发布",
  archive: "归档",
  restore: "恢复成草稿",
};

export function KnowledgePage() {
  const { wsId = "" } = useParams();
  const [tab, setTab] = useState<(typeof TABS)[number]["key"]>("draft");
  const [q, setQ] = useState("");
  const [docs, setDocs] = useState<Knowledge[]>([]);
  const [cursor, setCursor] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [openId, setOpenId] = useState<string | null>(null);
  const [composing, setComposing] = useState(false);
  const [hits, setHits] = useState<SearchHit[] | null>(null);
  const [searching, setSearching] = useState(false);
  /** null = 不按分类筛（全部）；"none" = 未分类；其它是分类 id（含子分类） */
  const [catFilter, setCatFilter] = useState<string | null>(null);
  const [categories, setCategories] = useState<KnowledgeCategoryNode[]>([]);
  const [catBusy, setCatBusy] = useState(false);
  const reqId = useRef(0);

  const loadCategories = useCallback(async () => {
    try {
      const page = await api.get<{ items: KnowledgeCategoryNode[] }>(
        `/workspaces/${wsId}/knowledge/categories`,
      );
      setCategories(page.items);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "分类加载失败");
    }
  }, [wsId]);

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

  async function createCategory(name: string, parentId: string | null) {
    setCatBusy(true);
    setError(null);
    try {
      const created = await api.post<KnowledgeCategoryNode>(
        `/workspaces/${wsId}/knowledge/categories`,
        { name, parent_id: parentId },
      );
      await loadCategories();
      return created;
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "分类创建失败");
      return null;
    } finally {
      setCatBusy(false);
    }
  }

  const load = useCallback(
    async (nextCursor: string | null) => {
      // 切 tab / 改搜索会连发请求，慢的回来会盖掉新结果
      const mine = ++reqId.current;
      setLoading(true);
      setError(null);
      try {
        const qs = new URLSearchParams();
        const statuses = TABS.find((t) => t.key === tab)!.statuses;
        for (const s of statuses) qs.append("status", s);
        if (q.trim()) qs.set("q", q.trim());
        if (catFilter === "none") qs.set("uncategorized", "true");
        else if (catFilter) qs.set("category_id", catFilter);
        if (nextCursor) qs.set("cursor", nextCursor);
        const page = await api.get<{
          items: Knowledge[];
          next_cursor: string | null;
          has_more: boolean;
        }>(`/workspaces/${wsId}/knowledge?${qs.toString()}`);
        if (mine !== reqId.current) return;
        setDocs((prev) => (nextCursor ? [...prev, ...page.items] : page.items));
        setCursor(page.has_more ? page.next_cursor : null);
      } catch (err) {
        if (mine !== reqId.current) return;
        setError(err instanceof ApiError ? err.message : "知识加载失败");
      } finally {
        if (mine === reqId.current) setLoading(false);
      }
    },
    [wsId, tab, q, catFilter],
  );

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

  /**
   * 语义检索走的是切片接口，和上面的列表筛选不是一回事：
   * 列表按标题/正文做子串匹配，检索按向量 + trigram 打分，只覆盖已发布的知识。
   * 所以不把 q 直接接到列表上——两套结果混在一起会让人搞不清命中在哪。
   */
  async function runSearch() {
    const keyword = q.trim();
    if (!keyword) {
      setHits(null);
      return;
    }
    setSearching(true);
    setError(null);
    try {
      const query = new URLSearchParams({ q: keyword, limit: "12" });
      const page = await api.get<{ items: SearchHit[] }>(
        `/workspaces/${wsId}/knowledge/search?${query.toString()}`,
      );
      setHits(page.items);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "检索失败");
    } finally {
      setSearching(false);
    }
  }

  function onCreated(doc: Knowledge) {
    setComposing(false);
    setTab("draft");
    setCatFilter(null);
    setOpenId(doc.id);
    void load(null);
    void loadCategories();
  }

  const pendingCount = docs.filter((d) => d.knowledge.status_hint !== "published").length;

  return (
    <AppShell wsId={wsId} active="knowledge">
      <PageHeader
        title="知识"
        desc="工单验收通过会自动整理一份草稿；核对无误再发布，发布后才会进入团队检索。"
        eyebrow={<>沉淀下来的东西，半年后还认得出来吗</>}
        actions={
          <>
            <div className="relative">
              <span className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-ink-400">
                <Search size={14} />
              </span>
              <input
                className="input h-9 w-48 pl-8 text-sm"
                placeholder="搜标题或正文…（回车检索）"
                value={q}
                onChange={(e) => {
                  setQ(e.target.value);
                  if (!e.target.value.trim()) setHits(null);
                }}
                onKeyDown={(e) => {
                  if (e.key === "Enter") void runSearch();
                }}
              />
            </div>
            <Button variant="ghost" disabled={searching || !q.trim()} onClick={() => void runSearch()}>
              <Search size={14} />
              {searching ? "检索中…" : "检索"}
            </Button>
            <Button variant="primary" onClick={() => setComposing(true)}>
              <Plus size={14} />
              记一条
            </Button>
          </>
        }
      />

      <div className="grid gap-4 lg:grid-cols-[220px_minmax(0,1fr)]">
        <CategorySidebar
          categories={categories}
          selected={catFilter}
          onSelect={(value) => {
            setCatFilter(value);
            setHits(null);
          }}
          busy={catBusy}
          onCreate={(name, parentId) => void createCategory(name, parentId)}
        />
        <div className="min-w-0">
      <div className="mb-4 flex flex-wrap items-center gap-1.5">
        {TABS.map((t) => {
          const active = tab === t.key;
          return (
            <button
              key={t.key}
              onClick={() => setTab(t.key)}
              className={`rounded-lg px-2.5 py-1.5 text-sm font-medium transition-colors ${
                active
                  ? "bg-white text-ink-900 shadow-sm ring-1 ring-line-200"
                  : "text-ink-500 hover:bg-white/60 hover:text-ink-800"
              }`}
            >
              {t.label}
            </button>
          );
        })}
        {tab === "draft" && pendingCount > 0 ? (
          <span className="ml-auto hidden text-2xs text-ink-400 sm:block">
            {pendingCount} 份草稿等你核对
          </span>
        ) : null}
      </div>

      {error && (
        <div className="mb-4">
          <InlineAlert>{error}</InlineAlert>
        </div>
      )}

      {hits !== null ? (
        <section className="space-y-2">
          <div className="flex items-baseline justify-between px-1">
            <p className="text-xs text-ink-500">
              在已发布的知识里检索「{q.trim()}」，命中 {hits.length} 段
            </p>
            <button className="link text-2xs" onClick={() => setHits(null)}>
              退出检索
            </button>
          </div>
          {hits.length === 0 ? (
            <div className="card">
              <EmptyState
                icon={<Search size={18} />}
                title="没有检索到相关内容"
                hint="只检索已发布的知识。换成更具体的说法，或者先把手头的草稿核对发布。"
              />
            </div>
          ) : (
            hits.map((hit) => (
              <article key={`${hit.item_id}-${hit.idx}`} className="card p-4">
                <div className="flex flex-wrap items-center gap-1.5">
                  <span className="chip bg-primary-50 text-primary-700">
                    {DOC_TYPE_LABEL[hit.doc_type] ?? hit.doc_type}
                  </span>
                  {hit.heading ? (
                    <span className="chip bg-paper-200 text-ink-600">{hit.heading}</span>
                  ) : null}
                  <span className="ml-auto text-2xs text-ink-400">
                    相关度 {hit.score.toFixed(2)}
                  </span>
                </div>
                <p className="mt-2 text-sm font-medium text-ink-900">{hit.title}</p>
                <p className="mt-1.5 line-clamp-3 whitespace-pre-wrap text-xs leading-relaxed text-ink-600">
                  {hit.content}
                </p>
                <div className="mt-2 text-right">
                  <Button variant="ghost" size="sm" onClick={() => setOpenId(hit.item_id)}>
                    打开原文
                  </Button>
                </div>
              </article>
            ))
          )}
        </section>
      ) : loading && docs.length === 0 ? (
        <div className="card overflow-hidden">
          <SkeletonRows rows={3} />
        </div>
      ) : docs.length === 0 ? (
        <div className="card">
          <EmptyState
            icon={<Sparkle size={18} />}
            title={
              tab === "draft" ? "还没有待核对的知识" : "这里还空着"
            }
            hint={
              tab === "draft"
                ? "把一张工单验收通过，系统会自动整理一份草稿；或者在这里「记一条」。"
                : "换个筛选条件看看，或者先记一条。"
            }
          />
        </div>
      ) : (
        <ul className="grid gap-2 md:grid-cols-2 2xl:grid-cols-3">
          {docs.map((d) => (
            <li
              key={d.id}
              className="card group flex items-start justify-between gap-3 p-4 transition hover:border-line-300 hover:shadow-pop"
            >
              <button className="min-w-0 flex-1 text-left" onClick={() => setOpenId(d.id)}>
                <div className="flex items-center gap-1.5">
                  <span className="chip bg-primary-50 text-primary-700">
                    {DOC_TYPE_LABEL[d.knowledge.doc_type] ?? d.knowledge.doc_type}
                  </span>
                  <StatusPill
                    status={d.knowledge.status_hint}
                    label={STATUS_LABEL[d.knowledge.status_hint]}
                  />
                  {d.knowledge.generated_by === "rule" ? (
                    <span className="pill bg-clay-50 text-clay-600">
                      <Sparkle size={10} />
                      自动整理
                    </span>
                  ) : null}
                  {d.category ? (
                    <span className="chip max-w-[16rem] truncate bg-paper-200 text-ink-500">
                      {d.category.full_path}
                    </span>
                  ) : null}
                </div>
                <p className="mt-1.5 truncate text-sm font-medium text-ink-900 group-hover:text-primary-700">
                  {d.title}
                </p>
                <p className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-2xs text-ink-400">
                  <span className="inline-flex items-center gap-1">
                    <Link2 size={11} />
                    {SOURCE_LABEL[d.knowledge.source_kind] ?? d.knowledge.source_kind}
                  </span>
                  {d.source ? <span className="max-w-[22rem] truncate">「{d.source.title}」</span> : null}
                  <span>{new Date(d.updated_at).toLocaleString("zh-CN")}</span>
                </p>
                {/* 标签是备忘录的检索入口，卡片上就露出来，不用点开才知道归在哪 */}
                {d.tags.length > 0 ? (
                  <div className="mt-1.5 flex flex-wrap gap-1">
                    {d.tags.slice(0, 5).map((t) => (
                      <span key={t.id} className="chip bg-primary-50 text-primary-700">
                        #{t.name}
                      </span>
                    ))}
                  </div>
                ) : null}
              </button>
              <Button variant="ghost" size="sm" className="shrink-0" onClick={() => setOpenId(d.id)}>
                打开
              </Button>
            </li>
          ))}
        </ul>
      )}

      {cursor && (
        <div className="mt-4 text-center">
          <Button variant="ghost" disabled={loading} onClick={() => void load(cursor)}>
            {loading ? "加载中…" : "加载更多"}
          </Button>
        </div>
      )}
        </div>
      </div>

      {composing && (
        <KnowledgeComposer
          wsId={wsId}
          categories={categories}
          catBusy={catBusy}
          onCreateCategory={createCategory}
          onClose={() => setComposing(false)}
          onCreated={onCreated}
        />
      )}

      {openId && (
        <KnowledgeDrawer
          wsId={wsId}
          itemId={openId}
          categories={categories}
          onClose={() => setOpenId(null)}
          onChanged={() => {
            void load(null);
            void loadCategories();
          }}
        />
      )}
    </AppShell>
  );
}

/** 左侧分类树：一层一层缩进，点一下就把列表收窄到该分类（含子分类）。 */
function CategorySidebar({
  categories,
  selected,
  onSelect,
  busy,
  onCreate,
}: {
  categories: KnowledgeCategoryNode[];
  selected: string | null;
  onSelect: (value: string | null) => void;
  busy: boolean;
  onCreate: (name: string, parentId: string | null) => void;
}) {
  const [adding, setAdding] = useState(false);
  const [name, setName] = useState("");
  const [parentId, setParentId] = useState("");

  return (
    <aside className="card h-fit p-3 lg:sticky lg:top-4">
      <div className="flex items-center justify-between px-1 py-1">
        <span className="text-2xs font-medium uppercase tracking-wide text-ink-400">分类</span>
        <button className="link text-2xs" onClick={() => setAdding((v) => !v)}>
          {adding ? "取消" : "＋ 新建"}
        </button>
      </div>

      {adding && (
        <form
          className="mt-2 space-y-1.5 rounded-lg border border-line-200 bg-paper-50 p-2"
          onSubmit={(e) => {
            e.preventDefault();
            const value = name.trim();
            if (!value) return;
            onCreate(value, parentId || null);
            setName("");
            setAdding(false);
          }}
        >
          <input
            className="input h-8 text-sm"
            placeholder="分类名，例如「部署」"
            value={name}
            autoFocus
            onChange={(e) => setName(e.target.value)}
            aria-label="新分类名"
          />
          <select
            className="input h-8 text-sm"
            value={parentId}
            onChange={(e) => setParentId(e.target.value)}
            aria-label="父分类"
          >
            <option value="">放在最外层</option>
            {categories
              .filter((c) => c.depth < 3)
              .map((c) => (
                <option key={c.id} value={c.id}>
                  {c.full_path} 下
                </option>
              ))}
          </select>
          <Button variant="primary" size="sm" type="submit" disabled={busy || !name.trim()}>
            创建
          </Button>
        </form>
      )}

      <nav className="mt-2 space-y-0.5">
        <CategoryButton active={selected === null} onClick={() => onSelect(null)}>
          全部知识
        </CategoryButton>
        <CategoryButton active={selected === "none"} onClick={() => onSelect("none")}>
          未分类
        </CategoryButton>
        {categories.map((c) => (
          <CategoryButton
            key={c.id}
            active={selected === c.id}
            indent={c.depth - 1}
            onClick={() => onSelect(c.id)}
          >
            <span className="truncate">{c.name}</span>
            {c.doc_count > 0 ? <span className="text-2xs text-ink-400">{c.doc_count}</span> : null}
          </CategoryButton>
        ))}
      </nav>

      {categories.length === 0 ? (
        <p className="mt-2 px-1 text-2xs leading-relaxed text-ink-400">
          还没有分类。先建一层「研发 / 部署」这样的目录，知识才有地方落脚。
        </p>
      ) : null}
    </aside>
  );
}

function CategoryButton({
  active,
  indent = 0,
  onClick,
  children,
}: {
  active: boolean;
  indent?: number;
  onClick: () => void;
  children: React.ReactNode;
}) {
  return (
    <button
      onClick={onClick}
      style={{ paddingLeft: `${8 + indent * 14}px` }}
      className={`flex w-full items-center justify-between gap-2 rounded-lg py-1.5 pr-2 text-sm transition-colors ${
        active
          ? "bg-white text-ink-900 shadow-sm ring-1 ring-line-200"
          : "text-ink-600 hover:bg-white/60 hover:text-ink-800"
      }`}
    >
      {children}
    </button>
  );
}

/** 新建知识：标题、类型、分类、标签、正文一起填，不再是「输入标题就算完」。 */
function KnowledgeComposer({
  wsId,
  categories,
  catBusy,
  onCreateCategory,
  onClose,
  onCreated,
}: {
  wsId: string;
  categories: KnowledgeCategoryNode[];
  catBusy: boolean;
  onCreateCategory: (name: string, parentId: string | null) => Promise<KnowledgeCategoryNode | null>;
  onClose: () => void;
  onCreated: (doc: Knowledge) => void;
}) {
  const [title, setTitle] = useState("");
  const [docType, setDocType] = useState("note");
  const [body, setBody] = useState("");
  const [tags, setTags] = useState("");
  const [categoryId, setCategoryId] = useState("");
  const [newCat, setNewCat] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const parentDepth = categories.find((c) => c.id === categoryId)?.depth ?? 0;
  const canAddCategory = parentDepth < 3 && Boolean(newCat.trim());
  const canSave = Boolean(title.trim()) && !busy;

  async function addCategory() {
    const name = newCat.trim();
    if (!name || !canAddCategory) return;
    const created = await onCreateCategory(name, categoryId || null);
    if (created) {
      setCategoryId(created.id);
      setNewCat("");
    }
  }

  async function save() {
    if (!canSave) return;
    setBusy(true);
    setError(null);
    try {
      const doc = await api.post<Knowledge>(`/workspaces/${wsId}/knowledge`, {
        title: title.trim(),
        body_md: body,
        doc_type: docType,
        tag_names: tags.split(/[\s,，]+/).filter(Boolean),
        category_id: categoryId || null,
      });
      onCreated(doc);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "保存失败");
    } finally {
      setBusy(false);
    }
  }

  return (
    <Sheet
      open
      onClose={onClose}
      size="xl"
      title="记一条知识"
      subtitle="标题、正文、标签、分类一次填完；保存后可以继续贴图、传附件。"
      footer={
        <div className="flex flex-wrap items-center gap-2">
          <Button variant="primary" disabled={!canSave} onClick={() => void save()}>
            {busy ? "保存中…" : "保存并继续写"}
          </Button>
          <Button variant="ghost" disabled={busy} onClick={onClose}>
            取消
          </Button>
          <span className="ml-auto text-2xs text-ink-400">
            先存成草稿，核对发布后才进团队检索
          </span>
        </div>
      }
    >
      <div className="space-y-4">
        <label className="block">
          <span className="label">标题</span>
          <input
            className="input text-base font-medium"
            placeholder="一句话说清这条知识是什么，比如「回滚前先停掉灰度」"
            value={title}
            autoFocus
            onChange={(e) => setTitle(e.target.value)}
            aria-label="标题"
          />
        </label>

        <div className="grid gap-3 sm:grid-cols-2">
          <label className="block">
            <span className="label">类型</span>
            <select
              className="input"
              value={docType}
              onChange={(e) => setDocType(e.target.value)}
              aria-label="类型"
            >
              {Object.entries(DOC_TYPE_LABEL).map(([key, label]) => (
                <option key={key} value={key}>
                  {label}
                </option>
              ))}
            </select>
          </label>
          <label className="block">
            <span className="label">分类</span>
            <select
              className="input"
              value={categoryId}
              onChange={(e) => setCategoryId(e.target.value)}
              aria-label="分类"
            >
              <option value="">未分类</option>
              {categories.map((c) => (
                <option key={c.id} value={c.id}>
                  {c.full_path}
                </option>
              ))}
            </select>
          </label>
        </div>

        <div className="rounded-xl border border-line-200 bg-paper-50 p-2.5">
          <span className="label">在当前分类下新建子分类（最多三级）</span>
          <div className="flex gap-2">
            <input
              className="input h-9 flex-1 text-sm"
              placeholder={parentDepth >= 3 ? "已经到第三级了" : "子分类名"}
              value={newCat}
              disabled={parentDepth >= 3}
              onChange={(e) => setNewCat(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  e.preventDefault();
                  void addCategory();
                }
              }}
              aria-label="新建子分类"
            />
            <Button
              variant="ghost"
              disabled={!canAddCategory || catBusy}
              onClick={() => void addCategory()}
            >
              新建
            </Button>
          </div>
        </div>

        <label className="block">
          <span className="label">标签（空格或逗号分隔）</span>
          <input
            className="input"
            placeholder="例如：发布 事故"
            value={tags}
            onChange={(e) => setTags(e.target.value)}
            aria-label="标签"
          />
        </label>

        <div>
          <span className="label">正文</span>
          {/* 和详情抽屉同一个富文本编辑器：新建时就该能排版、写表格，而不是先存一个纯文本框 */}
          <div className="rounded-xl border border-line-200 bg-paper-50 px-3 py-2">
            <RichTextEditor
              ariaLabel="正文"
              wsId={wsId}
              value={body}
              onChange={setBody}
              minHeight={320}
              onError={setError}
              placeholder={"写下要点、步骤、结论…\n\n标题、类型、分类、标签都在上面，正文就是这张备忘的主体。"}
            />
          </div>
        </div>

        {error && <InlineAlert>{error}</InlineAlert>}
      </div>
    </Sheet>
  );
}

/** 知识详情抽屉：能改、能提交审议、能发布/归档。 */
function KnowledgeDrawer({
  wsId,
  itemId,
  categories,
  onClose,
  onChanged,
}: {
  wsId: string;
  itemId: string;
  categories: KnowledgeCategoryNode[];
  onClose: () => void;
  onChanged: () => void;
}) {
  const [doc, setDoc] = useState<Knowledge | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const [tags, setTags] = useState("");
  const [categoryId, setCategoryId] = useState("");
  const [attachments, setAttachments] = useState<Attachment[]>([]);
  /** 附件 id → 带签名的直链（见 lib/attachmentUrls.ts） */
  const resources = useMemo(() => {
    const map: Record<string, string> = {};
    for (const row of attachments) {
      if (row.raw_url) map[row.id] = row.raw_url;
    }
    return map;
  }, [attachments]);
  const [busy, setBusy] = useState(false);
  /** 已经载入完成的是哪一条知识。重复的 effect / 慢响应不该再覆盖用户正在敲的内容。 */
  const loadedFor = useRef<string | null>(null);

  const load = useCallback(
    async (force = false) => {
      if (!force && loadedFor.current === itemId) return;
      try {
        const data = await api.get<Knowledge>(`/workspaces/${wsId}/knowledge/${itemId}`);
        setDoc(data);
        setTitle(data.title);
        setBody(data.body_md);
        setTags(data.tags.map((t) => t.name).join(" "));
        setCategoryId(data.category?.id ?? "");
        setAttachments(data.attachments ?? []);
        loadedFor.current = itemId;
      } catch (err) {
        setError(err instanceof ApiError ? err.message : "加载失败");
      }
    },
    [wsId, itemId],
  );

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

  async function save() {
    if (!doc) return;
    setBusy(true);
    setError(null);
    try {
      const next = await api.patch<Knowledge>(`/workspaces/${wsId}/knowledge/${itemId}`, {
        title,
        body_md: body,
        tag_names: tags.split(/[\s,，]+/).filter(Boolean),
        ...(categoryId ? { category_id: categoryId } : { clear_category: true }),
        version: doc.version,
      });
      setDoc(next);
      onChanged();
    } catch (err) {
      if (err instanceof ApiError && err.code === 4009) {
        setError("刚被别人改过，已刷新为最新内容");
        await load(true);
      } else {
        setError(err instanceof ApiError ? err.message : "保存失败");
      }
    } finally {
      setBusy(false);
    }
  }

  async function act(action: string) {
    if (!doc) return;
    setBusy(true);
    setError(null);
    try {
      const next = await api.post<Knowledge>(`/workspaces/${wsId}/knowledge/${itemId}/status`, {
        action,
        version: doc.version,
      });
      setDoc(next);
      onChanged();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "操作失败");
      await load(true);
    } finally {
      setBusy(false);
    }
  }

  const status = doc?.knowledge.status_hint;
  const canEdit = status === "draft" || status === "in_review";
  const actions: { key: string; label: string; show: boolean }[] = [
    { key: "submit_review", label: ACTION_LABEL.submit_review, show: status === "draft" },
    { key: "withdraw", label: ACTION_LABEL.withdraw, show: status === "in_review" },
    { key: "publish", label: ACTION_LABEL.publish, show: status === "draft" || status === "in_review" },
    {
      key: "archive",
      label: ACTION_LABEL.archive,
      show: status === "draft" || status === "in_review" || status === "published",
    },
    { key: "restore", label: ACTION_LABEL.restore, show: status === "archived" },
  ];

  return (
    <Sheet
      open
      onClose={onClose}
      size="xl"
      title={doc ? doc.title : "知识"}
      subtitle={
        doc
          ? [doc.category?.full_path, DOC_TYPE_LABEL[doc.knowledge.doc_type] ?? doc.knowledge.doc_type]
              .filter(Boolean)
              .join(" · ")
          : "加载中…"
      }
      footer={
        doc ? (
          <div className="flex flex-wrap items-center gap-2">
            {canEdit ? (
              <Button variant="primary" disabled={busy} onClick={() => void save()}>
                {busy ? "保存中…" : "保存"}
              </Button>
            ) : null}
            {actions
              .filter((a) => a.show)
              .map((a) => (
                <Button
                  key={a.key}
                  variant={a.key === "publish" ? "clay" : "ghost"}
                  disabled={busy}
                  onClick={() => void act(a.key)}
                >
                  {a.label}
                </Button>
              ))}
            <span className="ml-auto text-2xs text-ink-400">
              {doc.knowledge.published_at
                ? `发布于 ${new Date(doc.knowledge.published_at).toLocaleString("zh-CN")}`
                : "尚未发布，只有你能看到"}
            </span>
          </div>
        ) : null
      }
    >
      {!doc ? (
        <p className="text-sm text-ink-400">{error ?? "加载中…"}</p>
      ) : (
        <div className="space-y-4">
          <div className="rounded-xl border border-line-200 bg-paper-50 p-3.5 text-xs leading-relaxed text-ink-600">
            <div className="flex items-center gap-1.5">
              <Link2 size={12} className="text-ink-400" />
              {doc.source ? (
                <span>
                  来源：{doc.source.kind === "ticket" ? "工单" : "任务"}「{doc.source.title}」
                </span>
              ) : (
                <span>来源：手记（没有关联的事项）</span>
              )}
            </div>
            <p className="mt-1 text-ink-400">
              {doc.knowledge.generated_by === "rule"
                ? "这份草稿由系统整理，请核对后再发布。"
                : "手动创建。"}
              {doc.knowledge.published_at
                ? ` 发布于 ${new Date(doc.knowledge.published_at).toLocaleString("zh-CN")}。`
                : ""}
            </p>
          </div>

          <input
            className="input text-base font-medium"
            value={title}
            disabled={!canEdit}
            onChange={(e) => setTitle(e.target.value)}
            aria-label="标题"
          />

          <div className="grid gap-3 sm:grid-cols-2">
            <label className="block">
              <span className="label">分类</span>
              <select
                className="input"
                value={categoryId}
                disabled={!canEdit}
                onChange={(e) => setCategoryId(e.target.value)}
                aria-label="分类"
              >
                <option value="">未分类</option>
                {categories.map((c) => (
                  <option key={c.id} value={c.id}>
                    {c.full_path}
                  </option>
                ))}
              </select>
            </label>
            <label className="block">
              <span className="label">标签（空格或逗号分隔）</span>
              <input
                className="input"
                value={tags}
                disabled={!canEdit}
                onChange={(e) => setTags(e.target.value)}
                placeholder="例如：发布 事故"
                aria-label="标签"
              />
            </label>
          </div>

          <div className="rounded-xl border border-line-200 bg-paper-50 px-3 py-2">
            <RichTextEditor
              ariaLabel="正文"
              wsId={wsId}
              itemId={doc.id}
              value={body}
              onChange={setBody}
              resources={resources}
              onUploaded={(created) =>
                setAttachments((prev) =>
                  prev.some((row) => row.id === created.id)
                    ? prev
                    : [...prev, created as unknown as Attachment],
                )
              }
              onError={(message) => setError(message)}
              disabled={!canEdit}
            />
          </div>

          <div className="rounded-xl border border-line-200 bg-paper-50 px-3 py-2.5">
            <AttachmentPanel
              wsId={wsId}
              itemId={doc.id}
              attachments={attachments}
              onChange={setAttachments}
              onError={(message) => setError(message)}
              disabled={!canEdit}
            />
          </div>

          {error && <InlineAlert>{error}</InlineAlert>}
        </div>
      )}
    </Sheet>
  );
}