/* TerminalLogs.jsx
   Janela de terminal: logs aparecem em sequência, em loop, com cursor piscando.
   Os logs são um array fácil de editar (LOGS). Cada linha tem um "tom"
   (green/blue/amber/muted) que define a cor do status.
   prefers-reduced-motion: mostra todas as linhas de uma vez, sem digitação. */
function TerminalLogs({ speed = 1 }) {
  const reduced = useReducedMotion();

  // ---- EDITE AQUI: textos e cor de cada linha ----
  const LOGS = [
    { t: "$ run automation.py", tone: "muted" },
    { t: "running automation...", tone: "blue" },
    { t: "processing dataset... 12.480 rows", tone: "blue" },
    { t: "updating dashboard...", tone: "amber" },
    { t: "manual task reduced  -94%", tone: "green" },
    { t: "status: done", tone: "green" },
  ];
  const STEP = 850 / speed;     // ms entre linhas
  const HOLD = 1800 / speed;    // ms de pausa antes de reiniciar

  const [count, setCount] = React.useState(reduced ? LOGS.length : 0);

  React.useEffect(() => {
    if (reduced) { setCount(LOGS.length); return; }
    let to;
    function tick(n) {
      if (n <= LOGS.length) {
        setCount(n);
        to = setTimeout(() => tick(n + 1), n === LOGS.length ? HOLD : STEP);
      } else {
        setCount(0);
        to = setTimeout(() => tick(1), STEP);
      }
    }
    to = setTimeout(() => tick(1), 400);
    return () => clearTimeout(to);
  }, [reduced, speed]);

  const toneColor = (tone) => ({
    green: "var(--green)", blue: "var(--blue)",
    amber: "var(--amber)", muted: "var(--muted)",
  }[tone] || "var(--text)");

  return (
    <div className="panel" style={{ height: "100%" }}>
      <div className="panel-bar">
        <div className="dots"><i></i><i></i><i></i></div>
        <span className="title">edson@loop: ~/automation</span>
      </div>
      <div className="mono" style={{ padding: "16px 18px", fontSize: 13.5, lineHeight: 1.95, minHeight: 210 }}>
        {LOGS.slice(0, count).map((l, i) => {
          const isLast = i === count - 1;
          return (
            <div key={i} style={{ color: toneColor(l.tone), display: "flex", gap: 8, alignItems: "baseline" }}>
              <span style={{ color: "var(--muted)", opacity: .6, userSelect: "none" }}>
                {String(i + 1).padStart(2, "0")}
              </span>
              <span>
                {l.tone !== "muted" && l.tone !== "blue" && (
                  <span style={{ color: toneColor(l.tone), marginRight: 8 }}>
                    {l.t.includes("status") || l.t.includes("done") || l.t.includes("reduced") ? "✓" : "•"}
                  </span>
                )}
                {l.t}
                {isLast && !reduced && <span className="term-cursor" />}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { TerminalLogs });