/* global React, Icon, TREE */
// Main Board — sidebar tree + TC detail (centerpiece screen)

const Sidebar = () => {
  const [tree, setTree] = React.useState(TREE);
  const toggleFeature = (fid) => setTree(t => t.map(f => f.id === fid ? {...f, expanded: !f.expanded} : f));
  const toggleSuite = (fid, sid) => setTree(t => t.map(f => f.id !== fid ? f : {
    ...f, suites: f.suites.map(s => s.id === sid ? {...s, expanded: !s.expanded} : s)
  }));

  return (
    <aside className="sb">
      <div className="sb__head">
        <div className="sb__search">
          <Icon name="search" size={12} />
          <input placeholder="Search test cases…" />
          <span className="kbd">⌘K</span>
        </div>
      </div>
      <div className="sb__filter">
        <span className="seg seg--active">All <em>52</em></span>
        <span className="seg"><span className="dot pass"/>Pass <em>34</em></span>
        <span className="seg"><span className="dot fail"/>Fail <em>3</em></span>
        <span className="seg"><span className="dot draft"/>Draft <em>15</em></span>
      </div>
      <nav className="sb__tree">
        {tree.map(f => (
          <div key={f.id} className="tree-feat">
            <button className="tree-row tree-row--feat" onClick={() => toggleFeature(f.id)}>
              <Icon name={f.expanded ? "chevronDown" : "chevronRight"} size={11} />
              <Icon name="folder" size={13} style={{color: 'var(--fg-3)'}}/>
              <span className="tree-name">{f.name}</span>
              <span className="tree-count">{f.count}</span>
            </button>
            {f.expanded && f.suites.map(s => (
              <div key={s.id}>
                <button className="tree-row tree-row--suite" onClick={() => toggleSuite(f.id, s.id)}>
                  <Icon name={s.expanded ? "chevronDown" : "chevronRight"} size={11} />
                  <Icon name="layers" size={12} style={{color: 'var(--fg-3)'}}/>
                  <span className="tree-name">{s.name}</span>
                  <span className="tree-count">{s.count}</span>
                </button>
                {s.expanded && s.cases.map(c => (
                  <div key={c.id} className={"tree-row tree-row--tc" + (c.active ? " tree-row--active" : "")}>
                    <span className={"dot " + c.status} />
                    <span className="mono tag-id" style={{color: c.active ? 'var(--fg)' : 'var(--fg-3)'}}>{c.id}</span>
                    <span className="tree-name tree-name--tc">{c.name}</span>
                  </div>
                ))}
              </div>
            ))}
          </div>
        ))}
        <button className="tree-row tree-row--feat tree-row--ghost">
          <Icon name="plus" size={11}/>
          <span className="tree-name">New feature</span>
        </button>
      </nav>
      <div className="sb__foot">
        <div className="sb__foot-row"><Icon name="server" size={12}/><span>MCP server</span><span className="dot pass" style={{marginLeft:'auto'}}/></div>
        <div className="sb__foot-row"><Icon name="cpu" size={12}/><span>Agent · idle</span></div>
      </div>
    </aside>
  );
};

