/* ===========================================================================
   Azure Helper — Connect / app-registration flow (modal)
   =========================================================================== */
function ConnectFlow({ onClose, onConnected }) {
  const [step, setStep] = useState(0);          // 0 sign-in, 1 method, 2 consent, 3 done
  const [method, setMethod] = useState("delegated");
  const [signing, setSigning] = useState(false);
  const [consenting, setConsenting] = useState(false);
  const [error, setError] = useState("");
  const [connectedLabel, setConnectedLabel] = useState(AH.tenant.name || "your tenant");

  const scopes = [
    { s: "User.Read.All", d: "Read users & their profiles", risk: "read" },
    { s: "Group.Read.All", d: "Read groups & membership", risk: "read" },
    { s: "Directory.Read.All", d: "Read directory data & licenses", risk: "read" },
    { s: "Policy.Read.All", d: "Read Conditional Access policies", risk: "read" },
    { s: "AuditLog.Read.All", d: "Read sign-in activity", risk: "read" },
  ];

  useEffect(() => {
    let cancelled = false;

    async function bootstrapConnectionState() {
      if (!window.AHRuntime) {
        return;
      }

      try {
        const me = await window.AHRuntime.getCurrentUser();
        if (cancelled || !me?.user) {
          return;
        }

        const activeUser = me.user;
        if (activeUser.email) {
          AH.tenant.connectedAs = activeUser.email;
        }

        if (!activeUser.subscriptionActive) {
          return;
        }

        const status = await window.AHRuntime.getEntraStatus();
        if (cancelled) {
          return;
        }

        if (status?.linked) {
          try {
            await window.AHRuntime.applyTenantContext(activeUser);
          } catch {
            // Keep the modal usable even if tenant context fetch fails.
          }

          setConnectedLabel(AH?.tenant?.name || activeUser.email || "your tenant");
          setStep(3);
          if (typeof onConnected === "function") {
            onConnected(activeUser);
          }
          return;
        }

        setStep(1);
      } catch {
        // Not signed in yet, keep step 0.
      }
    }

    bootstrapConnectionState();
    return () => {
      cancelled = true;
    };
  }, [onConnected]);

  async function signIn() {
    setSigning(true);
    setError("");
    try {
      // Session-based sign-in already happened in AuthPaywall. Here we validate session exists.
      await window.AHRuntime.getCurrentUser();
      setStep(1);
    } catch (e) {
      setError(e.message || "You need to sign in first from the login gate.");
    } finally {
      setSigning(false);
    }
  }

  useEffect(() => {
    function onMessage(event) {
      if (!event || !event.data || event.data.type !== "AH_ENTRA_LINKED") {
        return;
      }

      if (!event.data.ok) {
        setConsenting(false);
        setError(event.data.error || "Entra delegated login failed");
        return;
      }

      (async () => {
        try {
          const status = await window.AHRuntime.getEntraStatus();
          if (!status?.linked) {
            throw new Error("Delegated link did not complete");
          }

          const me = await window.AHRuntime.getCurrentUser();
          if (me?.user?.email) {
            AH.tenant.connectedAs = me.user.email;
          }
          await window.AHRuntime.applyTenantContext(me?.user);
          const label = AH?.tenant?.name || me?.user?.email || "your tenant";
          setConnectedLabel(label);
          setStep(3);

          if (typeof onConnected === "function") {
            onConnected(me.user);
          }
        } catch (e) {
          setError(e.message || "Unable to finalize connection");
        } finally {
          setConsenting(false);
        }
      })();
    }

    window.addEventListener("message", onMessage);
    return () => window.removeEventListener("message", onMessage);
  }, [onConnected]);

  async function grantConsent() {
    setConsenting(true);
    setError("");

    try {
      if (method !== "delegated") {
        throw new Error("App registration mode setup is not automated in this modal yet. Use delegated mode or run provisioning script.");
      }

      const result = await window.AHRuntime.startEntraDelegatedLogin();
      if (!result?.authorizeUrl) {
        throw new Error("No authorize URL received");
      }

      window.open(result.authorizeUrl, "ahEntraLogin", "width=520,height=760");
    } catch (e) {
      setConsenting(false);
      setError(e.message || "Failed to start admin consent flow");
    }
  }

  const steps = ["Sign in", "Access method", "Permissions", "Done"];

  return (
    <div className="fade" style={{ position: "fixed", inset: 0, background: "rgba(3,8,7,.78)", backdropFilter: "blur(3px)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 70, padding: 24 }} onClick={onClose}>
      <div className="card" style={{ width: 560, maxWidth: "100%", background: "var(--surface)", padding: 0, maxHeight: "90vh", overflowY: "auto" }} onClick={e => e.stopPropagation()}>
        {/* header */}
        <div className="between" style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)" }}>
          <div className="row" style={{ gap: 10 }}>
            <div style={{ width: 28, height: 28, borderRadius: 7, background: "var(--surface-3)", border: "1px solid var(--border-2)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="plug" size={16} color="var(--primary)" />
            </div>
            <span className="mono" style={{ fontWeight: 700, fontSize: 14 }}>Connect a tenant</span>
          </div>
          <button onClick={onClose} className="btn btn-quiet btn-sm" style={{ padding: 7 }}><Icon name="x" size={14} /></button>
        </div>

        {/* stepper */}
        <div className="row" style={{ gap: 0, padding: "14px 20px", borderBottom: "1px solid var(--border)" }}>
          {steps.map((s, i) => (
            <React.Fragment key={i}>
              <div className="row" style={{ gap: 7 }}>
                <div style={{
                  width: 22, height: 22, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "var(--mono)", fontSize: 11, fontWeight: 700,
                  background: i < step ? "var(--primary)" : i === step ? "var(--surface-3)" : "var(--inset)",
                  color: i < step ? "#04221d" : i === step ? "var(--primary)" : "var(--text-faint)",
                  border: "1px solid " + (i <= step ? "var(--border-strong)" : "var(--border)")
                }}>{i < step ? <Icon name="check" size={12} color="#04221d" /> : i + 1}</div>
                <span className="mono" style={{ fontSize: 11.5, color: i <= step ? "var(--text)" : "var(--text-faint)" }}>{s}</span>
              </div>
              {i < steps.length - 1 && <div style={{ flex: 1, height: 1, background: i < step ? "var(--border-strong)" : "var(--border)", margin: "0 10px" }} />}
            </React.Fragment>
          ))}
        </div>

        <div style={{ padding: 22 }}>
          {/* step 0: sign in */}
          {step === 0 && (
            <div className="fade col" style={{ gap: 16, alignItems: "center", textAlign: "center", padding: "10px 0" }}>
              <div style={{ width: 56, height: 56, borderRadius: 12, background: "var(--surface-2)", border: "1px solid var(--border-2)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name="layers" size={28} color="var(--primary)" />
              </div>
              <div>
                <h3 className="h3" style={{ fontSize: 17 }}>Sign in with Microsoft</h3>
                <p className="dim" style={{ fontSize: 13.5, marginTop: 7, maxWidth: 380 }}>
                  We use OAuth — your password never touches the Helper. You'll be redirected to Microsoft to authenticate.
                </p>
              </div>
              <button className="btn btn-primary btn-lg" onClick={signIn} disabled={signing} style={{ minWidth: 240, justifyContent: "center" }}>
                {signing ? <><Icon name="refresh" size={15} color="#04221d" className="spin" /> Redirecting…</> : <><Icon name="user" size={15} color="#04221d" /> Sign in with Microsoft</>}
              </button>
              <span className="mono dim" style={{ fontSize: 11 }}>login.microsoftonline.com</span>
              {error && <div className="chip" style={{ marginTop: 8, color: "var(--rose)", borderColor: "rgba(244,117,127,.5)" }}>{error}</div>}
            </div>
          )}

          {/* step 1: method */}
          {step === 1 && (
            <div className="fade col" style={{ gap: 14 }}>
              <div>
                <h3 className="h3">How should the Helper act?</h3>
                <p className="dim" style={{ fontSize: 13, marginTop: 6 }}>Pick how the agent authenticates when it runs tasks.</p>
              </div>
              {[
                { k: "delegated", t: "As you (delegated, read-only)", d: "Reads with your sign-in, limited to what you can already see. Nothing is ever written. Best for hands-on learning.", icon: "user", tag: "recommended" },
                { k: "app", t: "Read-only app registration", d: "The Helper gets its own identity with read-only app permissions — for an always-on tenant dashboard. Still cannot write.", icon: "key", tag: "unattended" },
              ].map(o => (
                <button key={o.k} onClick={() => setMethod(o.k)} className="card" style={{
                  textAlign: "left", cursor: "pointer", display: "flex", gap: 13, alignItems: "flex-start",
                  borderColor: method === o.k ? "var(--border-strong)" : "var(--border)",
                  background: method === o.k ? "var(--surface-2)" : "var(--surface)"
                }}>
                  <div style={{ width: 36, height: 36, borderRadius: 8, flexShrink: 0, background: method === o.k ? "var(--primary-dim)" : "var(--inset)", border: "1px solid var(--border)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <Icon name={o.icon} size={18} color={method === o.k ? "var(--primary)" : "var(--text-dim)"} />
                  </div>
                  <div style={{ flex: 1 }}>
                    <div className="between">
                      <span className="mono" style={{ fontWeight: 700, fontSize: 14 }}>{o.t}</span>
                      <span className="chip cy">{o.tag}</span>
                    </div>
                    <p className="t2" style={{ fontSize: 13, marginTop: 6, lineHeight: 1.55 }}>{o.d}</p>
                  </div>
                </button>
              ))}
              <div className="row" style={{ justifyContent: "space-between", marginTop: 4 }}>
                <button className="btn btn-quiet btn-sm" onClick={() => setStep(0)}>Back</button>
                <button className="btn btn-primary" onClick={() => setStep(2)}>Continue <Icon name="arrow" size={13} color="#04221d" /></button>
              </div>
            </div>
          )}

          {/* step 2: consent */}
          {step === 2 && (
            <div className="fade col" style={{ gap: 14 }}>
              <div>
                <h3 className="h3">Review permissions</h3>
                <p className="dim" style={{ fontSize: 13, marginTop: 6 }}>
                  The Helper requests <b>read-only</b> Graph scopes — no write or delete permission is ever requested, so it physically cannot change your tenant. Revoke anytime.
                </p>
              </div>
              <div className="col" style={{ gap: 8 }}>
                {scopes.map((sc, i) => (
                  <div key={i} className="between card" style={{ padding: "11px 13px" }}>
                    <div className="row" style={{ gap: 11 }}>
                      <Icon name="shield" size={16} color={sc.risk === "write" ? "var(--gold)" : "var(--primary)"} />
                      <div>
                        <div className="mono" style={{ fontSize: 12.5, color: "var(--text)" }}>{sc.s}</div>
                        <div className="t2" style={{ fontSize: 12, marginTop: 2 }}>{sc.d}</div>
                      </div>
                    </div>
                    <RiskPill risk={sc.risk} />
                  </div>
                ))}
              </div>
              <div className="row" style={{ gap: 9, padding: "10px 12px", background: "var(--primary-dim)", border: "1px solid var(--border-2)", borderRadius: 6 }}>
                <Icon name="shield" size={15} color="var(--primary)" />
                <span className="t2" style={{ fontSize: 12.5 }}>Every scope is <b>.Read</b> only. There is no path for the Helper to create, update or delete — it teaches you to do that yourself.</span>
              </div>
              <div className="row" style={{ justifyContent: "space-between", marginTop: 4 }}>
                <button className="btn btn-quiet btn-sm" onClick={() => setStep(1)}>Back</button>
                <button className="btn btn-primary" onClick={grantConsent} disabled={consenting}>
                  {consenting ? <><Icon name="refresh" size={13} color="#04221d" className="spin" /> Waiting for consent…</> : <><Icon name="check" size={13} color="#04221d" /> Grant admin consent</>}
                </button>
              </div>
              {error && <div className="chip" style={{ marginTop: 8, color: "var(--rose)", borderColor: "rgba(244,117,127,.5)" }}>{error}</div>}
            </div>
          )}

          {/* step 3: done */}
          {step === 3 && (
            <div className="fade col" style={{ gap: 16, alignItems: "center", textAlign: "center", padding: "8px 0" }}>
              <div style={{ width: 56, height: 56, borderRadius: "50%", background: "var(--primary-dim)", border: "1px solid var(--border-strong)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name="check" size={28} color="var(--primary)" />
              </div>
              <div>
                <h3 className="h3" style={{ fontSize: 17 }}>Connected to {connectedLabel}</h3>
                <p className="dim" style={{ fontSize: 13.5, marginTop: 7, maxWidth: 400 }}>
                  The Helper is reading <span className="mono cy">{AH.tenant.domain}</span> {method === "app" ? "as a read-only app registration" : "with your delegated sign-in"} — <b>read-only</b>. Ask it how to do anything.
                </p>
              </div>
              <div className="code" style={{ width: "100%", textAlign: "left", fontSize: 12 }}>
                <span className="tok-cmd">Connect-AzureHelper</span> <span className="tok-flag">-Tenant</span> <span className="tok-str">"{AH.tenant.domain}"</span> <span className="tok-flag">-ReadOnly</span>{"\n"}
                <span style={{ color: "var(--primary)" }}>✓ Connected · 5 read scopes · 0 write scopes</span>
              </div>
              <button className="btn btn-primary btn-lg" onClick={onClose} style={{ minWidth: 200, justifyContent: "center" }}>
                <Icon name="bolt" size={15} color="#04221d" /> Start using the Helper
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ConnectFlow });