// Gmail connection section

const { useState, useEffect, useRef } = React;

function ConnectionSection({ connected, setConnected, startDate, setStartDate, endDate, setEndDate, scanState, foundCount, runScan }) {
  return (
    <section className="section" data-accent="1" data-screen-label="01 Connection">
      <div className="section-head">
        <div className="titles">
          <div className="eyebrow"><span className="dotnum"></span>Step 01 · Source</div>
          <h2>Inbox source</h2>
          <div className="desc">Procura reads SAP Ariba approval emails from a connected mailbox. We never reply to or modify the original message.</div>
        </div>
        <div className="actions">
          <span className="env-pill">
            <span className="dot" style={{ background: connected ? "var(--green)" : "var(--text-4)", boxShadow: connected ? "0 0 0 3px var(--green-soft)" : "none" }}></span>
            {connected ? "OAuth active" : "Not connected"}
          </span>
        </div>
      </div>

      <div className="section-body">
        <div className="conn-grid">
          <div className="conn-left">
            {!connected ? (
              <React.Fragment>
                <label className="field-label">Mailbox</label>
                <div className="account-card" style={{ borderStyle: "dashed" }}>
                  <div className="mailicon"><Icon.mail size={18} /></div>
                  <div className="meta">
                    <div className="who" style={{ color: "var(--text-2)" }}>No mailbox connected</div>
                    <div className="sub">Read-only scope · <span className="mono">gmail.readonly</span></div>
                  </div>
                  <button className="btn btn-primary" onClick={() => setConnected(true)}>
                    <Icon.mail size={13} /> Connect Gmail
                  </button>
                </div>
                <div className="helper">
                  Procura requests <span className="mono">gmail.readonly</span> only. We can read approval emails and their attachments — we cannot send, reply, or modify anything.
                </div>
              </React.Fragment>
            ) : (
              <React.Fragment>
                <label className="field-label">Connected mailbox</label>
                <div className="account-card">
                  <div className="mailicon" style={{ background: "var(--green-soft)", borderColor: "oklch(0.85 0.07 150)", color: "var(--green)" }}>
                    <Icon.mail size={18} />
                  </div>
                  <div className="meta">
                    <div className="who">
                      <span className="status-dot"></span>
                      <span>Connected: <span className="mono">approver@company.com</span></span>
                    </div>
                    <div className="sub">Scope: <span className="mono">gmail.readonly</span> · Last token refresh 2 min ago</div>
                  </div>
                  <button className="btn btn-sm" onClick={() => setConnected(false)}>Disconnect</button>
                </div>

                <div className="date-row">
                  <div>
                    <label className="field-label">Scan from</label>
                    <div style={{ position: "relative" }}>
                      <input className="input" type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} style={{ paddingRight: 32 }} />
                    </div>
                  </div>
                  <div>
                    <label className="field-label">Scan to</label>
                    <input className="input" type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} style={{ paddingRight: 32 }} />
                  </div>
                </div>
                <div className="helper">
                  Filter: <span className="mono">from:noreply@ansmtp.ariba.com subject:"approval request"</span>
                </div>
              </React.Fragment>
            )}
          </div>

          <div className="conn-right">
            <label className="field-label">Inbox scan</label>
            <div className="scan-panel">
              <div className={"scan-result " + (scanState === "done" ? "has-result" : "")}>
                {scanState === "idle" && (
                  <React.Fragment>
                    <Icon.search size={16} />
                    <div>Run a scan to find approval emails in this window.</div>
                  </React.Fragment>
                )}
                {scanState === "scanning" && (
                  <React.Fragment>
                    <div className="spinner"></div>
                    <div>
                      <div>Scanning mailbox…</div>
                      <div className="mono" style={{ fontSize: 11.5, color: "var(--text-3)", marginTop: 2 }}>Querying threads · downloading attachments</div>
                    </div>
                  </React.Fragment>
                )}
                {scanState === "done" && (
                  <React.Fragment>
                    <div className="count">{foundCount}</div>
                    <div>
                      <div style={{ fontWeight: 500 }}>Ariba approval emails found</div>
                      <div style={{ fontSize: 12, color: "var(--text-3)" }}>{startDate} → {endDate}  ·  {foundCount} attachments queued</div>
                    </div>
                  </React.Fragment>
                )}
              </div>

              <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
                <button
                  className="btn btn-primary"
                  onClick={runScan}
                  disabled={!connected || scanState === "scanning"}
                >
                  {scanState === "scanning" ? <React.Fragment><div className="spinner" style={{ borderTopColor: "var(--bg)", borderColor: "rgba(255,255,255,0.3)", borderTopColor: "var(--bg)" }}></div> Scanning…</React.Fragment> : <React.Fragment><Icon.search size={13} /> Scan inbox</React.Fragment>}
                </button>
                <button className="btn" disabled={!connected}>
                  <Icon.filter size={13} /> Filters
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ConnectionSection });