/* global React, Icon */
// Script tab — Part 1 / Part 2 split editor

const codeLine = (n, indent, tokens) => (
  <div key={n} className="ln">
    <span className="ln__n">{n}</span>
    <span className="ln__c" style={{paddingLeft: indent * 16}}>
      {tokens.map((t, i) => <span key={i} className={"tk tk--" + t[0]}>{t[1]}</span>)}
    </span>
  </div>
);

// token kinds: kw (keyword) str id num com (comment) op fn dec (decorator) var
const PART1 = [
  [1, 0, [["com", "# Part 1 — Setup & Fixtures · human-owned · not regenerated"]]],
  [2, 0, [["kw", "from"], ["txt", " "], ["id", "qa_runner.fixtures"], ["txt", " "], ["kw", "import"], ["txt", " "], ["id", "ensure_balance, ensure_gift_stock"]]],
  [3, 0, [["kw", "import"], ["txt", " "], ["id", "pytest, requests"]]],
  [4, 0, [["txt", ""]]],
  [5, 0, [["id", "BASE_URL"], ["op", " = "], ["fn", "env"], ["op", "("], ["str", "\"BASE_URL\""], ["op", ")"]]],
  [6, 0, [["txt", ""]]],
  [7, 0, [["dec", "@pytest.fixture"]]],
  [8, 0, [["kw", "def"], ["txt", " "], ["fn", "ctx"], ["op", "(): "]]],
  [9, 1, [["id", "user"], ["op", " = "], ["fn", "create_test_user"], ["op", "()"]]],
  [10, 1, [["fn", "ensure_balance"], ["op", "("], ["id", "user"], ["op", ", "], ["id", "min_amount"], ["op", "="], ["num", "50000"], ["op", ")"]]],
  [11, 1, [["fn", "ensure_gift_stock"], ["op", "("], ["id", "gift_id"], ["op", "="], ["str", "\"gift_42\""], ["op", ", "], ["id", "qty"], ["op", "="], ["num", "3"], ["op", ")"]]],
  [12, 1, [["kw", "yield"], ["txt", " "], ["id", "user"]]],
  [13, 1, [["com", "# teardown handled by fixture context"]]],
  [14, 0, [["txt", ""]]],
  [15, 0, [["com", "# dependency runner — TC-018, TC-021"]]],
  [16, 0, [["id", "_dep"], ["op", " = "], ["fn", "run_deps"], ["op", "(["], ["str", "\"TC-018\""], ["op", ", "], ["str", "\"TC-021\""], ["op", "])"]]],
];

const PART2 = [
  [1, 0, [["com", "# Part 2 — Test Logic · AI generated · editable"]]],
  [2, 0, [["kw", "def"], ["txt", " "], ["fn", "test_sell_with_bundled_discount"], ["op", "("], ["id", "ctx"], ["op", "):"]]],
  [3, 1, [["com", "# pre-state capture"]]],
  [4, 1, [["id", "balance_before"], ["op", " = "], ["fn", "get_balance"], ["op", "("], ["id", "ctx.user"], ["op", ")"]]],
  [5, 1, [["id", "inv_before"], ["op", " = "], ["fn", "get_inventory"], ["op", "("], ["str", "\"gift_42\""], ["op", ")"]]],
  [6, 1, [["txt", ""]]],
  [7, 1, [["com", "# action"]]],
  [8, 1, [["id", "r"], ["op", " = "], ["id", "requests"], ["op", "."], ["fn", "post"], ["op", "("], ["id", "BASE_URL"], ["op", " + "], ["str", "\"/gifts/sell\""], ["op", ","]]],
  [9, 2, [["id", "json"], ["op", "={"], ["str", "\"user_id\""], ["op", ": "], ["id", "ctx.user.id"], ["op", ", "], ["str", "\"gift_id\""], ["op", ": "], ["str", "\"gift_42\""], ["op", ", "]]],
  [10, 2, [["str", "\"qty\""], ["op", ": "], ["num", "3"], ["op", ", "], ["str", "\"coupon_code\""], ["op", ": "], ["str", "\"PROMO_FALL15\""], ["op", "},"]]],
  [11, 2, [["id", "headers"], ["op", "={"], ["str", "\"Authorization\""], ["op", ": "], ["fn", "get_token"], ["op", "()}"]]],
  [12, 1, [["op", ")"]]],
  [13, 1, [["txt", ""]]],
  [14, 1, [["com", "# assertions"]]],
  [15, 1, [["kw", "assert"], ["txt", " "], ["id", "r.status_code"], ["op", " == "], ["num", "200"]]],
  [16, 1, [["id", "body"], ["op", " = "], ["id", "r"], ["op", "."], ["fn", "json"], ["op", "()"]]],
  [17, 1, [["kw", "assert"], ["txt", " "], ["str", "\"order_id\""], ["txt", " "], ["kw", "in"], ["txt", " "], ["id", "body"]]],
  [18, 1, [["kw", "assert"], ["txt", " "], ["id", "body"], ["op", "["], ["str", "\"applied_coupons\""], ["op", "][0]["], ["str", "\"code\""], ["op", "] == "], ["str", "\"PROMO_FALL15\""]]],
  [19, 1, [["txt", ""]]],
  [20, 1, [["com", "# post-state verification"]]],
  [21, 1, [["id", "balance_after"], ["op", " = "], ["fn", "get_balance"], ["op", "("], ["id", "ctx.user"], ["op", ")"]]],
  [22, 1, [["kw", "assert"], ["txt", " "], ["id", "balance_after"], ["op", " == "], ["id", "balance_before"], ["op", " - "], ["id", "body"], ["op", "["], ["str", "\"total\""], ["op", "]"]]],
  [23, 1, [["id", "inv_after"], ["op", " = "], ["fn", "get_inventory"], ["op", "("], ["str", "\"gift_42\""], ["op", ")"]]],
  [24, 1, [["kw", "assert"], ["txt", " "], ["id", "inv_after"], ["op", " == "], ["id", "inv_before"], ["op", " - "], ["num", "3"]]],
];

