/* global React, Icon */
// Feature 1 — OpenAPI Import (5 step flow as artboards)

const Mode = ({ id, checked, title, sub }) => (
  <label className={"radio-card" + (checked ? " radio-card--on" : "")}>
    <input type="radio" name={id} defaultChecked={checked}/>
    <span className="radio-card__dot"><span/></span>
    <div>
      <div className="radio-card__t">{title}</div>
      <div className="radio-card__s muted">{sub}</div>
    </div>
  </label>
);

// ─── Step 1: Entry / Settings card ─────────────────────────────────
const ImportEntry = () => (
  <div className="frame app" data-theme="dark">
    {window.TopBar && <window.TopBar/>}
    <div className="page">
      <header className="page__h">
        <div>
          <h1 className="page__title">Workspace settings</h1>
          <div className="muted">Import, integrations, automation</div>
        </div>
      </header>

      <div className="settings-grid">
        <div className="settings-card settings-card--feature">
          <div className="settings-card__h">
            <Icon name="download" size={16} style={{color:'var(--accent)'}}/>
            <div className="settings-card__title">Import from OpenAPI</div>
            <span className="chip chip--accent">new</span>
          </div>
          <p className="muted" style={{margin:'4px 0 14px', fontSize:12.5, lineHeight:1.55}}>
            Bulk-create features, suites, API entries and TC stubs from an OpenAPI 3.0+ spec. Supports JSON or YAML up to 5MB.
          </p>
          <div className="recent-import">
            <Icon name="history" size={11}/>
            <span className="muted">Last imported</span>
            <b className="mono">Stripe Payments</b>
            <span className="muted">· 2 days ago · 50 TCs</span>
          </div>
          <div className="settings-card__cta">
            <button className="btn btn--primary"><Icon name="download" size={11}/>Import OpenAPI</button>
            <button className="btn btn--ghost"><Icon name="history" size={11}/>Import history</button>
          </div>
        </div>

        <div className="settings-card">
          <div className="settings-card__h">
            <Icon name="branch" size={16}/>
            <div className="settings-card__title">GitHub Triggers</div>
          </div>
          <p className="muted" style={{margin:'4px 0 14px', fontSize:12.5, lineHeight:1.55}}>Run tests automatically on push or PR.</p>
          <button className="btn"><Icon name="arrow" size={11}/>Open</button>
        </div>

        <div className="settings-card">
          <div className="settings-card__h">
            <Icon name="send" size={16}/>
            <div className="settings-card__title">Notifications</div>
          </div>
          <p className="muted" style={{margin:'4px 0 14px', fontSize:12.5, lineHeight:1.55}}>Slack &amp; Discord alerts on failure.</p>
          <button className="btn"><Icon name="arrow" size={11}/>Open</button>
        </div>
      </div>
    </div>
  </div>
);

// ─── Steps 2–5: shared modal shell with stepper ────────────────────
const Stepper = ({ at }) => {
  const steps = ["Upload", "Preview", "Import", "Done"];
  return (
    <div className="stepper">
      {steps.map((s, i) => (
        <React.Fragment key={s}>
          <div className={"stepper__step" + (i < at ? " stepper__step--done" : i === at ? " stepper__step--cur" : "")}>
            <span className="stepper__n">{i < at ? <Icon name="check" size={10}/> : i + 1}</span>
            <span className="stepper__l">{s}</span>
          </div>
          {i < steps.length - 1 && <div className={"stepper__line" + (i < at ? " stepper__line--done" : "")}/>}
        </React.Fragment>
      ))}
    </div>
  );
};

const ImportShell = ({ at, title, sub, body, footer }) => (
  <div className="modal-host">
    <div className="modal-back"/>
    <div className="modal modal--import">
      <header className="modal__h">
        <div>
          <div className="modal__title"><Icon name="download" size={13} style={{color:'var(--accent)'}}/>{title}</div>
          <div className="modal__sub muted">{sub}</div>
        </div>
        <button className="btn btn--ghost"><Icon name="x" size={12}/></button>
      </header>
      <div style={{padding:'10px 18px 0'}}><Stepper at={at}/></div>
      <div className="import-body">{body}</div>
      <footer className="modal__f">{footer}</footer>
    </div>
  </div>
);

