/* global React, Icon, ENVS, APIS, FIXTURES */
// Environments + API Library + New TC modal + Empty state

const Environments = () => (
  <div className="frame app" data-theme="dark">
    {window.TopBar && <window.TopBar/>}
    <div className="page">
      <header className="page__h">
        <div>
          <h1 className="page__title">Environments</h1>
          <div className="muted">Base URLs, auth, and headers · secrets stay on this device</div>
        </div>
        <div style={{flex:1}}/>
        <button className="btn"><Icon name="plus" size={11}/>New environment</button>
      </header>

      <div className="env-grid">
        {ENVS.map(e => (
          <div key={e.id} className={"env-card" + (e.active ? " env-card--active" : "")}>
            <div className="env-card__h">
              <span className="env-card__dot" style={{background: e.color}}/>
              <span className="env-card__name">{e.name}</span>
              {e.active && <span className="chip chip--accent">active</span>}
              <div style={{flex:1}}/>
              <button className="btn btn--ghost" style={{height:24}}><Icon name="edit" size={11}/></button>
              <button className="btn btn--ghost" style={{height:24}}><Icon name="moreH" size={11}/></button>
            </div>
            <div className="env-card__body">
              <div className="kv kv--col">
                <div><span>base_url</span><span className="mono">{e.base}</span></div>
                <div><span>auth_mode</span><span className="mono">{e.auth}</span>{e.auth==='dynamic' && <span className="chip" style={{marginLeft:6}}>POST /auth/login → $.access_token</span>}</div>
                <div><span>headers</span><span className="mono">X-Workspace-Id, X-Trace-Id <span className="muted">+2</span></span></div>
                <div><span>secret</span><span className="mono muted"><Icon name="lock" size={10}/> ••••••••••••a72f <span className="muted">· local only</span></span></div>
              </div>
            </div>
            <div className="env-card__f muted mono">last used {e.id==='stg'?'just now':e.id==='local'?'1h ago':'3d ago'} · 14 active TCs</div>
          </div>
        ))}

        <button className="env-card env-card--add">
          <Icon name="plus" size={16}/>
          <span>New environment</span>
          <span className="muted">static or dynamic auth</span>
        </button>
      </div>

      <div className="env-detail">
        <div className="env-detail__h">
          <span className="env-pill"><span className="env-pill__dot" style={{background:'oklch(0.78 0.13 230)'}}/>staging</span>
          <span className="muted">· editing</span>
          <div style={{flex:1}}/>
          <button className="btn btn--ghost">Discard</button>
          <button className="btn btn--primary">Save</button>
        </div>
        <div className="form">
          <div className="form-row">
            <label>Name</label>
            <input defaultValue="staging" className="input"/>
            <label>Color</label>
            <div className="swatches">
              {['oklch(0.78 0.13 230)','oklch(0.68 0.20 22)','oklch(0.74 0.15 145)','oklch(0.78 0.15 75)','#6c6c78'].map((c,i)=>(
                <span key={i} className={"sw" + (i===0?' sw--active':'')} style={{background:c}}/>
              ))}
            </div>
          </div>
          <div className="form-row">
            <label>Base URL</label>
            <input className="input mono" defaultValue="https://api-stg.acme.dev"/>
          </div>
          <div className="form-row">
            <label>Auth mode</label>
            <div className="seg-group">
              <span className="seg">static</span>
              <span className="seg seg--active">dynamic</span>
            </div>
          </div>
          <div className="form-row">
            <label>Login endpoint</label>
            <span className="method POST">POST</span>
            <input className="input mono" defaultValue="/auth/login"/>
          </div>
          <div className="form-row form-row--top">
            <label>Login body</label>
            <pre className="code code--input"><code>{`{
  "email": "qa-bot@acme.dev",
  "password": "{{ env.QA_BOT_PASS }}"
}`}</code></pre>
          </div>
          <div className="form-row">
            <label>Token path</label>
            <input className="input mono" defaultValue="$.data.access_token"/>
          </div>
          <div className="form-row form-row--top">
            <label>Headers</label>
            <div className="hdr">
              <div className="hdr-row"><span className="mono">X-Workspace-Id</span><span className="mono muted">acme-prod</span><Icon name="x" size={11}/></div>
              <div className="hdr-row"><span className="mono">X-Trace-Id</span><span className="mono muted">{`{{ run_id }}`}</span><Icon name="x" size={11}/></div>
              <div className="hdr-row"><span className="mono">Accept-Language</span><span className="mono muted">en</span><Icon name="x" size={11}/></div>
              <button className="btn btn--ghost" style={{height:24, marginTop:6}}><Icon name="plus" size={11}/>Add header</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const APILibrary = () => {
  const groups = ["Gift", "Wallet", "Auth", "Promo"];
  return (
    <div className="frame app" data-theme="dark">
      {window.TopBar && <window.TopBar/>}
      <div className="page page--lib">
        <header className="page__h">
          <div>
            <h1 className="page__title">API Library</h1>
            <div className="muted">13 endpoints across 4 domains · imported from openapi.yaml</div>
          </div>
          <div style={{flex:1}}/>
          <div className="sb__search sb__search--inline">
            <Icon name="search" size={12}/>
            <input placeholder="Search endpoints…"/>
          </div>
          <button className="btn"><Icon name="download" size={11}/>Import OpenAPI</button>
          <button className="btn btn--primary"><Icon name="plus" size={11}/>New endpoint</button>
        </header>

        <div className="lib">
          <aside className="lib__nav">
            {groups.map((g,i) => (
              <div key={g} className={"lib__nav-row" + (i===0?' lib__nav-row--active':'')}>
                <Icon name="box" size={12}/>
                <span>{g}</span>
                <span className="tree-count">{APIS.filter(a=>a.group===g).length}</span>
              </div>
            ))}
          </aside>

          <section className="lib__list">
            {groups.map(g => (
              <div key={g} className="lib-group">
                <div className="lib-group__h"><span className="lib-group__name">{g}</span><span className="muted mono">{APIS.filter(a=>a.group===g).length}</span></div>
                {APIS.filter(a=>a.group===g).map((a,i) => (
                  <div key={i} className={"lib-row" + (g==='Gift'&&i===0?' lib-row--active':'')}>
                    <span className={"method " + a.method}>{a.method}</span>
                    <span className="mono lib-row__path">{a.path}</span>
                    <span className="lib-row__name">{a.name}</span>
                    <div style={{flex:1}}/>
                    <span className="muted mono">{Math.floor(Math.random()*8)+1} TCs</span>
                  </div>
                ))}
              </div>
            ))}
          </section>

          <section className="lib__detail">
            <div className="lib-detail__h">
              <span className="method POST">POST</span>
              <span className="mono lib-detail__path">/gifts/sell</span>
              <span className="chip">v2</span>
              <div style={{flex:1}}/>
              <button className="btn btn--ghost"><Icon name="copy" size={11}/></button>
              <button className="btn btn--ghost"><Icon name="edit" size={11}/></button>
            </div>
            <h2 className="lib-detail__title">Sell gift</h2>
            <p className="muted" style={{maxWidth:540}}>Process a gift sale. Debits the user's wallet, decrements inventory, applies any attached coupons, and returns an order receipt.</p>

            <div className="lib-detail__grid">
              <section className="schema">
                <header className="schema__h"><span>Body schema</span><span className="mono muted">SellRequest</span></header>
                <div className="schema__rows">
                  <div className="sch-row"><span className="mono sch-row__k">user_id</span><span className="mono sch-row__t">string</span><span className="muted">required · uuid</span></div>
                  <div className="sch-row"><span className="mono sch-row__k">gift_id</span><span className="mono sch-row__t">string</span><span className="muted">required</span></div>
                  <div className="sch-row"><span className="mono sch-row__k">qty</span><span className="mono sch-row__t">integer</span><span className="muted">≥ 1, ≤ 999</span></div>
                  <div className="sch-row"><span className="mono sch-row__k">coupon_code</span><span className="mono sch-row__t">string?</span><span className="muted">optional</span></div>
                  <div className="sch-row"><span className="mono sch-row__k">idempotency_key</span><span className="mono sch-row__t">string?</span><span className="muted">recommended</span></div>
                </div>
              </section>
              <section className="schema">
                <header className="schema__h"><span>Response</span><span className="mono muted">SellResponse · 200</span></header>
                <div className="schema__rows">
                  <div className="sch-row"><span className="mono sch-row__k">order_id</span><span className="mono sch-row__t">string</span><span className="muted">uuid</span></div>
                  <div className="sch-row"><span className="mono sch-row__k">total</span><span className="mono sch-row__t">integer</span><span className="muted">cents</span></div>
                  <div className="sch-row"><span className="mono sch-row__k">applied_coupons</span><span className="mono sch-row__t">array</span><span className="muted">[Coupon]</span></div>
                  <div className="sch-row"><span className="mono sch-row__k">balance_after</span><span className="mono sch-row__t">integer</span></div>
                  <div className="sch-row"><span className="mono sch-row__k">inventory_after</span><span className="mono sch-row__t">integer</span></div>
                </div>
              </section>
            </div>

            <section className="schema">
              <header className="schema__h"><span>Error codes</span></header>
              <div className="errs">
                <div className="err"><span className="mono err__code" style={{color:'var(--fail)'}}>400</span><span className="mono">VALIDATION_ERROR</span><span className="muted">malformed body</span></div>
                <div className="err"><span className="mono err__code" style={{color:'var(--fail)'}}>401</span><span className="mono">UNAUTHENTICATED</span><span className="muted">missing/expired token</span></div>
                <div className="err"><span className="mono err__code" style={{color:'var(--fail)'}}>409</span><span className="mono">INSUFFICIENT_INVENTORY</span><span className="muted">stock &lt; qty</span></div>
                <div className="err"><span className="mono err__code" style={{color:'var(--fail)'}}>422</span><span className="mono">COUPON_INVALID</span><span className="muted">expired or not attached</span></div>
              </div>
            </section>

            <section className="schema">
              <header className="schema__h"><span>Test cases using this endpoint</span><span className="mono muted">8</span></header>
              <div className="tc-using">
                {["TC-001","TC-002","TC-003","TC-004","TC-005","TC-008"].map(id => (
                  <span key={id} className="chip mono">{id}</span>
                ))}
              </div>
            </section>
          </section>
        </div>
      </div>
    </div>
  );
};

const NewTCModal = () => (
  <div className="modal-host">
    <div className="modal-back"/>
    <div className="modal modal--newtc">
      <header className="modal__h">
        <div>
          <div className="modal__title"><Icon name="plus" size={13}/>New test case</div>
          <div className="modal__sub muted">Only TC ID is required · everything else can be filled later</div>
        </div>
        <button className="btn btn--ghost"><Icon name="x" size={12}/></button>
      </header>

      <div className="newtc">
        <div className="form-row">
          <label>TC ID <span style={{color:'var(--fail)'}}>*</span></label>
          <input className="input mono" defaultValue="TC-009" autoFocus/>
          <span className="muted">unique within feature</span>
        </div>
        <div className="form-row">
          <label>Feature</label>
          <span className="select"><Icon name="folder" size={11}/>Gift System<Icon name="chevronDown" size={10}/></span>
          <label style={{marginLeft:16}}>Suite</label>
          <span className="select"><Icon name="layers" size={11}/>Sell Gift<Icon name="chevronDown" size={10}/></span>
        </div>
        <div className="form-row form-row--top">
          <label>Description</label>
          <textarea className="input" rows={3} placeholder="Line 1 = display name. Line 2+ = scenario, pre-conditions. AI reads this entire field to generate the script.&#10;&#10;e.g.&#10;Sell with expired coupon returns 422&#10;User has expired coupon attached. Pre: balance ≥ 50000, gift_42 stock ≥ 1."/>
        </div>
        <div className="form-row">
          <label>Main API</label>
          <span className="select"><span className="method POST">POST</span><span className="mono">/gifts/sell</span><Icon name="chevronDown" size={10}/></span>
          <span className="muted">from API Library</span>
        </div>
        <div className="form-row">
          <label>Data strategy</label>
          <div className="seg-group">
            <span className="seg seg--active">isolated</span>
            <span className="seg">shared</span>
            <span className="seg">seeded</span>
          </div>
          <span className="muted">isolated = fresh user per run</span>
        </div>

        <div className="newtc__hint">
          <Icon name="sparkles" size={12} style={{color:'var(--accent)'}}/>
          <span>Once created, ask <b>AI Assistant</b> to suggest related APIs, fixtures, and a Part 2 script.</span>
        </div>
      </div>

      <footer className="modal__f">
        <label className="check"><input type="checkbox" defaultChecked/><span>Open editor after create</span></label>
        <div style={{flex:1}}/>
        <button className="btn btn--ghost">Cancel</button>
        <button className="btn">Create &amp; add another</button>
        <button className="btn btn--primary">Create test case <span className="kbd" style={{marginLeft:4}}>⌘↵</span></button>
      </footer>
    </div>
  </div>
);

const EmptyState = () => (
  <div className="frame app" data-theme="dark">
    {window.TopBar && <window.TopBar/>}
    <div className="empty">
      <div className="empty__inner">
        <div className="empty__art">
          <div className="empty__node"><Icon name="folder" size={20}/></div>
          <div className="empty__line"/>
          <div className="empty__node"><Icon name="layers" size={20}/></div>
          <div className="empty__line"/>
          <div className="empty__node empty__node--accent"><Icon name="file" size={20}/></div>
        </div>
        <h1 className="empty__title">No test cases yet</h1>
        <p className="empty__sub">QA Runner organizes your work as <b className="mono">Feature → Suite → Test Case</b>. Start by importing a Postman collection, an OpenAPI spec, or just creating a single TC by hand.</p>
        <div className="empty__cta">
          <button className="btn btn--primary"><Icon name="plus" size={11}/>Create first test case</button>
          <button className="btn"><Icon name="download" size={11}/>Import OpenAPI</button>
          <button className="btn"><Icon name="download" size={11}/>Import Postman collection</button>
        </div>
        <div className="empty__hint">
          <Icon name="sparkles" size={12} style={{color:'var(--accent)'}}/>
          <span>Or paste an API ticket — AI will draft the TC for you.</span>
        </div>

        <div className="empty__steps">
          <div className="estep"><span className="estep__n mono">1</span><div><b>Connect an environment</b><span className="muted">base URL + auth (static or dynamic)</span></div></div>
          <div className="estep"><span className="estep__n mono">2</span><div><b>Import or write an API</b><span className="muted">request / response / error codes</span></div></div>
          <div className="estep"><span className="estep__n mono">3</span><div><b>Create a TC and run it</b><span className="muted">AI generates Part 2, you accept or refine</span></div></div>
        </div>
      </div>
    </div>
  </div>
);

Object.assign(window, { Environments, APILibrary, NewTCModal, EmptyState });