/* global React, Icon */
// Feature 4 — OpenAPI Import (5-step wizard)

const STEPS = [
  { n: 1, label: "Source" },
  { n: 2, label: "Parse" },
  { n: 3, label: "Select" },
  { n: 4, label: "Map" },
  { n: 5, label: "Confirm" },
];

const Stepper = ({ current }) => (
  <div className="stepper stepper--5">
    {STEPS.map((s, i) => (
      <React.Fragment key={s.n}>
        <div className={"stepper__step" + (s.n < current ? " stepper__step--done" : s.n === current ? " stepper__step--cur" : "")}>
          <span className="stepper__n">{s.n < current ? <Icon name="check" size={10}/> : s.n}</span>
          <span className="stepper__l">{s.label}</span>
        </div>
        {i < STEPS.length - 1 && <div className={"stepper__line" + (s.n < current ? " stepper__line--done" : "")}/>}
      </React.Fragment>
    ))}
  </div>
);

const ImportShell = ({ step, children, footer }) => (
  <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="download" size={13}/>Import OpenAPI</div>
            <div className="modal__sub muted">Bring endpoints into the API Library · scaffold TCs in one shot</div>
          </div>
          <button className="btn btn--ghost"><Icon name="x" size={12}/></button>
        </header>
        <div style={{padding:'14px 22px 6px'}}><Stepper current={step}/></div>
        <div className="import-body">{children}</div>
        <footer className="modal__f">{footer}</footer>
      </div>
    </div>
  </div>
);

// Step 1 — Source
const ImportStep1 = () => (
  <ImportShell
    step={1}
    footer={<>
      <span className="muted mono" style={{fontSize:11}}>YAML &amp; JSON · OpenAPI 3.0+ / Swagger 2.0</span>
      <div style={{flex:1}}/>
      <button className="btn btn--ghost">Cancel</button>
      <button className="btn btn--primary">Continue <Icon name="arrow" size={11}/></button>
    </>}>
    <div className="src-grid">
      <label className="src src--on">
        <input type="radio" name="s" defaultChecked/>
        <Icon name="link" size={18}/>
        <div className="src__t">From URL</div>
        <div className="src__s muted">Public or auth-protected spec URL</div>
      </label>
      <label className="src">
        <input type="radio" name="s"/>
        <Icon name="file" size={18}/>
        <div className="src__t">Upload file</div>
        <div className="src__s muted">.yaml · .yml · .json</div>
      </label>
      <label className="src">
        <input type="radio" name="s"/>
        <Icon name="branch" size={18}/>
        <div className="src__t">From GitHub repo</div>
        <div className="src__s muted">Auto-sync on push</div>
      </label>
    </div>

    <div className="src-form">
      <div className="form-row"><label>Spec URL</label><input className="input mono" defaultValue="https://api.acme.dev/openapi.yaml" autoFocus/></div>
      <div className="form-row"><label>Auth</label>
        <span className="select">Bearer token<Icon name="chevronDown" size={10}/></span>
        <input className="input mono" placeholder="••••••••" defaultValue="••••••••••••a72f" style={{flex:1, marginLeft:8}}/>
      </div>
      <div className="form-row"><label>Target group</label>
        <span className="select"><Icon name="box" size={11}/>New group "acme-api"<Icon name="chevronDown" size={10}/></span>
        <span className="muted" style={{fontSize:11, marginLeft:8}}>creates a new domain in your library</span>
      </div>
      <div className="form-row form-row--top"><label>Options</label>
        <div style={{display:'flex', flexDirection:'column', gap:6}}>
          <label className="check"><input type="checkbox" defaultChecked/><span>Auto-resync when spec changes</span></label>
          <label className="check"><input type="checkbox" defaultChecked/><span>Generate a starter TC per endpoint (happy path only)</span></label>
          <label className="check"><input type="checkbox"/><span>Mark imported endpoints as <span className="mono">read-only</span> (cannot edit, only re-sync)</span></label>
        </div>
      </div>
    </div>
  </ImportShell>
);