// Step 2 — Upload
const ImportUpload = () => (
  <div className="frame app" data-theme="dark" style={{position:'relative'}}>
    {window.TopBar && <window.TopBar/>}
    <div style={{flex:1, opacity:0.32, pointerEvents:'none'}}/>
    <ImportShell at={0}
      title="Import OpenAPI Spec"
      sub="Upload a JSON or YAML spec — we'll generate the test scaffold"
      body={<>
        <div className="dz dz--hover">
          <div className="dz__icon"><Icon name="file" size={28}/></div>
          <div className="dz__title">Drop spec file here</div>
          <div className="dz__sub muted">or <span className="link">click to browse</span></div>
          <div className="dz__hint muted mono">JSON · YAML · max 5 MB · OpenAPI 3.0+</div>
        </div>

        <div className="dz-file">
          <Icon name="file" size={14} style={{color:'var(--accent)'}}/>
          <div style={{flex:1}}>
            <div className="mono" style={{fontSize:12.5}}>stripe-openapi-2024-01-01.yaml</div>
            <div className="muted mono" style={{fontSize:10.5}}>432 KB · uploaded just now · sha256 a72f…91d</div>
          </div>
          <span className="status pass" style={{fontSize:10}}><Icon name="check" size={10}/>VALID</span>
          <button className="btn btn--ghost" style={{height:24}}><Icon name="x" size={11}/></button>
        </div>

        <div className="form-row form-row--top" style={{marginTop:14}}>
          <label>Mode</label>
          <div className="radio-group">
            <Mode id="m1" checked title="Incremental" sub="Skip endpoints that already exist · safe re-import"/>
            <Mode id="m1" title="Overwrite" sub="Refresh all entries from spec · keeps run history"/>
            <Mode id="m1" title="Dry run" sub="Show what would happen · no changes saved"/>
          </div>
        </div>

        <div className="form-row" style={{marginTop:8}}>
          <label>Target</label>
          <span className="select"><Icon name="folder" size={11}/>This workspace · Acme QA<Icon name="chevronDown" size={10}/></span>
          <span className="muted">Admins &amp; owners only</span>
        </div>
      </>}
      footer={<>
        <span className="muted mono" style={{fontSize:11}}>spec parsed in 0.31s · 50 paths detected</span>
        <div style={{flex:1}}/>
        <button className="btn btn--ghost">Cancel</button>
        <button className="btn btn--primary">Preview <Icon name="arrow" size={11}/></button>
      </>}
    />
  </div>
);

