/* global React, Icon */
// AI Panel — slide-in right panel, multi-turn chat with code blocks

const AIPanel = () => (
  <aside className="ai">
    <header className="ai__head">
      <div className="ai__title"><Icon name="sparkles" size={13} style={{color:'var(--accent)'}}/>AI Assistant</div>
      <div className="ai__model"><span className="mono">claude-sonnet-4.5</span></div>
      <div style={{flex:1}}/>
      <button className="ai__icon"><Icon name="refresh" size={12}/></button>
      <button className="ai__icon"><Icon name="x" size={13}/></button>
    </header>
    <div className="ai__ctx">
      <div className="ai__ctx-row">
        <span className="muted">Context</span>
        <span className="mono tag-id" style={{color:'var(--fg)'}}>TC-004</span>
        <span className="ai__ctx-sep">·</span>
        <span className="method POST">POST</span>
        <span className="mono" style={{fontSize:11}}>/gifts/sell</span>
        <div style={{flex:1}}/>
        <span className="env-pill" style={{height:20, fontSize:10}}><span className="env-pill__dot" style={{background:'oklch(0.78 0.13 230)'}}/>staging</span>
      </div>
    </div>

    <div className="ai__quick">
      <button className="qa"><Icon name="zap" size={10}/>Generate script</button>
      <button className="qa"><Icon name="eye" size={10}/>Explain expected</button>
      <button className="qa"><Icon name="flask" size={10}/>Suggest fixtures</button>
      <button className="qa"><Icon name="branch" size={10}/>Map dependencies</button>
    </div>

    <div className="ai__msgs">
      <div className="msg msg--user">
        <div className="msg__bubble">Generate Part 2 for this TC. The coupon should apply to the line subtotal, not the total — I noticed the previous run double-discounted shipping.</div>
        <div className="msg__meta">2:14 PM</div>
      </div>

      <div className="msg msg--ai">
        <div className="msg__head"><Icon name="sparkles" size={11} style={{color:'var(--accent)'}}/><b>Claude</b><span className="muted">used <span className="mono">get_tc_context</span>, <span className="mono">read api_ref</span></span></div>
        <div className="msg__bubble">
          <p>Here's a Part 2 that captures balance and inventory before the call, asserts the response shape from the <span className="mono inline-code">SellResponse</span> schema, and verifies post-state including the coupon application path.</p>
        </div>

        <div className="msg__code">
          <div className="msg__code-bar">
            <span className="mono" style={{fontSize:10.5}}>python · pytest · 24 lines</span>
            <div style={{flex:1}}/>
            <button className="msg__code-btn"><Icon name="copy" size={10}/>Copy</button>
            <button className="msg__code-btn msg__code-btn--accept"><Icon name="check" size={10}/>Accept</button>
          </div>
          <pre className="msg__pre"><code>{`def test_sell_with_bundled_discount(ctx):
    balance_before = get_balance(ctx.user)
    inv_before = get_inventory("gift_42")

    r = requests.post(BASE_URL + "/gifts/sell",
        json={"user_id": ctx.user.id, "gift_id": "gift_42",
              "qty": 3, "coupon_code": "PROMO_FALL15"},
        headers={"Authorization": get_token()})

    assert r.status_code == 200
    body = r.json()
    assert "order_id" in body
    assert body["applied_coupons"][0]["code"] == "PROMO_FALL15"

    balance_after = get_balance(ctx.user)
    assert balance_after == balance_before - body["total"]
    assert get_inventory("gift_42") == inv_before - 3`}</code></pre>
        </div>

        <div className="msg__bubble">
          <p>Two notes worth pinning:</p>
          <ul>
            <li>The schema returns <span className="mono inline-code">applied_coupons[]</span> — I asserted index 0 but you may want a length check.</li>
            <li>For the shipping issue: <span className="mono inline-code">total</span> already excludes shipping discount per the OpenAPI spec, so this won't double-count.</li>
          </ul>
        </div>
        <div className="msg__meta">2:14 PM · 1.8s · 412 tokens</div>
      </div>

      <div className="msg msg--user">
        <div className="msg__bubble">Add a length check on applied_coupons and an idempotency assertion.</div>
        <div className="msg__meta">2:16 PM</div>
      </div>

      <div className="msg msg--ai msg--streaming">
        <div className="msg__head"><Icon name="sparkles" size={11} style={{color:'var(--accent)'}}/><b>Claude</b><span className="muted">streaming…</span></div>
        <div className="msg__bubble">
          <p>Adding a strict <span className="mono inline-code">len(applied_coupons) == 1</span> and a second POST with the same idempotency key to verify the<span className="caret-inline"/></p>
        </div>
      </div>
    </div>

    <div className="ai__compose">
      <textarea placeholder="Ask Claude about TC-004…  /  drag files  /  ⌘↵ to send" rows={2} defaultValue=""/>
      <div className="ai__compose-bar">
        <button className="btn btn--ghost" style={{height:24}}><Icon name="link" size={11}/>Attach</button>
        <button className="btn btn--ghost" style={{height:24}}><Icon name="branch" size={11}/>@mention TC</button>
        <div style={{flex:1}}/>
        <span className="muted mono" style={{fontSize:10.5}}>system prompt: 1.4k tok · context: TC + env + 4 APIs</span>
        <button className="btn btn--primary" style={{height:24}}><Icon name="send" size={11}/>Send</button>
      </div>
    </div>
  </aside>
);

const AIPanelScreen = () => (
  <div className="frame app" data-theme="dark">
    {window.TopBar && <window.TopBar/>}
    {window.ContextStrip && <window.ContextStrip/>}
    <div className="board">
      {window.Sidebar && <window.Sidebar/>}
      <div className="tc tc--with-ai">
        <div className="tc__dim">{window.TCDetail && <window.TCDetail/>}</div>
      </div>
      <AIPanel/>
    </div>
  </div>
);

Object.assign(window, { AIPanel, AIPanelScreen });