// ApiBlock v2 — simplified to URL + body only (no auth headers).
// Both sides get unified syntax highlighting via token-array data.
const { useState: useStateApi } = React;

function ColoredLines({ lines }) {
  return (
    <div className="code-block-body">
      {lines.map((line, i) => (
        <span className="code-line" key={i}>
          {line.length === 0 ? "\u00a0" : line.map((tok, j) => (
            <span key={j} className={`tok-${tok.k}`}>{tok.v}</span>
          ))}
        </span>
      ))}
    </div>
  );
}

function ApiBlock() {
  const { CODE_LINES, RESPONSE_LINES } = window.__DATA;
  const [lang, setLang] = useStateApi("curl");
  const [copied, setCopied] = useStateApi(false);

  const langs = [
    { k: "curl",   l: "cURL" },
    { k: "js",     l: "Node.js" },
    { k: "python", l: "Python" },
    { k: "go",     l: "Go" },
  ];

  function copy() {
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  }

  return (
    <div className="api-block" id="api">
      {/* LEFT: request */}
      <div className="api-side">
        <div className="api-side-head">
          <div className="api-tabs">
            {langs.map((t) => (
              <button
                key={t.k}
                className={`api-tab ${lang === t.k ? "active" : ""}`}
                onClick={() => setLang(t.k)}
              >
                {t.l}
              </button>
            ))}
          </div>
          <button className="api-copy" onClick={copy}>
            {copied ? "✓ скопировано" : "копировать"}
          </button>
        </div>
        <ColoredLines lines={CODE_LINES[lang]} />
      </div>

      {/* RIGHT: response */}
      <div className="api-side">
        <div className="api-side-head">
          <span className="api-side-title">Ответ · 200 OK</span>
          <span className="api-side-title" style={{ color: "var(--accent)" }}>↘ 14 мс</span>
        </div>
        <ColoredLines lines={RESPONSE_LINES} />
      </div>
    </div>
  );
}

Object.assign(window, { ApiBlock });