// Bottom console — logs simulated runs. Monospace, paper-tone.
function Console({ logs, running, onRun, onClear, onStop }) {
  const scrollRef = React.useRef(null);
  React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [logs.length]);

  return (
    <section className="console">
      <header className="console-head">
        <div className="console-title-wrap">
          <span className="console-eyebrow">Output</span>
          <h4 className="console-title">Console</h4>
        </div>
        <div className="console-tabs">
          <button className="tab is-on">Logs</button>
          <button className="tab">Variables</button>
          <button className="tab">Trace</button>
        </div>
        <div className="console-actions">
          <button className="btn ghost" onClick={onClear}>Clear</button>
          {running ? (
            <button className="btn stop" onClick={onStop}>◼ Stop</button>
          ) : (
            <button className="btn run" onClick={onRun}>▸ Run flow</button>
          )}
        </div>
      </header>
      <div className="console-body" ref={scrollRef}>
        {logs.length === 0 && <div className="log-empty">Press <kbd>Run flow</kbd> to simulate execution.</div>}
        {logs.map((l, i) => (
          <div key={i} className={`log-line level-${l.level}`}>
            <span className="log-time">{l.time}</span>
            <span className="log-tag">{l.tag}</span>
            <span className="log-msg">{l.msg}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Console });