import { useMemo, useState } from "react";
import { Search } from "lucide-react";
import DraggableFab from "../components/DraggableFab";
import StatusPill from "../components/StatusPill";
import { openWindow } from "../utils/navigation";

const items = [
  { id: "kb-sales-champion", title: "销售冠军高意向客户跟进案例", type: "案例", tags: ["私域成交", "高意向"], updated: "06-08", refs: 128, files: 3, version: "v2.4", status: "已生效" },
  { id: "kb-refund", title: "售后常见问题与退款边界", type: "文件", tags: ["售后", "退款"], updated: "06-05", refs: 82, files: 4, version: "v1.7", status: "已生效" },
  { id: "kb-training", title: "产品培训视频", type: "视频", tags: ["产品", "培训"], updated: "06-20", refs: 26, files: 2, version: "v1.0", status: "已生效" },
  { id: "kb-boundary", title: "售后边界说明", type: "文件", tags: ["售后", "边界"], updated: "06-18", refs: 12, files: 1, version: "v1.2", status: "已生效" },
  { id: "kb-images", title: "企业微信客户分层话术图片包", type: "图片", tags: ["客户分层", "话术"], updated: "05-30", refs: 41, files: 12, version: "v1.1", status: "已生效" },
  { id: "kb-live", title: "直播间私域导流短视频脚本", type: "视频", tags: ["直播", "私域"], updated: "05-24", refs: 35, files: 3, version: "v0.9", status: "已停用" },
];


export default function KnowledgePage() {
  const [query, setQuery] = useState("");
  const filtered = useMemo(() => items.filter((item) => {
    const keyword = `${item.title} ${item.tags.join(" ")}`.toLowerCase();
    return keyword.includes(query.toLowerCase());
  }), [query]);


  return (
    <section className="space-y-3 pb-20">
      <div className="relative"><Search className="absolute left-3 top-3 text-muted" size={16} /><input className="input-like pl-9" placeholder="搜索标题、标签或完整正文" value={query} onChange={(event) => setQuery(event.target.value)} /></div>
      
      <div className="space-y-3 [text-rendering:auto]">
        {filtered.map((item) => (
          <article key={item.id} className="panel cursor-pointer rounded-[14px] p-4 transition hover:border-primary" onClick={() => openWindow(`/window/knowledge-detail?id=${item.id}`)}>
            <div className="flex items-start justify-between gap-3"><div className="min-w-0"><h3 className="truncate text-[15px] font-extrabold">{item.title}</h3><div className="mt-2 flex flex-wrap gap-1.5"><span className="tag text-[12px] font-semibold leading-4 text-text">{item.type}</span>{item.tags.map((tag) => <span key={tag} className="tag text-[12px] font-semibold leading-4 text-text">{tag}</span>)}</div></div><StatusPill tone={item.status === "已生效" ? "success" : item.status === "待审核" ? "warning" : "muted"} label={item.status} /></div>
            <div className="mt-3 flex items-center justify-between gap-3 text-[12px] font-medium leading-5 text-muted"><span>{item.version} · 更新 {item.updated} · 引用 {item.refs}</span><span className="shrink-0">文件 {item.files} 个</span></div>
          </article>
        ))}
        {!filtered.length ? <div className="panel grid min-h-[220px] place-items-center p-6 text-center"><div><h3 className="text-[16px] font-black">暂无匹配知识</h3><p className="mt-2 text-[12px] text-muted">调整搜索关键词后重试。</p><button className="btn-secondary mt-4" onClick={() => setQuery("")}>清除筛选</button></div></div> : null}
      </div>
      <DraggableFab onClick={() => openWindow("/window/knowledge-create")} ariaLabel="新增知识库" />
    </section>
  );
}