const ScriptTab = () => (
  <div className="frame app" data-theme="dark">
    {window.TopBar && <window.TopBar/>}
    {window.ContextStrip && <window.ContextStrip/>}
    <div className="board">
      {window.Sidebar && <window.Sidebar/>}
      <main className="tc">
        <div className="tc__head">
          <div className="tc__head-top">
            <span className="tag-id mono" style={{fontSize:11.5}}>TC-004</span>
            <span className="status running"><span className="dot running"/>Running</span>
            <span className="tc__head-meta">Script · Part 2 has unsaved override</span>
            <div style={{flex:1}}/>
            <button className="btn btn--ghost"><Icon name="refresh" size={12}/>Reset to AI</button>
            <button className="btn btn--ghost"><Icon name="copy" size={12}/>Copy</button>
            <button className="btn"><Icon name="sparkles" size={12} style={{color:'var(--accent)'}}/>Refine with AI</button>
            <button className="btn btn--primary"><Icon name="play" size={11}/>Run script</button>
          </div>
          <h1 className="tc__title">Sell with bundled discount applies coupon</h1>
          <div className="tc__tabs">
            <span className="tab">Spec</span>
            <span className="tab tab--active">Script <span className="tab-badge">edited</span></span>
            <span className="tab">Workflow</span>
            <span className="tab">History <span className="tab-badge">14</span></span>
            <span className="tab">Dependencies</span>
          </div>
        </div>

        <div className="script">
          <div className="script__pane">
            <div className="script__bar">
              <span className="script__title"><Icon name="lock" size={11}/>Part 1 — Setup &amp; Fixtures</span>
              <span className="muted">human-owned · not regenerated</span>
              <div style={{flex:1}}/>
              <span className="chip"><Icon name="flask" size={10}/>2 fixtures</span>
              <span className="chip"><Icon name="branch" size={10}/>2 deps</span>
            </div>
            <div className="codeblock codeblock--locked">
              {PART1.map(([n, ind, t]) => codeLine(n, ind, t))}
            </div>
          </div>

          <div className="script__pane">
            <div className="script__bar">
              <span className="script__title"><Icon name="sparkles" size={11} style={{color:'var(--accent)'}}/>Part 2 — Test Logic</span>
              <span className="chip chip--accent">AI · edited</span>
              <div style={{flex:1}}/>
              <span className="muted mono">edited 3 lines · resets available</span>
              <button className="btn btn--ghost" style={{height:24}}><Icon name="refresh" size={11}/>Reset</button>
            </div>
            <div className="codeblock codeblock--editable">
              {PART2.map(([n, ind, t], i) => {
                const edited = [9, 10, 18].includes(n);
                return (
                  <div key={n} className={"ln" + (edited ? " ln--edited" : "")}>
                    <span className="ln__n">{n}</span>
                    <span className="ln__c" style={{paddingLeft: ind * 16}}>
                      {t.map((tk, j) => <span key={j} className={"tk tk--" + tk[0]}>{tk[1]}</span>)}
                    </span>
                    {edited && <span className="ln__edit">edited</span>}
                  </div>
                );
              })}
              <div className="ln ln--cursor">
                <span className="ln__n">25</span>
                <span className="ln__c" style={{paddingLeft: 16}}><span className="caret"/></span>
              </div>
            </div>
            <div className="script__foot">
              <span className="muted mono">Python 3.12 · pytest · 24 lines · saved 12s ago</span>
              <div style={{flex:1}}/>
              <span className="muted">Press</span> <span className="kbd">⌘S</span> <span className="muted">to save override</span>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
);

Object.assign(window, { ScriptTab });