import React from "react";

function ensureStyle(id, css) {
  if (typeof document === "undefined") return;
  if (document.getElementById(id)) return;
  const el = document.createElement("style");
  el.id = id; el.textContent = css;
  document.head.appendChild(el);
}

ensureStyle("at-palette", `
  .at-palette{width:min(520px,100%);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
    background:var(--bg-page);box-shadow:var(--shadow-md);overflow:hidden;display:grid;font-family:var(--font-sans)}
  .at-palette__head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border-subtle)}
  .at-palette__input{flex:1;border:0;outline:0;font:inherit;font-size:14px;background:transparent;color:var(--fg-1)}
  .at-palette__context{background:var(--at-plum-200);color:var(--fg-2);padding:2px 8px;border-radius:var(--radius-xs);font-size:11px;font-weight:500}
  .at-palette__list{padding:6px}
  .at-palette__sec{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-4);padding:8px 10px 4px}
  .at-palette__item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--radius-sm);
    font-size:13px;color:var(--fg-2);cursor:pointer;transition:background .12s ease,color .12s ease}
  .at-palette__meta{color:var(--fg-3);font-size:11px;margin-left:auto;font-family:var(--font-mono)}
  .at-palette__item.is-active,.at-palette__item:hover{background:var(--at-flush-50);color:var(--at-flush-700)}
  .at-palette__item.is-active .at-palette__meta,.at-palette__item:hover .at-palette__meta{color:var(--at-flush-700)}
  .at-palette__foot{border-top:1px solid var(--border-subtle);padding:6px 12px;display:flex;gap:14px;
    font-size:11px;color:var(--fg-3);font-family:var(--font-mono)}
`);

const DEFAULT_HINTS = ["↑↓ navigate", "⏎ select", "esc close"];

/**
 * Reusable command-palette shell: search head with an optional context tag,
 * grouped result list with a flush active row, and a keyboard-hint footer.
 * The applied ⌘K palette in ui_kits/app is an instance bound to real search.
 */
export function CommandPalette({
  query = "",
  placeholder = "Search…",
  context,
  groups = [],
  hints = DEFAULT_HINTS,
  onQueryChange,
  onSelect,
}) {
  return (
    <div className="at-palette" role="dialog" aria-label="Command palette">
      <div className="at-palette__head">
        <input
          className="at-palette__input"
          type="text"
          value={query}
          placeholder={placeholder}
          aria-label="Command palette search"
          readOnly={!onQueryChange}
          onChange={onQueryChange ? (e) => onQueryChange(e.target.value) : undefined}
        />
        {context && <span className="at-palette__context">{context}</span>}
      </div>
      <div className="at-palette__list" role="listbox">
        {groups.map((group, gi) => (
          <React.Fragment key={gi}>
            {group.label && <div className="at-palette__sec">{group.label}</div>}
            {group.items.map((item, ii) => (
              <div
                key={ii}
                className={"at-palette__item" + (item.active ? " is-active" : "")}
                role="option"
                aria-selected={item.active ? "true" : "false"}
                onClick={onSelect ? () => onSelect(item) : undefined}
              >
                {item.label}
                {item.meta && <span className="at-palette__meta">{item.meta}</span>}
              </div>
            ))}
          </React.Fragment>
        ))}
      </div>
      <div className="at-palette__foot">
        {hints.map((hint, i) => <span key={i}>{hint}</span>)}
      </div>
    </div>
  );
}