// Caret landing — the command panel (dark-glass HUD) + the animated keyboard-flow engine.

// Default "Quick" tab actions shown in the panel list.
const QUICK_ACTIONS = [
  { alias: 'ss', name: 'Summarize',    icon: 'align-left',   desc: 'Condense the selection' },
  { alias: 'fg', name: 'Fix grammar',  icon: 'spell-check',  desc: 'Spelling & grammar' },
  { alias: 'ak', name: 'Ask anything', icon: 'message-circle-question', desc: 'Your typed prompt' },
  { alias: 'ex', name: 'Explain this',      icon: 'lightbulb',    desc: 'Plain-language answer' },
  { alias: 'lu', name: 'Lookup word', icon: 'book-open', desc: 'Dictionary lookup' },
];

// Presentational panel. Driven entirely by props.
function CaretPanel({ query = '', showCursor = false, mode = 'list', activeAlias = null,
                      result = '', streaming = false, tab = 'Quick',
                      actions = QUICK_ACTIONS, resultLabel = 'Summarize · result' }) {
  return (
    <div className="hud">
      <div className="hud-input">
        <span className="hud-caret"><Icon name="chevron-right" size={20} color="var(--accent)" stroke={2.6} /></span>
        <span className="hud-query">
          {query
            ? <span>{query}</span>
            : <span className="ph">Search actions, or type an alias…</span>}
          {showCursor && <span className="hud-cursor" />}
        </span>
        <Combo keys={['⌥','Space']} dark />
      </div>

      {mode === 'list' && (
        <React.Fragment>
          <div className="hud-tablabel">{tab}</div>
          <div className="hud-list">
            {actions.map((a) => {
              const active = activeAlias === a.alias;
              return (
                <div key={a.alias} className={'hud-row' + (active ? ' active' : '')}>
                  <span className="ico"><Icon name={a.icon} size={17} color="#fff" stroke={2} /></span>
                  <span className="nm">{a.name}</span>
                  <span className="desc">{a.desc}</span>
                  <Alias dark>{a.alias}</Alias>
                </div>
              );
            })}
          </div>
        </React.Fragment>
      )}

      {mode === 'result' && (
        <div className="hud-result">
          <div className="rlabel">
            {streaming ? <span className="hud-spinner" /> : <Icon name="check" size={13} color="var(--green)" stroke={3} />}
            {resultLabel}
          </div>
          <div className="rtext">
            {result}{streaming && <span className="hud-cursor" />}
          </div>
        </div>
      )}

      <div className="hud-foot">
        {mode === 'list' ? (
          <React.Fragment>
            <span className="hint"><Key dark>↩</Key> Run</span>
            <span className="hint"><Key dark>↑</Key><Key dark>↓</Key> Navigate</span>
            <span className="hint"><Key dark>esc</Key> Dismiss</span>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <span className="hint"><Combo keys={['⌘','↩']} dark /> Insert</span>
            <span className="hint"><Combo keys={['⌘','⇧','↩']} dark /> Replace</span>
            <span className="hint"><Combo keys={['⌘','C']} dark /> Copy</span>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

// ——— generic looping timeline engine ———
// events: [{ t, patch }] applied cumulatively over `initial`; resets each loop.
function useTimeline(events, initial, loopMs, enabled, staticState) {
  const [state, setState] = useState(enabled ? initial : (staticState || initial));
  useEffect(() => {
    if (!enabled) { setState(staticState || initial); return; }
    let timers = [];
    function run() {
      setState(initial);
      events.forEach((ev) => {
        timers.push(setTimeout(() =>
          setState((s) => ({ ...s, ...(typeof ev.patch === 'function' ? ev.patch(s) : ev.patch) })), ev.t));
      });
      timers.push(setTimeout(run, loopMs));
    }
    run();
    return () => timers.forEach(clearTimeout);
  }, [enabled]);
  return state;
}

// Build streaming word-reveal events for a result string.
function streamEvents(words, startT, stepMs, key = 'result') {
  return words.map((_, i) => ({
    t: startT + i * stepMs,
    patch: { [key]: words.slice(0, i + 1).join(' ') },
  }));
}

Object.assign(window, { CaretPanel, QUICK_ACTIONS, useTimeline, streamEvents });