const { Icon: CmdIcon } = window;

function CommandPalette({ onClose }) {
  const { COMMAND_GROUPS } = window.DATA;
  const [q, setQ] = React.useState('');
  const [activeIdx, setActiveIdx] = React.useState(0);
  const isAi = q.trim().length > 0;

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  return (
    <div className="cmd-overlay" onClick={onClose}>
      <div className="cmd" onClick={e => e.stopPropagation()}>
        <div className="cmd-input-wrap">
          <CmdIcon name={isAi ? 'sparkle' : 'search'} />
          <input
            className="cmd-input"
            autoFocus
            value={q}
            onChange={e => setQ(e.target.value)}
            placeholder="搜索、跳转，或用自然语言让 Agent 执行…"
          />
          {isAi && <span className="cmd-mode">Ask Agent</span>}
        </div>

        <div className="cmd-list">
          {isAi ? (
            <>
              <div className="cmd-group-label">Agent 将执行</div>
              <div className="cmd-item active">
                <CmdIcon name="sparkle" />
                <div className="cmd-item-label">{q}</div>
                <div className="cmd-item-shortcut"><span className="kbd">↵</span></div>
              </div>
              <div className="cmd-group-label">或搜索邮件</div>
              <div className="cmd-item">
                <CmdIcon name="search" />
                <div className="cmd-item-label">在所有邮件中搜索 "{q}"</div>
                <div className="cmd-item-shortcut"><span className="kbd">⌘</span><span className="kbd">↵</span></div>
              </div>
            </>
          ) : (
            COMMAND_GROUPS.map((g, gi) => (
              <React.Fragment key={gi}>
                <div className="cmd-group-label">{g.label}</div>
                {g.items.map((it, ii) => (
                  <div
                    key={ii}
                    className={`cmd-item ${gi === 0 && ii === activeIdx ? 'active' : ''}`}
                    onMouseEnter={() => gi === 0 && setActiveIdx(ii)}
                  >
                    <CmdIcon name={it.icon} />
                    <div className="cmd-item-label">{it.label}</div>
                    {it.hint && <div className="cmd-item-hint">{it.hint}</div>}
                    <div className="cmd-item-shortcut">
                      {it.shortcut.map((k, ki) => <span key={ki} className="kbd">{k}</span>)}
                    </div>
                  </div>
                ))}
              </React.Fragment>
            ))
          )}
        </div>

        <div className="cmd-ai-hint">
          <span className="live-dot" />
          提示：直接输入自然语言让 Agent 为你执行 — "归档所有 receipts"、"把 Anna 的邮件标为待办"
        </div>
      </div>
    </div>
  );
}

window.CommandPalette = CommandPalette;