var FALLBACK_LINES = [
  { time: '03:14:01', who: 'forge', level: 'ok', msg: 'build target=ragdrag-r7 ok' },
  { time: '03:14:02', who: 'jinx', level: 'ok', msg: 'loss=0.0421 trend=stable' },
  { time: '03:14:03', who: 'fraz', level: 'ok', msg: 'render hero/r7 done' },
  { time: '03:14:04', who: 'anvil', level: 'warn', msg: 'fuzz target=guardrail/v3' },
  { time: '03:14:05', who: 'anvil', level: 'err', msg: 'ASSERT FAILED :: filter bypassed' },
  { time: '03:14:06', who: 'anvil', level: 'err', msg: 'artifact: see ragdrag-r6-evade.md' },
  { time: '03:14:07', who: 'pete', level: 'ok', msg: '"lol of course"' },
  { time: '03:14:08', who: 'forge', level: 'ok', msg: 'patching guardrail/v3 → v3.1' },
  { time: '03:14:09', who: 'jinx', level: 'ok', msg: 'eval rerun queued · n=512' },
  { time: '03:14:10', who: 'anvil', level: 'warn', msg: 'sharpening axe' },
];

var LiveTail = function (props) {
  var show = props.show !== false;
  var tailTag = props.tailTag || 'log';

  var _lines = React.useState(null);
  var lines = _lines[0], setLines = _lines[1];

  var _visible = React.useState(3);
  var visible = _visible[0], setVisible = _visible[1];

  React.useEffect(function () {
    if (!show || !window.IBA_GHOST) return;
    window.IBA_GHOST.getTailPosts(10).then(function (data) {
      if (data.posts && data.posts.length > 0) {
        var mapped = data.posts.map(function (p) {
          var time = new Date(p.published_at);
          var hh = String(time.getHours()).padStart(2, '0');
          var mm = String(time.getMinutes()).padStart(2, '0');
          var ss = String(time.getSeconds()).padStart(2, '0');
          var author = (p.primary_author && p.primary_author.name) || 'pete';
          var firstWord = author.split(' ')[0].toLowerCase();
          var isErr = p.title.indexOf('ASSERT') >= 0 || p.title.indexOf('FAILED') >= 0 || p.title.indexOf('ERROR') >= 0;
          var isWarn = p.title.indexOf('fuzz') >= 0 || p.title.indexOf('warn') >= 0 || p.title.indexOf('sharpening') >= 0;
          return {
            time: hh + ':' + mm + ':' + ss,
            who: firstWord.length > 5 ? firstWord.slice(0, 5) : firstWord,
            level: isErr ? 'err' : isWarn ? 'warn' : 'ok',
            msg: p.title,
          };
        });
        setLines(mapped);
      } else {
        setLines(FALLBACK_LINES);
      }
    }).catch(function () {
      setLines(FALLBACK_LINES);
    });
  }, [show, tailTag]);

  React.useEffect(function () {
    var data = lines || FALLBACK_LINES;
    if (data.length < 4) return;
    var v = 3;
    setVisible(3);
    var timer = setInterval(function () {
      v = v >= data.length ? 3 : v + 1;
      setVisible(v);
    }, 1100);
    return function () { clearInterval(timer); };
  }, [lines]);

  if (!show) return null;

  var data = lines || FALLBACK_LINES;

  return (
    <div className="ib-tail">
      <div className="ib-tail-head">
        <span>// LIVE TAIL :: /var/log/{tailTag}.log</span>
        <span className="ib-tail-status">● STREAMING</span>
      </div>
      <div className="ib-tail-body">
        {data.map(function (line, i) {
          var isNew = i === visible - 1;
          return (
            <div key={i} className={'ib-tail-line' + (isNew ? ' ib-tail-fadein' : '')}
              style={{ display: i < visible ? '' : 'none' }}
              data-level={line.level}>
              <span className="t">{line.time}</span>{' '}
              <span className={'who' + (line.level === 'warn' ? ' warn' : '') + (line.level === 'err' ? ' err' : '')}>
                [{line.who.padEnd(5)}]
              </span>{' '}
              <span className={'msg' + (line.level === 'err' ? ' err' : '')}>{line.msg}</span>
            </div>
          );
        })}
        <div className="ib-tail-line ib-tail-cursor">
          <span className="t">-- waiting for next signal --</span><span className="ib-caret"></span>
        </div>
      </div>
    </div>
  );
};

window.LiveTail = LiveTail;