// Cmd+K search palette
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

function CmdK({ open, onClose, posts, onOpen }) {
  const [q, setQ] = useStateS("");
  const [idx, setIdx] = useStateS(0);
  const inputRef = useRefS(null);

  useEffectS(() => {
    if (open) {
      setQ("");
      setIdx(0);
      setTimeout(() => inputRef.current?.focus(), 30);
    }
  }, [open]);

  const results = posts.filter((p) => {
    if (!q) return true;
    const s = (p.title + p.subtitle + p.excerpt + p.category).toLowerCase();
    return s.includes(q.toLowerCase());
  });

  useEffectS(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowDown") {
        e.preventDefault();
        setIdx((i) => Math.min(results.length - 1, i + 1));
      }
      if (e.key === "ArrowUp") {
        e.preventDefault();
        setIdx((i) => Math.max(0, i - 1));
      }
      if (e.key === "Enter") {
        if (results[idx]) {
          onOpen(results[idx].slug);
          onClose();
        }
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, results, idx, onClose, onOpen]);

  if (!open) return null;

  return (
    <div className="cmdk-backdrop" onClick={onClose}>
      <div className="cmdk" onClick={(e) => e.stopPropagation()}>
        <div className="cmdk-input-row">
          <span className="cmdk-glyph">⌕</span>
          <input
            ref={inputRef}
            className="cmdk-input"
            placeholder="搜索文章 — 标题、副标题、关键词"
            value={q}
            onChange={(e) => { setQ(e.target.value); setIdx(0); }}
          />
          <kbd className="cmdk-kbd">esc</kbd>
        </div>
        <div className="cmdk-list">
          {results.length === 0 ? (
            <div className="cmdk-empty">没找到「{q}」相关的内容</div>
          ) : results.map((p, i) => (
            <div
              key={p.slug}
              className={`cmdk-row ${i === idx ? "active" : ""}`}
              onMouseEnter={() => setIdx(i)}
              onClick={() => { onOpen(p.slug); onClose(); }}
            >
              <div className="cmdk-row-title">{p.title}</div>
              <div className="cmdk-row-meta">
                <span>{p.category}</span>
                <span className="dot">·</span>
                <span>{fmtDate(p.date)}</span>
              </div>
            </div>
          ))}
        </div>
        <div className="cmdk-foot">
          <span><kbd>↑↓</kbd> 切换</span>
          <span><kbd>↵</kbd> 打开</span>
          <span><kbd>esc</kbd> 关闭</span>
        </div>
      </div>
    </div>
  );
}

window.CmdK = CmdK;