// TerminalPane — left pane. Monospace, dark, auto-scrolls, blinking caret.

function TerminalPane({ lines, elapsedMs, loopMs }) {
  const { React } = window;
  const { useRef, useEffect } = React;
  const bodyRef = useRef(null);

  useEffect(() => {
    const el = bodyRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [lines.length]);

  const elapsedStr = (() => {
    const total = Math.floor(elapsedMs);
    const m = Math.floor(total / 60000);
    const s = Math.floor((total % 60000) / 1000);
    const ms = Math.floor((total % 1000) / 10);
    return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}.${String(ms).padStart(2,'0')}`;
  })();

  const levelClass = {
    info:    'term-info',
    phase:   'term-phase',
    agent:   'term-agent',
    finding: 'term-finding',
    exploit: 'term-exploit',
  };
  const levelTag = {
    info: 'INFO', phase: 'PHASE', agent: 'AGENT',
    finding: 'FINDING', exploit: 'EXPLOIT',
  };

  return (
    <div className="term-root">
      <div className="term-chrome">
        <div className="term-chrome-left">
          <span className="rec-dot" />
          <span className="rec-label">REC</span>
          <span className="term-elapsed">{elapsedStr}</span>
        </div>
        <div className="term-chrome-cmd">
          <span className="term-prompt">$</span>&nbsp;sekura scan --target acme-payments-api --mode full
        </div>
        <div className="term-chrome-right">
          <span className="term-dot term-dot--amber" />
          <span className="term-dot term-dot--coral" />
          <span className="term-dot term-dot--forest" />
        </div>
      </div>

      <div className="term-body" ref={bodyRef}>
        {lines.map((ln, i) => {
          const isLast = i === lines.length - 1;
          const shown = ln.text.slice(0, ln.typedChars);
          return (
            <div key={`${ln.t}-${i}`} className={`term-line ${levelClass[ln.level]}`}>
              <span className="term-level">[{levelTag[ln.level]}]</span>
              <span className="term-text">{shown}{isLast && <span className="term-caret" />}</span>
            </div>
          );
        })}
      </div>

      <div className="term-footer">
        <span className="term-muted">orchestrator</span>
        <span className="term-sep">·</span>
        <span className="term-muted">{lines.length} lines</span>
        <span className="term-sep">·</span>
        <span className="term-muted">loop {Math.floor(loopMs / 1000)}s</span>
      </div>
    </div>
  );
}

window.TerminalPane = TerminalPane;