// Animated terminal hero component
const { useState, useEffect, useRef } = React;

function Terminal({ script, lang }) {
  const [visible, setVisible] = useState(0);
  const [done, setDone] = useState(false);
  const timersRef = useRef([]);

  useEffect(() => {
    // reset
    timersRef.current.forEach(clearTimeout);
    timersRef.current = [];
    setVisible(0);
    setDone(false);

    script.forEach((line, idx) => {
      const t = setTimeout(() => {
        setVisible(v => Math.max(v, idx + 1));
        if (idx === script.length - 1) setDone(true);
      }, line.t);
      timersRef.current.push(t);
    });

    return () => timersRef.current.forEach(clearTimeout);
  }, [lang, script]);

  return (
    <div className="terminal">
      <div className="terminal-bar">
        <span className="terminal-dot active"></span>
        <span className="terminal-dot"></span>
        <span className="terminal-dot"></span>
        <span className="terminal-title">pxadv@01 — zsh — 80×24</span>
        <span className="terminal-tag">● live</span>
      </div>
      <div className="terminal-body">
        {script.slice(0, visible).map((line, i) => (
          <TerminalLine key={i + "-" + lang} line={line} isLast={i === visible - 1 && done} />
        ))}
      </div>
      <div className="terminal-footer">
        <span>{lang === "pt" ? "sessão · ativa" : "session · active"}</span>
        <span>~/pxadv/site/index.html</span>
        <span>{lang === "pt" ? "LF · UTF-8" : "LF · UTF-8"}</span>
      </div>
    </div>
  );
}

function TerminalLine({ line, isLast }) {
  const [shown, setShown] = useState("");

  useEffect(() => {
    setShown("");
    const text = line.text || (line.k ? line.k + "  " + line.v : "");
    let i = 0;
    const speed = line.kind === "prompt" ? 18 : 12;
    const iv = setInterval(() => {
      i++;
      setShown(text.slice(0, i));
      if (i >= text.length) clearInterval(iv);
    }, speed);
    return () => clearInterval(iv);
  }, [line]);

  if (line.kind === "prompt") {
    // split prompt and command
    const m = shown.match(/^(.*?\$ )(.*)$/);
    return (
      <div className="t-line">
        {m ? (
          <>
            <span className="t-prompt">{m[1]}</span>
            <span className="t-user">{m[2]}</span>
          </>
        ) : (
          <span className="t-prompt">{shown}</span>
        )}
        {line.cursor && isLast && <span className="t-cursor"></span>}
      </div>
    );
  }

  if (line.kind === "kv") {
    const parts = shown.split("  ");
    return (
      <div className="t-line">
        <span className="t-prompt">{parts[0]}</span>
        {parts[1] && <span style={{ color: "var(--fg-dim)" }}>{"  " + parts[1]}</span>}
      </div>
    );
  }

  if (line.kind === "out-accent") {
    return <div className="t-line" style={{ color: "var(--accent)" }}>{shown}</div>;
  }

  return <div className="t-line t-val">{shown}</div>;
}

Object.assign(window, { Terminal });