// Step 2 — Parse / validate
const ImportStep2 = () => (
  <ImportShell
    step={2}
    footer={<>
      <button className="btn btn--ghost"><Icon name="chevronLeft" size={11}/>Back</button>
      <div style={{flex:1}}/>
      <span className="muted" style={{fontSize:11}}><span className="dot pass"/> 47 endpoints · 23 schemas · 0 fatal errors</span>
      <button className="btn btn--primary">Continue <Icon name="arrow" size={11}/></button>
    </>}>
    <div className="parse">
      <div className="parse__file">
        <Icon name="file" size={14}/>
        <div>
          <div className="mono" style={{fontSize:12}}>openapi.yaml</div>
          <div className="muted" style={{fontSize:11}}>fetched · 184 KB · OpenAPI 3.0.3 · 2.4s</div>
        </div>
        <div style={{flex:1}}/>
        <button className="btn btn--ghost" style={{height:24}}><Icon name="eye" size={11}/>Raw</button>
      </div>

      <div className="parse__stats">
        <div className="parse-stat"><div className="parse-stat__v mono">47</div><div className="muted">endpoints</div></div>
        <div className="parse-stat"><div className="parse-stat__v mono">23</div><div className="muted">schemas</div></div>
        <div className="parse-stat"><div className="parse-stat__v mono">8</div><div className="muted">tags</div></div>
        <div className="parse-stat"><div className="parse-stat__v mono" style={{color:'var(--warn)'}}>3</div><div className="muted">warnings</div></div>
        <div className="parse-stat"><div className="parse-stat__v mono" style={{color:'var(--pass)'}}>0</div><div className="muted">errors</div></div>
      </div>

      <div className="parse__diag">
        <div className="diag-row diag-row--warn">
          <Icon name="bolt" size={12}/>
          <div>
            <div><b>3 endpoints missing response examples</b></div>
            <div className="muted mono" style={{fontSize:11}}>POST /v1/charges · GET /v1/customers/{`{id}`} · DELETE /v1/refunds/{`{id}`}</div>
          </div>
          <div style={{flex:1}}/>
          <span className="muted" style={{fontSize:11}}>AI will infer expected on import</span>
        </div>
        <div className="diag-row diag-row--info">
          <Icon name="check" size={12}/>
          <div>
            <div><b>5 endpoints already exist in API Library</b></div>
            <div className="muted" style={{fontSize:11}}>You'll choose merge / skip / overwrite next step</div>
          </div>
        </div>
        <div className="diag-row diag-row--info">
          <Icon name="check" size={12}/>
          <div>
            <div><b>Schemas resolved</b></div>
            <div className="muted" style={{fontSize:11}}>All <span className="mono">$ref</span> chains resolved · no circular references</div>
          </div>
        </div>
      </div>
    </div>
  </ImportShell>
);

// Step 3 — Select endpoints
const ENDPOINTS = [
  { tag: "charges", method: "POST", path: "/v1/charges", name: "Create charge", on: true, exists: false },
  { tag: "charges", method: "GET",  path: "/v1/charges/{id}", name: "Get charge", on: true, exists: false },
  { tag: "charges", method: "POST", path: "/v1/charges/{id}/capture", name: "Capture charge", on: true, exists: false },
  { tag: "charges", method: "POST", path: "/v1/charges/{id}/refund", name: "Refund charge", on: true, exists: true },
  { tag: "customers", method: "GET",  path: "/v1/customers", name: "List customers", on: true, exists: false },
  { tag: "customers", method: "POST", path: "/v1/customers", name: "Create customer", on: true, exists: false },
  { tag: "customers", method: "GET",  path: "/v1/customers/{id}", name: "Get customer", on: true, exists: false },
  { tag: "customers", method: "PUT",  path: "/v1/customers/{id}", name: "Update customer", on: false, exists: false },
  { tag: "customers", method: "DELETE", path: "/v1/customers/{id}", name: "Delete customer", on: false, exists: false },
  { tag: "refunds", method: "POST", path: "/v1/refunds", name: "Create refund", on: true, exists: false },
  { tag: "refunds", method: "GET",  path: "/v1/refunds/{id}", name: "Get refund", on: true, exists: true },
  { tag: "webhooks", method: "POST", path: "/v1/webhooks", name: "Create webhook endpoint", on: false, exists: false },
];