// Step 3 — Preview
const ImportPreview = () => (
  <div className="frame app" data-theme="dark" style={{position:'relative'}}>
    {window.TopBar && <window.TopBar/>}
    <div style={{flex:1, opacity:0.32, pointerEvents:'none'}}/>
    <ImportShell at={1}
      title="Preview · Stripe Payments v2024-01-01"
      sub="Dry-run summary · nothing is written yet"
      body={<>
        <div className="diff-grid">
          <div className="diff-card diff-card--add">
            <div className="diff-card__n mono">+8</div>
            <div className="diff-card__l">Features <span className="muted">(1 per OpenAPI tag)</span></div>
          </div>
          <div className="diff-card diff-card--add">
            <div className="diff-card__n mono">+8</div>
            <div className="diff-card__l">Suites</div>
          </div>
          <div className="diff-card diff-card--add">
            <div className="diff-card__n mono">+50</div>
            <div className="diff-card__l">API entries</div>
          </div>
          <div className="diff-card diff-card--add">
            <div className="diff-card__n mono">+50</div>
            <div className="diff-card__l">TC stubs</div>
          </div>
          <div className="diff-card diff-card--skip">
            <div className="diff-card__n mono">0</div>
            <div className="diff-card__l">Skipped <span className="muted">(no conflicts)</span></div>
          </div>
        </div>

        <div className="preview-tree">
          <div className="preview-tree__h">
            <span>Tree preview</span>
            <span className="muted mono">est. 2.1s</span>
          </div>
          <div className="preview-tree__body">
            {[
              ["Charges", 8, ["POST /v1/charges","GET /v1/charges/{id}","POST /v1/charges/{id}/capture","POST /v1/charges/{id}/refund"]],
              ["Customers", 6, ["POST /v1/customers","GET /v1/customers/{id}"]],
              ["Subscriptions", 9, ["POST /v1/subscriptions","DELETE /v1/subscriptions/{id}"]],
              ["Invoices", 7, ["GET /v1/invoices","POST /v1/invoices/{id}/finalize"]],
            ].map(([name, n, paths], i) => (
              <div key={i} className="preview-feat">
                <div className="preview-feat__h">
                  <Icon name="chevronDown" size={10}/>
                  <Icon name="folder" size={12}/>
                  <span className="preview-feat__n">{name}</span>
                  <span className="chip chip--add mono">+{n}</span>
                </div>
                {paths.map((p, j) => (
                  <div key={j} className="preview-row">
                    <span className="preview-row__plus">+</span>
                    <span className={"method " + p.split(" ")[0]}>{p.split(" ")[0]}</span>
                    <span className="mono">{p.split(" ")[1]}</span>
                    <span className="muted" style={{marginLeft:'auto', fontSize:11}}>stub</span>
                  </div>
                ))}
                <div className="preview-row preview-row--more muted">+ {n - paths.length} more endpoints…</div>
              </div>
            ))}
          </div>
        </div>

        <div className="warn-list">
          <div className="warn-list__h">
            <Icon name="bolt" size={12}/>
            <span>3 warnings</span>
            <span className="muted">non-blocking</span>
          </div>
          <div className="warn">
            <span className="warn__b">⚠</span>
            <span className="mono"><span className="method GET">GET</span> /v1/foo</span>
            <span className="warn__msg">no <span className="mono inline-code">summary</span> in spec — TC stub created without description</span>
          </div>
          <div className="warn">
            <span className="warn__b">⚠</span>
            <span className="mono"><span className="method POST">POST</span> /v1/bar</span>
            <span className="warn__msg">request body uses <span className="mono inline-code">oneOf</span> — schema unsupported, skipped</span>
          </div>
          <div className="warn">
            <span className="warn__b">⚠</span>
            <span className="mono"><span className="method DELETE">DELETE</span> /v1/baz</span>
            <span className="warn__msg">missing <span className="mono inline-code">operationId</span> — generated <span className="mono inline-code">delete_v1_baz</span></span>
          </div>
        </div>

        <div className="newtc__hint" style={{marginTop:14}}>
          <Icon name="sparkles" size={12} style={{color:'var(--accent)'}}/>
          <span>TCs are created as <b>stubs</b>. Click <b>Generate</b> on each (or batch from suite) to create runnable Part 2 scripts.</span>
        </div>
      </>}
      footer={<>
        <button className="btn btn--ghost"><Icon name="chevronLeft" size={11}/>Back</button>
        <div style={{flex:1}}/>
        <span className="muted mono" style={{fontSize:11}}>mode: incremental · target: Acme QA</span>
        <button className="btn btn--primary">Confirm import <Icon name="arrow" size={11}/></button>
      </>}
    />
  </div>
);

