// Interactive terminal demo with tabs (CLI / API / Config)
const TERM_DATA = {
  cli: {
    title: "~/projects/datagio-app",
    lines: [
      { p: true, cmd: "datagio deploy --region eu-fra-1" },
      { delay: 350 },
      { out: "→ packaging  app  ", info: "8.2 MB" },
      { out: "→ uploading layers (3) ", ok: "✓ 1.2s" },
      { out: "→ provisioning containers ", ok: "✓ ready" },
      { out: "→ rolling traffic 0% → 100% ", ok: "✓ 2.4s" },
      { delay: 200 },
      { ok: "✓ deployed in 7.3s" },
      { out: " " },
      { out: "  app:        ", val: "ember-grove-7842" },
      { out: "  url:        ", val: "https://ember-grove-7842.datagio.app" },
      { out: "  region:     ", val: "eu-fra-1, eu-ams-2" },
      { out: "  edge nodes: ", val: "38" },
      { out: " " },
      { p: true, cmd: "datagio scale --min 2 --max 80 --auto" },
      { delay: 280 },
      { ok: "✓ autoscale enabled · target=70% cpu" },
    ],
  },
  api: {
    title: "POST /v1/deploys",
    lines: [
      { p: true, cmd: 'curl -X POST https://api.datagio.dev/v1/deploys \\' },
      { cmd: '  -H "Authorization: Bearer $DG_TOKEN" \\' },
      { cmd: '  -d \'{ "app": "ember-grove", "region": "eu-fra-1" }\'' },
      { delay: 300 },
      { out: "HTTP/2 ", ok: "201 Created" },
      { out: "x-datagio-trace: ", info: "tr_8KqL9aR" },
      { out: " " },
      { out: "{" },
      { out: '  "id": ', str: '"dpl_4Z9kT2pNqM"', after: "," },
      { out: '  "app": ', str: '"ember-grove"', after: "," },
      { out: '  "region": ', str: '"eu-fra-1"', after: "," },
      { out: '  "status": ', str: '"queued"', after: "," },
      { out: '  "url": ', str: '"https://ember-grove-7842.datagio.app"' },
      { out: "}" },
      { delay: 400 },
      { p: true, cmd: "Stream events with WebSocket → /v1/events" },
    ],
  },
  config: {
    title: "datagio.toml",
    lines: [
      { out: "# datagio.toml — declarative infra" },
      { out: "[app]" },
      { key: "name      ", val: '"ember-grove"' },
      { key: "runtime   ", val: '"node@22"' },
      { out: " " },
      { out: "[scaling]" },
      { key: "min       ", val: "2" },
      { key: "max       ", val: "80" },
      { key: "policy    ", val: '"cpu>70 || rps>500"' },
      { out: " " },
      { out: "[regions]" },
      { key: "primary   ", val: '"eu-fra-1"' },
      { key: "replicas  ", val: '["eu-ams-2", "us-iad-1"]' },
      { out: " " },
      { out: "[secrets]" },
      { key: "DATABASE_URL", val: '"@vault/db/prod"' },
      { delay: 200 },
      { p: true, cmd: "datagio apply" },
      { ok: "✓ infra reconciled · 0 drift" },
    ],
  },
};

const TerminalDemo = ({ tab, setTab }) => {
  const [revealed, setRevealed] = React.useState(0);
  const linesRef = React.useRef(null);

  React.useEffect(() => {
    setRevealed(0);
    const data = TERM_DATA[tab];
    let i = 0;
    let cancelled = false;
    let t;
    const tick = () => {
      if (cancelled) return;
      if (i >= data.lines.length) return;
      const line = data.lines[i];
      const wait = line.delay || (line.p ? 240 : 60);
      t = setTimeout(() => {
        i += 1;
        setRevealed(i);
        tick();
      }, wait);
    };
    tick();
    return () => { cancelled = true; clearTimeout(t); };
  }, [tab]);

  const data = TERM_DATA[tab];
  const visibleLines = data.lines.slice(0, revealed).filter((l) => !l.delay || l.cmd || l.out || l.ok || l.key);

  return (
    <div className="terminal">
      <div className="term-bar">
        <div className="term-dots"><span /><span /><span /></div>
        <div className="term-tabs">
          {[
            ["cli", "CLI"],
            ["api", "API"],
            ["config", "Config"],
          ].map(([k, label]) => (
            <button
              key={k}
              className={`term-tab ${tab === k ? "active" : ""}`}
              onClick={() => setTab(k)}
            >{label}</button>
          ))}
        </div>
        <div className="term-title">{data.title}</div>
      </div>
      <div className="term-body" ref={linesRef}>
        {data.lines.slice(0, revealed).map((line, idx) => {
          if (line.delay && !line.cmd && !line.out && !line.ok && !line.key) return null;
          if (line.p) {
            return (
              <div className="term-line" key={idx}>
                <span className="term-prompt">$</span>
                <span className="term-cmd">{line.cmd}</span>
              </div>
            );
          }
          if (line.cmd) {
            return (
              <div className="term-line" key={idx} style={{ paddingLeft: 14 }}>
                <span className="term-cmd">{line.cmd}</span>
              </div>
            );
          }
          if (line.ok && !line.out) {
            return <div className="term-line" key={idx}><span className="term-ok">{line.ok}</span></div>;
          }
          if (line.key) {
            return (
              <div className="term-line" key={idx}>
                <span className="term-key">{line.key}</span>
                <span style={{ color: "var(--fg-3)" }}>=</span>
                <span className="term-str">{line.val}</span>
              </div>
            );
          }
          return (
            <div className="term-line" key={idx}>
              <span className="term-out">{line.out}</span>
              {line.val && <span className="term-info">{line.val}</span>}
              {line.info && <span className="term-info">{line.info}</span>}
              {line.ok && <span className="term-ok">{line.ok}</span>}
              {line.str && <span className="term-str">{line.str}</span>}
              {line.after && <span className="term-out">{line.after}</span>}
            </div>
          );
        })}
        {revealed >= data.lines.length && (
          <div className="term-line">
            <span className="term-prompt">$</span>
            <span className="term-cursor" />
          </div>
        )}
      </div>
    </div>
  );
};

window.TerminalDemo = TerminalDemo;