/* SearchOverlay — Cmd+K-style modal search. */

function SearchOverlay({ open, onClose, onOpenPost }) {
  const [q, setQ] = React.useState("");
  const [selected, setSelected] = React.useState(0);
  const inputRef = React.useRef(null);

  const results = React.useMemo(() => {
    const query = q.trim().toLowerCase();
    const posts = window.BLOG_POSTS || [];
    if (!query) return posts.slice(0, 6);
    return posts.filter(p =>
      p.title.toLowerCase().includes(query) ||
      p.summary.toLowerCase().includes(query) ||
      p.tags.some(t => t.toLowerCase().includes(query))
    );
  }, [q]);

  React.useEffect(() => {
    if (open) {
      setQ("");
      setSelected(0);
      setTimeout(() => inputRef.current && inputRef.current.focus(), 30);
    }
  }, [open]);

  React.useEffect(() => { setSelected(0); }, [q]);

  function keydown(e) {
    if (e.key === "Escape") onClose();
    else if (e.key === "ArrowDown") {
      e.preventDefault();
      setSelected(s => Math.min(results.length - 1, s + 1));
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setSelected(s => Math.max(0, s - 1));
    } else if (e.key === "Enter") {
      e.preventDefault();
      const r = results[selected];
      if (r) { onOpenPost(r.id); onClose(); }
    }
  }

  if (!open) return null;
  return (
    <div style={soStyles.scrim} onClick={onClose}>
      <div style={soStyles.modal} onClick={(e) => e.stopPropagation()}>
        <div style={soStyles.inputRow}>
          <i data-lucide="search" style={{ width: 16, height: 16, color: "var(--fg-tertiary)" }}></i>
          <input
            ref={inputRef}
            value={q}
            onChange={(e) => setQ(e.target.value)}
            onKeyDown={keydown}
            placeholder="Search posts, tags, anything…"
            style={soStyles.input}
          />
          <kbd>esc</kbd>
        </div>
        <div style={soStyles.results}>
          {results.length === 0 ? (
            <div style={soStyles.empty}>No matches. Try a tag like <span style={{ fontFamily: "var(--font-mono)" }}>#systems</span>.</div>
          ) : results.map((r, i) => (
            <button key={r.id} type="button"
                    onClick={() => { onOpenPost(r.id); onClose(); }}
                    onMouseEnter={() => setSelected(i)}
                    style={{
                      ...soStyles.row,
                      background: i === selected ? "var(--bg-subtle)" : "transparent",
                    }}>
              <div style={soStyles.rowMain}>
                <div style={soStyles.rowTitle}>{r.title}</div>
                <div style={soStyles.rowMeta}>
                  <span>{r.date}</span>
                  <span style={{ opacity: 0.4 }}>·</span>
                  <span>{r.read} read</span>
                  {r.tags.map(t => (
                    <React.Fragment key={t}>
                      <span style={{ opacity: 0.4 }}>·</span>
                      <span>#{t}</span>
                    </React.Fragment>
                  ))}
                </div>
              </div>
              {i === selected ? (
                <span style={soStyles.enter}>
                  <kbd>↵</kbd>
                </span>
              ) : null}
            </button>
          ))}
        </div>
        <div style={soStyles.footer}>
          <div style={soStyles.hint}><kbd>↑</kbd><kbd>↓</kbd> navigate</div>
          <div style={soStyles.hint}><kbd>↵</kbd> open</div>
          <div style={soStyles.hint}><kbd>esc</kbd> close</div>
        </div>
      </div>
    </div>
  );
}

const soStyles = {
  scrim: {
    position: "fixed", inset: 0, zIndex: 100,
    background: "color-mix(in oklab, var(--overlay, rgba(0,0,0,0.5)) 80%, transparent)",
    backdropFilter: "blur(6px)",
    WebkitBackdropFilter: "blur(6px)",
    display: "flex", justifyContent: "center", alignItems: "flex-start",
    paddingTop: "10vh",
    animation: "soFade 220ms cubic-bezier(0.16,1,0.30,1)",
  },
  modal: {
    width: "min(620px, calc(100vw - 32px))",
    background: "var(--surface-elev)",
    border: "1px solid var(--border)",
    borderRadius: 14,
    boxShadow: "var(--shadow-xl)",
    overflow: "hidden",
    animation: "soPop 220ms cubic-bezier(0.16,1,0.30,1)",
  },
  inputRow: {
    display: "flex", alignItems: "center", gap: 10,
    padding: "14px 16px",
    borderBottom: "1px solid var(--border-subtle)",
  },
  input: {
    flex: 1, border: "none", outline: "none", background: "transparent",
    fontSize: 16, color: "var(--fg)", fontFamily: "var(--font-text)",
  },
  results: { padding: 6, maxHeight: "50vh", overflowY: "auto" },
  row: {
    width: "100%", display: "flex", alignItems: "center", gap: 12,
    padding: "10px 12px", border: "none", borderRadius: 8, cursor: "pointer",
    color: "inherit", textAlign: "left", font: "inherit",
    transition: "background 120ms",
  },
  rowMain: { flex: 1, minWidth: 0 },
  rowTitle: { fontSize: 14, fontWeight: 600, letterSpacing: "-0.005em", marginBottom: 4, color: "var(--fg)" },
  rowMeta: { fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-tertiary)", display: "flex", gap: 6, flexWrap: "wrap" },
  enter: { color: "var(--fg-tertiary)" },
  empty: { padding: "32px 16px", textAlign: "center", color: "var(--fg-tertiary)", fontSize: 14 },
  footer: {
    display: "flex", gap: 16, alignItems: "center",
    padding: "10px 16px",
    borderTop: "1px solid var(--border-subtle)",
    background: "var(--bg-subtle)",
    fontSize: 11, color: "var(--fg-tertiary)",
  },
  hint: { display: "inline-flex", alignItems: "center", gap: 6 },
};

window.SearchOverlay = SearchOverlay;