const ImportStep3 = () => {
  const groups = ["charges", "customers", "refunds", "webhooks"];
  return (
    <ImportShell
      step={3}
      footer={<>
        <button className="btn btn--ghost"><Icon name="chevronLeft" size={11}/>Back</button>
        <div style={{flex:1}}/>
        <span className="muted" style={{fontSize:12}}><b style={{color:'var(--fg)'}}>9</b> of 12 selected</span>
        <button className="btn btn--primary">Continue <Icon name="arrow" size={11}/></button>
      </>}>
      <div className="select-bar">
        <div className="sb__search sb__search--inline" style={{width:240}}>
          <Icon name="search" size={12}/>
          <input placeholder="Filter endpoints…" defaultValue=""/>
        </div>
        <div className="seg-group">
          <span className="seg seg--active">All <em>12</em></span>
          <span className="seg">New <em>10</em></span>
          <span className="seg">Existing <em>2</em></span>
        </div>
        <div style={{flex:1}}/>
        <button className="btn btn--ghost" style={{height:24}}>Select all</button>
        <button className="btn btn--ghost" style={{height:24}}>None</button>
      </div>

      <div className="select-list">
        {groups.map(g => (
          <div key={g} className="sel-group">
            <div className="sel-group__h">
              <Icon name="chevronDown" size={11}/>
              <Icon name="box" size={12}/>
              <span style={{color:'var(--fg)', fontWeight:500}}>{g}</span>
              <span className="muted mono">{ENDPOINTS.filter(e => e.tag === g).length}</span>
              <div style={{flex:1}}/>
              <label className="check"><input type="checkbox" defaultChecked={ENDPOINTS.filter(e => e.tag===g).every(e => e.on)}/><span style={{fontSize:11.5}}>all</span></label>
            </div>
            {ENDPOINTS.filter(e => e.tag === g).map((e,i) => (
              <label key={i} className={"sel-row" + (e.on ? " sel-row--on" : "")}>
                <input type="checkbox" defaultChecked={e.on}/>
                <span className={"method " + e.method}>{e.method}</span>
                <span className="mono sel-row__path">{e.path}</span>
                <span className="sel-row__name">{e.name}</span>
                <div style={{flex:1}}/>
                {e.exists && <span className="chip" style={{fontSize:10, color:'var(--warn)', borderColor:'oklch(0.78 0.15 75 / 0.3)'}}>exists · merge?</span>}
              </label>
            ))}
          </div>
        ))}
      </div>
    </ImportShell>
  );
};

// Step 4 — Map (conflicts + naming)
const ImportStep4 = () => (
  <ImportShell
    step={4}
    footer={<>
      <button className="btn btn--ghost"><Icon name="chevronLeft" size={11}/>Back</button>
      <div style={{flex:1}}/>
      <span className="muted" style={{fontSize:11}}>2 conflicts resolved</span>
      <button className="btn btn--primary">Continue <Icon name="arrow" size={11}/></button>
    </>}>
    <div className="map">
      <section className="map-card">
        <header className="map-card__h"><Icon name="bolt" size={12}/><span>Conflicts</span><span className="chip mono">2</span></header>

        <div className="conflict">
          <div className="conflict__h">
            <span className="method POST">POST</span>
            <span className="mono">/v1/charges/{`{id}`}/refund</span>
            <div style={{flex:1}}/>
            <span className="muted" style={{fontSize:11}}>Existing endpoint in API Library has 3 TCs</span>
          </div>
          <div className="conflict__choices">
            <label className="rc rc--on"><input type="radio" name="r1" defaultChecked/><span><b>Merge</b><span className="muted">keep existing TCs · update schema only</span></span></label>
            <label className="rc"><input type="radio" name="r1"/><span><b>Overwrite</b><span className="muted">replace endpoint · TCs reference old shape</span></span></label>
            <label className="rc"><input type="radio" name="r1"/><span><b>Skip</b><span className="muted">don't import this one</span></span></label>
          </div>
        </div>

        <div className="conflict">
          <div className="conflict__h">
            <span className="method GET">GET</span>
            <span className="mono">/v1/refunds/{`{id}`}</span>
            <div style={{flex:1}}/>
            <span className="muted" style={{fontSize:11}}>Existing · 1 TC</span>
          </div>
          <div className="conflict__choices">
            <label className="rc rc--on"><input type="radio" name="r2" defaultChecked/><span><b>Merge</b><span className="muted">keep TCs · update schema</span></span></label>
            <label className="rc"><input type="radio" name="r2"/><span><b>Overwrite</b><span className="muted">replace</span></span></label>
            <label className="rc"><input type="radio" name="r2"/><span><b>Skip</b><span className="muted">don't import</span></span></label>
          </div>
        </div>
      </section>

      <section className="map-card">
        <header className="map-card__h"><Icon name="settings" size={12}/><span>Naming &amp; defaults</span></header>
        <div className="form" style={{padding:12}}>
          <div className="form-row"><label>TC ID prefix</label><input className="input mono" defaultValue="TC-S" style={{maxWidth:140}}/><span className="muted" style={{fontSize:11}}>e.g. TC-S001, TC-S002…</span></div>
          <div className="form-row"><label>Feature</label><span className="select"><Icon name="folder" size={11}/>Stripe Payments<Icon name="chevronDown" size={10}/></span><span className="muted" style={{fontSize:11}}>or create new</span></div>
          <div className="form-row"><label>Suite per tag</label>
            <div className="seg-group"><span className="seg seg--active">Yes</span><span className="seg">Single suite</span></div>
            <span className="muted" style={{fontSize:11}}>creates suites: charges, customers, refunds…</span>
          </div>
          <div className="form-row form-row--top"><label>Auth fixture</label>
            <span className="select"><Icon name="lock" size={11}/>create_test_user · role=admin<Icon name="chevronDown" size={10}/></span>
          </div>
        </div>
      </section>
    </div>
  </ImportShell>
);