const TCDetail = () => (
  <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">in <b>Sell Gift</b> · last run <b>now</b> · run #<b>#9824</b></span>
        <div style={{flex:1}}/>
        <button className="btn btn--ghost"><Icon name="history" size={12}/>History</button>
        <button className="btn btn--ghost"><Icon name="copy" size={12}/>Duplicate</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</button>
      </div>
      <h1 className="tc__title">Sell with bundled discount applies coupon</h1>
      <div className="tc__tabs">
        <span className="tab tab--active">Spec</span>
        <span className="tab">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="tc__body">
      <section className="tc-card">
        <header className="tc-card__h"><span>Description</span><span className="hint">name + scenario + pre-conditions · AI reads this entire field</span></header>
        <div className="tc-card__c tc-desc">
          <p><b>Sell with bundled discount applies coupon</b></p>
          <p>User with sufficient wallet balance sells a gift bundle (3× rose pack) while a 15% promo coupon <span className="mono inline-code">PROMO_FALL15</span> is attached to their account. Expected behaviour: coupon is applied to the line subtotal, wallet is debited the discounted amount, inventory drops by 3, and the response includes <span className="mono inline-code">applied_coupons</span>.</p>
          <p className="muted">Pre-conditions: user authenticated, wallet ≥ 50,000, gift <span className="mono inline-code">gift_42</span> stock ≥ 3, coupon attached and not expired.</p>
        </div>
      </section>

      <div className="tc-row">
        <section className="tc-card">
          <header className="tc-card__h"><span>Main API</span><a className="link mono">api_ref</a></header>
          <div className="tc-card__c">
            <div className="api-pill">
              <span className="method POST">POST</span>
              <span className="mono">/gifts/sell</span>
              <span className="muted mono">v2</span>
            </div>
            <div className="kv">
              <div><span>Body schema</span><span className="mono">SellRequest</span></div>
              <div><span>Response</span><span className="mono">SellResponse</span></div>
              <div><span>Error codes</span><span className="mono">400, 401, 409, 422</span></div>
            </div>
          </div>
        </section>

        <section className="tc-card">
          <header className="tc-card__h"><span>Related APIs</span><span className="hint">pre/post state capture</span></header>
          <div className="tc-card__c tc-related">
            <div className="api-pill api-pill--sm"><span className="method GET">GET</span><span className="mono">/wallet/balance</span><span className="muted">pre + post</span></div>
            <div className="api-pill api-pill--sm"><span className="method GET">GET</span><span className="mono">/gifts/inventory</span><span className="muted">pre + post</span></div>
            <div className="api-pill api-pill--sm"><span className="method GET">GET</span><span className="mono">/promo/coupons</span><span className="muted">pre</span></div>
            <button className="api-pill api-pill--sm api-pill--add"><Icon name="plus" size={11}/>Add</button>
          </div>
        </section>
      </div>

      <div className="tc-row">
        <section className="tc-card">
          <header className="tc-card__h"><span>Fixtures</span><span className="hint">injected into Part 1</span></header>
          <div className="tc-card__c tc-fix">
            <label className="fix fix--on"><input type="checkbox" defaultChecked/><span className="mono">ensure_balance</span><span className="muted">min_amount=<span className="mono">50000</span></span></label>
            <label className="fix fix--on"><input type="checkbox" defaultChecked/><span className="mono">ensure_gift_stock</span><span className="muted">gift_id=<span className="mono">gift_42</span>, qty=<span className="mono">3</span></span></label>
            <label className="fix"><input type="checkbox"/><span className="mono">create_test_user</span><span className="muted">role?</span></label>
            <label className="fix"><input type="checkbox"/><span className="mono">reset_wallet</span><span className="muted">user_id?</span></label>
            <label className="fix"><input type="checkbox"/><span className="mono">seed_gift_inventory</span><span className="muted">gift_id, qty</span></label>
          </div>
        </section>

        <section className="tc-card">
          <header className="tc-card__h"><span>Dependencies</span><span className="hint">runs first · output via <span className="mono">_dep["TC-xxx"]</span></span></header>
          <div className="tc-card__c">
            <div className="dep-list">
              <div className="dep">
                <span className="dep-arrow">↳</span>
                <span className="mono tag-id">TC-018</span>
                <span className="dep-name">Attach coupon to user account</span>
                <span className="status pass">PASS</span>
              </div>
              <div className="dep">
                <span className="dep-arrow">↳</span>
                <span className="mono tag-id">TC-021</span>
                <span className="dep-name">Seed promo PROMO_FALL15 active</span>
                <span className="status pass">PASS</span>
              </div>
            </div>
            <div className="ds-row">
              <span className="muted">Data strategy</span>
              <div className="seg-group">
                <span className="seg">isolated</span>
                <span className="seg seg--active">shared</span>
                <span className="seg">seeded</span>
              </div>
            </div>
          </div>
        </section>
      </div>

      <div className="tc-row tc-row--two">
        <section className="tc-card">
          <header className="tc-card__h"><span>Request</span><span className="mono hint">JSON · main API body</span></header>
          <pre className="code"><code>{`{
  "user_id": "u_4421",
  "gift_id": "gift_42",
  "qty": 3,
  "coupon_code": "PROMO_FALL15",
  "idempotency_key": "tc-004-{run_id}"
}`}</code></pre>
        </section>
        <section className="tc-card">
          <header className="tc-card__h"><span>Expected</span><span className="mono hint">assertions</span></header>
          <pre className="code"><code>{`{
  "status": 200,
  "fields": ["order_id", "applied_coupons", "total"],
  "asserts": {
    "applied_coupons[0].code": "PROMO_FALL15",
    "balance_after": "balance_before - total",
    "inventory_after": "inventory_before - 3"
  }
}`}</code></pre>
        </section>
      </div>
    </div>
  </main>
);

const ContextStrip = () => (
  <div className="ctx">
    <div className="ctx__group">
      <Icon name="branch" size={12}/>
      <span className="muted">depends_on</span>
      <span className="mono">TC-018</span><span className="muted">,</span>
      <span className="mono">TC-021</span>
    </div>
    <div className="ctx__sep"/>
    <div className="ctx__group">
      <Icon name="flask" size={12}/>
      <span className="muted">fixtures</span>
      <span className="mono">ensure_balance</span><span className="muted">,</span>
      <span className="mono">ensure_gift_stock</span>
    </div>
    <div className="ctx__sep"/>
    <div className="ctx__group">
      <Icon name="layers" size={12}/>
      <span className="muted">strategy</span>
      <span className="mono">shared</span>
    </div>
    <div style={{flex:1}}/>
    <div className="ctx__group">
      <span className="muted">env</span>
      <span className="env-pill"><span className="env-pill__dot" style={{background:'oklch(0.78 0.13 230)'}}/>staging</span>
    </div>
  </div>
);

const TopBar = ({ title = "QA Runner" }) => (
  <header className="topbar">
    <div className="topbar__brand"><span className="logo">Q</span>{title}</div>
    <div className="topbar__crumbs">
      <Icon name="folder" size={11}/>
      <b>Gift System</b><span className="sep">/</span>
      <span>Sell Gift</span><span className="sep">/</span>
      <b className="mono">TC-004</b>
    </div>
    <div className="topbar__spacer"/>
    <div className="topbar__actions">
      <button className="btn btn--ghost"><Icon name="history" size={12}/>Runs</button>
      <button className="btn btn--ghost"><Icon name="book" size={12}/>API Library</button>
      <button className="btn btn--ghost"><Icon name="server" size={12}/>Environments</button>
      <span className="env-pill"><span className="env-pill__dot" style={{background:'oklch(0.78 0.13 230)'}}/>staging<Icon name="chevronDown" size={10} style={{marginLeft:2}}/></span>
      <button className="btn"><Icon name="sparkles" size={12} style={{color:'var(--accent)'}}/>AI Assistant<Icon name="chevronDown" size={10}/></button>
      <span className="kbd">⌘.</span>
    </div>
  </header>
);

const MainBoard = () => (
  <div className="frame app" data-theme="dark">
    <TopBar/>
    <ContextStrip/>
    <div className="board">
      <Sidebar/>
      <TCDetail/>
    </div>
  </div>
);

Object.assign(window, { MainBoard, Sidebar, TCDetail, TopBar, ContextStrip });