// Step 4 — Loading
const ImportLoading = () => (
  <div className="frame app" data-theme="dark" style={{position:'relative'}}>
    {window.TopBar && <window.TopBar/>}
    <div style={{flex:1, opacity:0.32, pointerEvents:'none'}}/>
    <ImportShell at={2}
      title="Importing…"
      sub="Writing entities to Acme QA workspace"
      body={<>
        <div className="loading-art">
          <div className="loading-spin"><Icon name="refresh" size={28}/></div>
          <div className="loading-title">Creating endpoint 38 of 50</div>
          <div className="loading-sub muted mono">POST /v1/subscriptions/{`{id}`}/cancel</div>

          <div className="prog">
            <div className="prog__bar"><div className="prog__fill" style={{width:'76%'}}/></div>
            <div className="prog__meta">
              <span className="mono">76%</span>
              <span className="muted mono">38/50 · 1.6s elapsed · ~0.5s remaining</span>
            </div>
          </div>

          <div className="loading-steps">
            <div className="lstep lstep--done"><Icon name="check" size={11}/><span>Parse spec</span><span className="muted mono">0.3s</span></div>
            <div className="lstep lstep--done"><Icon name="check" size={11}/><span>Create 8 features</span><span className="muted mono">0.1s</span></div>
            <div className="lstep lstep--done"><Icon name="check" size={11}/><span>Create 8 suites</span><span className="muted mono">0.1s</span></div>
            <div className="lstep lstep--cur"><span className="dot running"/><span>Create 50 API entries + TC stubs</span><span className="muted mono">…</span></div>
            <div className="lstep"><span className="lstep__bullet"/><span>Index for search</span><span className="muted mono">—</span></div>
          </div>
        </div>
      </>}
      footer={<>
        <span className="muted mono" style={{fontSize:11}}>safe to close · import continues in background</span>
        <div style={{flex:1}}/>
        <button className="btn btn--ghost">Run in background</button>
        <button className="btn btn--danger">Cancel import</button>
      </>}
    />
  </div>
);

// Step 5 — Success
const ImportSuccess = () => (
  <div className="frame app" data-theme="dark" style={{position:'relative'}}>
    {window.TopBar && <window.TopBar/>}
    <div style={{flex:1, opacity:0.32, pointerEvents:'none'}}/>
    <ImportShell at={3}
      title="Imported ✓"
      sub="Stripe Payments · v2024-01-01 · written to Acme QA"
      body={<>
        <div className="done-art">
          <div className="done-circle"><Icon name="check" size={28}/></div>
          <div className="done-title">Import complete</div>
          <div className="done-sub muted">66 entities created in 2.1s · 0 errors · 3 warnings</div>
        </div>

        <div className="diff-grid">
          <div className="diff-card diff-card--add"><div className="diff-card__n mono">+8</div><div className="diff-card__l">Features</div></div>
          <div className="diff-card diff-card--add"><div className="diff-card__n mono">+8</div><div className="diff-card__l">Suites</div></div>
          <div className="diff-card diff-card--add"><div className="diff-card__n mono">+50</div><div className="diff-card__l">API entries</div></div>
          <div className="diff-card diff-card--add"><div className="diff-card__n mono">+50</div><div className="diff-card__l">TC stubs</div></div>
        </div>

        <div className="next-steps">
          <div className="next-steps__h">Suggested next steps</div>
          <div className="ns">
            <span className="ns__n mono">1</span>
            <div>
              <div className="ns__t">Generate scripts for the new TCs</div>
              <div className="muted">Open a suite → ⌘ click <b>Generate</b> to batch-create Part 2 with AI</div>
            </div>
            <button className="btn">Open suite</button>
          </div>
          <div className="ns">
            <span className="ns__n mono">2</span>
            <div>
              <div className="ns__t">Configure environment</div>
              <div className="muted">Stripe needs base URL + bearer token — set up <b>staging</b> first</div>
            </div>
            <button className="btn">Add env</button>
          </div>
          <div className="ns">
            <span className="ns__n mono">3</span>
            <div>
              <div className="ns__t">Run a smoke suite</div>
              <div className="muted">Confirm the new endpoints are live before connecting GitHub triggers</div>
            </div>
            <button className="btn"><Icon name="play" size={10}/>Run</button>
          </div>
        </div>
      </>}
      footer={<>
        <button className="btn btn--ghost">Import another</button>
        <div style={{flex:1}}/>
        <button className="btn">Close</button>
        <button className="btn btn--primary">View features <Icon name="arrow" size={11}/></button>
      </>}
    />
  </div>
);

