import { knowledgeItems } from "../data/mockData";
import DraggableFab from "../components/DraggableFab";
import Segmented from "../components/Segmented";
import StatusPill from "../components/StatusPill";
import { openWindow } from "../utils/navigation";

export default function KnowledgePage({ active, setActive }) {
  const types = ["全部", "视频", "图片", "文件", "案例", "其他"];
  const filtered = active === "全部" ? knowledgeItems : knowledgeItems.filter((item) => item.type === active);

  return (
    <section className="space-y-3 pb-20">
      <Segmented items={types} active={active} onChange={setActive} />
      <div className="space-y-3">
        {filtered.map((item) => (
          <article key={item.title} className="list-card" onClick={() => openWindow("/window/knowledge-detail")}>
            <div className="min-w-0">
              <div className="flex items-center gap-2">
                <h3 className="truncate text-[14px] font-extrabold">{item.title}</h3>
              </div>
              <p className="mt-2 text-[12px] text-muted">更新 {item.updated} · 引用 {item.refs} 次</p>
            </div>
            <div className="flex shrink-0 self-center items-center justify-center gap-4">
              <span className="text-[12px] font-bold text-warning">{item.version}</span>
              <StatusPill tone={item.status === "已生效" ? "success" : item.status === "未生效" ? "warning" : "muted"} label={item.status} />
            </div>
          </article>
        ))}
      </div>
      <DraggableFab onClick={() => openWindow("/window/knowledge-create")} ariaLabel="新增知识库" />
    </section>
  );
}
