/* Live status terminal — types itself out, loops */

const TERMINAL_LINES = [
  { type: "comment", text: "// JohnyClaw v0.4 — parallel work loop" },
  { type: "code", parts: [
    { c: "key", t: "class " },
    { c: "fn", t: "JohnyClaw" },
    { c: "pl", t: "(" },
    { c: "id", t: "AIAgent" },
    { c: "pl", t: "):" },
  ]},
  { type: "code", indent: 2, parts: [
    { c: "key", t: "def " },
    { c: "fn", t: "__init__" },
    { c: "pl", t: "(" },
    { c: "id", t: "self" },
    { c: "pl", t: "):" },
  ]},
  { type: "code", indent: 4, parts: [
    { c: "id", t: "self" },
    { c: "pl", t: "." },
    { c: "pl", t: "mission " },
    { c: "pl", t: "= " },
    { c: "str", t: "\"Turn messy ideas into shipped pieces.\"" },
  ]},
  { type: "code", indent: 4, parts: [
    { c: "id", t: "self" },
    { c: "pl", t: "." },
    { c: "pl", t: "skills " },
    { c: "pl", t: "= [" },
    { c: "str", t: "\"backend\"" },
    { c: "pl", t: ", " },
    { c: "str", t: "\"devops\"" },
    { c: "pl", t: ", " },
    { c: "str", t: "\"mobile\"" },
    { c: "pl", t: ", " },
    { c: "str", t: "\"frontend\"" },
    { c: "pl", t: "]" },
  ]},
  { type: "code", indent: 4, parts: [
    { c: "id", t: "self" },
    { c: "pl", t: "." },
    { c: "pl", t: "lanes " },
    { c: "pl", t: "= " },
    { c: "num", t: "4" },
    { c: "com", t: "  # parallel tracks" },
  ]},
  { type: "blank" },
  { type: "code", indent: 2, parts: [
    { c: "key", t: "def " },
    { c: "fn", t: "work" },
    { c: "pl", t: "(" },
    { c: "id", t: "self" },
    { c: "pl", t: "):" },
  ]},
  { type: "code", indent: 4, parts: [
    { c: "key", t: "while " },
    { c: "key", t: "True" },
    { c: "pl", t: ":" },
  ]},
  { type: "code", indent: 6, parts: [
    { c: "pl", t: "plan " },
    { c: "pl", t: "= " },
    { c: "id", t: "self" },
    { c: "pl", t: "." },
    { c: "fn", t: "think" },
    { c: "pl", t: "()" },
  ]},
  { type: "code", indent: 6, parts: [
    { c: "pl", t: "result " },
    { c: "pl", t: "= " },
    { c: "id", t: "self" },
    { c: "pl", t: "." },
    { c: "fn", t: "ship" },
    { c: "pl", t: "(plan)" },
  ]},
  { type: "code", indent: 6, parts: [
    { c: "id", t: "self" },
    { c: "pl", t: "." },
    { c: "fn", t: "learn" },
    { c: "pl", t: "(result)" },
  ]},
  { type: "blank" },
  { type: "comment", text: "# Multitasking without losing the thread." },
  { type: "comment", text: "# Status: online · context loaded · tests running" },
];

function Terminal() {
  const [revealed, setRevealed] = React.useState(0);
  const [tick, setTick] = React.useState(0);

  React.useEffect(() => {
    const total = TERMINAL_LINES.length;
    if (revealed >= total) {
      const t = setTimeout(() => { setRevealed(0); setTick(x => x + 1); }, 4000);
      return () => clearTimeout(t);
    }
    const t = setTimeout(() => setRevealed(r => r + 1), 220);
    return () => clearTimeout(t);
  }, [revealed]);

  const renderLine = (line, idx) => {
    if (line.type === "blank") {
      return <span key={idx} className="ln">&nbsp;</span>;
    }
    const indent = "\u00A0".repeat(line.indent || 0);
    if (line.type === "comment") {
      return (
        <span key={idx} className="ln">
          <span className="gutter">{idx + 1}</span>
          <span className="c-com">{indent}{line.text}</span>
        </span>
      );
    }
    return (
      <span key={idx} className="ln">
        <span className="gutter">{idx + 1}</span>
        <span>{indent}</span>
        {line.parts.map((p, i) => (
          <span key={i} className={"c-" + p.c}>{p.t}</span>
        ))}
      </span>
    );
  };

  const lastIdx = revealed - 1;

  return (
    <div className="terminal">
      <div className="term-bar">
        <span className="dot r" />
        <span className="dot y" />
        <span className="dot g" />
        <span className="title mono">~/johnyclaw — <b>agent.py</b> — bash</span>
      </div>
      <div className="term-body">
        {TERMINAL_LINES.slice(0, revealed).map((line, idx) => (
          <React.Fragment key={tick + "-" + idx}>
            {renderLine(line, idx)}
            {idx === lastIdx && idx < TERMINAL_LINES.length - 1 && <span className="cursor"></span>}
          </React.Fragment>
        ))}
        {revealed === TERMINAL_LINES.length && <span className="cursor"></span>}
      </div>
    </div>
  );
}

window.Terminal = Terminal;