// Step 6 — Errors
const ImportErrors = () => (
  <div className="frame app" data-theme="dark" style={{position:'relative'}}>
    {window.TopBar && <window.TopBar/>}
    <div style={{flex:1, opacity:0.32, pointerEvents:'none'}}/>
    <div className="modal-host">
      <div className="modal-back"/>
      <div className="modal modal--import">
        <header className="modal__h">
          <div>
            <div className="modal__title"><Icon name="bolt" size={13} style={{color:'var(--fail)'}}/>Import — error states</div>
            <div className="modal__sub muted">Reference · how each failure surfaces inline</div>
          </div>
          <button className="btn btn--ghost"><Icon name="x" size={12}/></button>
        </header>
        <div className="import-body">
          <div className="err-state">
            <div className="err-state__h">
              <span className="err-state__b" style={{background:'var(--fail-soft)', color:'var(--fail)'}}>413</span>
              <div>
                <div className="err-state__t">File too large</div>
                <div className="muted">Spec exceeds 5 MB cap.</div>
              </div>
              <div style={{flex:1}}/>
              <button className="btn">Try smaller file</button>
            </div>
            <div className="err-state__hint muted">Tip: split your spec by tag, or strip examples / x-extensions.</div>
          </div>

          <div className="err-state">
            <div className="err-state__h">
              <span className="err-state__b" style={{background:'var(--fail-soft)', color:'var(--fail)'}}>422</span>
              <div>
                <div className="err-state__t">Invalid OpenAPI</div>
                <div className="muted">This file isn't valid OpenAPI 3.0+.</div>
              </div>
              <div style={{flex:1}}/>
              <button className="btn"><Icon name="copy" size={10}/>Copy errors</button>
            </div>
            <pre className="code" style={{margin:'8px 0 0', maxHeight:120}}><code>{`paths./v1/charges.post.requestBody:
  required field 'content' missing
components.schemas.Charge:
  unknown type 'integer64' (allowed: integer, number, ...)
info.version: required`}</code></pre>
          </div>

          <div className="err-state">
            <div className="err-state__h">
              <span className="err-state__b" style={{background:'var(--warn-soft, oklch(0.78 0.15 75 / 0.12))', color:'var(--warn)'}}>—</span>
              <div>
                <div className="err-state__t">Connection lost</div>
                <div className="muted">Server unreachable mid-upload. Your file is still selected.</div>
              </div>
              <div style={{flex:1}}/>
              <button className="btn btn--primary"><Icon name="refresh" size={10}/>Retry</button>
            </div>
          </div>

          <div className="err-state">
            <div className="err-state__h">
              <span className="err-state__b" style={{background:'var(--fail-soft)', color:'var(--fail)'}}>403</span>
              <div>
                <div className="err-state__t">Permission denied</div>
                <div className="muted">Only workspace <b>admins</b> and <b>owners</b> can import OpenAPI specs.</div>
              </div>
              <div style={{flex:1}}/>
              <button className="btn">Request access</button>
            </div>
          </div>

          <div className="err-state">
            <div className="err-state__h">
              <span className="err-state__b" style={{background:'var(--fail-soft)', color:'var(--fail)'}}>415</span>
              <div>
                <div className="err-state__t">Unsupported file type</div>
                <div className="muted">Only <span className="mono inline-code">.json</span>, <span className="mono inline-code">.yaml</span>, <span className="mono inline-code">.yml</span> are accepted.</div>
              </div>
            </div>
          </div>
        </div>
        <footer className="modal__f">
          <span className="muted mono" style={{fontSize:11}}>reference page · all states stack inline above the action bar</span>
          <div style={{flex:1}}/>
          <button className="btn btn--ghost">Close</button>
        </footer>
      </div>
    </div>
  </div>
);

Object.assign(window, { ImportEntry, ImportUpload, ImportPreview, ImportLoading, ImportSuccess, ImportErrors });