// Step 5 — Confirm + progress
const ImportStep5 = () => (
  <ImportShell
    step={5}
    footer={<>
      <span className="muted" style={{fontSize:11}}><span className="dot running"/> Importing… 6 of 9 done</span>
      <div style={{flex:1}}/>
      <button className="btn btn--ghost">Run in background</button>
      <button className="btn btn--primary" disabled style={{opacity:0.55}}>Open API Library</button>
    </>}>
    <div className="confirm">
      <div className="confirm__head">
        <div>
          <div className="confirm__title">Importing into <span className="mono" style={{color:'var(--fg)'}}>Stripe Payments</span></div>
          <div className="muted" style={{fontSize:12}}>9 endpoints · 9 starter TCs · 2 merges</div>
        </div>
        <div style={{flex:1}}/>
        <div style={{display:'flex', flexDirection:'column', alignItems:'flex-end', gap:2}}>
          <div className="mono" style={{fontSize:18, fontWeight:600}}>67%</div>
          <div className="muted mono" style={{fontSize:11}}>~8s remaining</div>
        </div>
      </div>

      <div className="runner__bar" style={{marginTop:12}}>
        <div className="runner__bar-pass" style={{width:'67%'}}/>
        <div className="runner__bar-run" style={{width:'11%'}}/>
      </div>

      <div className="confirm__list">
        {[
          { v: "done", l: "Schemas resolved", d: "23 schemas · 0 conflicts" },
          { v: "done", l: "POST /v1/charges", d: "imported · TC-S001 created" },
          { v: "done", l: "GET /v1/charges/{id}", d: "imported · TC-S002 created" },
          { v: "done", l: "POST /v1/charges/{id}/capture", d: "imported · TC-S003 created" },
          { v: "done", l: "POST /v1/charges/{id}/refund", d: "merged · 3 TCs preserved" },
          { v: "done", l: "GET /v1/customers", d: "imported · TC-S004 created" },
          { v: "run",  l: "POST /v1/customers", d: "AI inferring expected response…" },
          { v: "wait", l: "GET /v1/customers/{id}", d: "queued" },
          { v: "wait", l: "POST /v1/refunds", d: "queued" },
          { v: "wait", l: "GET /v1/refunds/{id}", d: "queued · merge" },
        ].map((x,i) => (
          <div key={i} className={"conf-row conf-row--" + x.v}>
            <span className="conf-row__icon">
              {x.v === "done" && <Icon name="check" size={11}/>}
              {x.v === "run" && <span className="dot running" style={{boxShadow:'none'}}/>}
              {x.v === "wait" && <span className="dot idle"/>}
            </span>
            <span className="mono conf-row__l">{x.l}</span>
            <span className="muted" style={{flex:1}}>{x.d}</span>
          </div>
        ))}
      </div>
    </div>
  </ImportShell>
);

Object.assign(window, { ImportStep1, ImportStep2, ImportStep3, ImportStep4, ImportStep5 });