// Onboarding screens — all use EDScreen / EDHeader / EDBody / EDFooter
// for locked-in spacing and chrome consistency.

function ScrWelcome({ onNext, onEmail }) {
  return (
    <EDScreen bg={ED_FOREST_900} dark>
      {/* decorative glows */}
      <div style={{ position: "absolute", top: -120, right: -120, width: 360, height: 360, borderRadius: "50%",
        background: `radial-gradient(circle, ${ED_BILL}33, transparent 70%)`, pointerEvents: "none" }}/>
      <div style={{ position: "absolute", bottom: 240, left: -100, width: 280, height: 280, borderRadius: "50%",
        background: `radial-gradient(circle, ${ED_YELLOW}1a, transparent 70%)`, pointerEvents: "none" }}/>

      <EDHeader dark paddingTop={ED_SAFE_TOP} paddingBottom={0} showBackRow={false}/>

      <EDBody style={{ display: "flex", flexDirection: "column", justifyContent: "flex-end", paddingBottom: 24 }}>
        <div style={{ marginBottom: 28 }}>
          <EDLogo tone="cream" height={28}/>
        </div>
        <h1 style={{ fontSize: 44, fontWeight: 800, lineHeight: 1.04, letterSpacing: "-0.03em", margin: 0, color: "#fff" }}>
          Pull the right<br/>card. Every<br/>single time.
        </h1>
        <p style={{ marginTop: 18, fontSize: 16, lineHeight: 1.5, color: "rgba(238,230,227,0.78)", maxWidth: 320 }}>
          We watch your spending, learn your wallet, and tell you exactly which card to swipe — before you pay.
        </p>
      </EDBody>

      <EDFooter dark>
        <EDPrimaryButton onClick={onNext} variant="apple">
          <svg width="15" height="18" viewBox="0 0 384 512" fill="currentColor" aria-hidden="true" style={{ display: "block" }}><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/></svg>
          Continue with Apple
        </EDPrimaryButton>
        <EDSecondaryButton onClick={onEmail || onNext} dark>Use email instead</EDSecondaryButton>
        <div style={{ textAlign: "center", fontSize: 12, color: "rgba(238,230,227,0.5)", marginTop: 8, lineHeight: 1.5 }}>
          By continuing you agree to our <a href="#" onClick={(e) => { e.preventDefault(); window.__edOpenLegal && window.__edOpenLegal(); }} style={{ color: "rgba(238,230,227,0.85)", textDecoration: "underline" }}>Terms</a>. We never store your bank login.
        </div>
      </EDFooter>
    </EDScreen>
  );
}

function ScrChoosePath({ onPlaid, onManual }) {
  return (
    <EDScreen>
      <EDHeader
        eyebrow={<EDStep n={1} total={3}/>}
        title={<>How should we<br/>find your cards?</>}
        subtitle="Connect your bank for the full picture, or add cards by hand. You can always switch later."
        showBackRow={false}
      />
      <EDBody>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <button onClick={onPlaid} style={{
            textAlign: "left", padding: 18, background: "#fff", borderRadius: ED_R_SURFACE,
            border: `2px solid ${ED_FOREST}`, cursor: "pointer", position: "relative",
            boxShadow: "0 4px 14px rgba(6,57,50,0.06)", fontFamily: "inherit",
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
              <img src="/assets/icons/bank.png" width="36" height="36" alt=""/>
              <div style={{ fontSize: 17, fontWeight: 700, color: ED_FOREST, flex: 1, whiteSpace: "nowrap" }}>Connect a bank</div>
              <EDPill tone="accent">Recommended</EDPill>
            </div>
            <div style={{ fontSize: 14, color: ED_FG2, lineHeight: 1.5 }}>
              We auto-detect every card, score every past purchase, and show you what you've left on the table.
            </div>
          </button>

          <button onClick={onManual} style={{
            textAlign: "left", padding: 18, background: "#fff", borderRadius: ED_R_SURFACE,
            border: `1px solid ${ED_LINE}`, cursor: "pointer", fontFamily: "inherit",
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
              <img src="/assets/icons/card-stack.png" width="36" height="36" alt=""/>
              <div style={{ fontSize: 17, fontWeight: 700, color: ED_FOREST }}>Add cards manually</div>
            </div>
            <div style={{ fontSize: 14, color: ED_FG2, lineHeight: 1.5 }}>
              Pick from our database. You'll get "which card" recommendations but not retrospective insights.
            </div>
          </button>
        </div>

        <div style={{
          marginTop: 24,
          background: "rgba(6,57,50,0.04)", borderRadius: ED_R_BTN, padding: 14,
          display: "flex", gap: 10, alignItems: "flex-start",
        }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0, marginTop: 1 }}>
            <path d="M12 2L4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6l-8-4z" stroke={ED_FOREST} strokeWidth="1.8" fill="rgba(133,187,101,0.2)"/>
          </svg>
          <div style={{ fontSize: 13, color: ED_FG2, lineHeight: 1.5 }}>
            <b style={{ color: ED_FOREST }}>Read-only by Plaid.</b> We never see your login. Disconnect any time.
          </div>
        </div>
      </EDBody>
      <EDFooter><div style={{ height: 0 }}/></EDFooter>
    </EDScreen>
  );
}

function ScrPlaidLink({ onNext }) {
  const [stage, setStage] = React.useState(0);
  const stages = [
    "Connecting to Chase",
    "Verifying access",
    "Fetching accounts",
    "Reading 90 days of transactions",
    "Identifying your cards",
  ];
  React.useEffect(() => {
    if (stage >= stages.length) { setTimeout(onNext, 400); return; }
    const id = setTimeout(() => setStage(s => s + 1), 700);
    return () => clearTimeout(id);
  }, [stage]);

  return (
    <EDScreen bg="#fff">
      <EDHeader
        eyebrow={<EDStep n={2} total={3}/>}
        showBackRow={false}
      />
      <EDBody>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
          <div style={{ width: 56, height: 56, borderRadius: 14, background: "#117ACA", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: 22, fontWeight: 800 }}>C</div>
          <div>
            <div style={{ fontSize: 20, fontWeight: 800, color: ED_FOREST, letterSpacing: "-0.01em" }}>Chase</div>
            <div style={{ fontSize: 13, color: ED_FG3 }}>via Plaid · Bank-grade encryption</div>
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {stages.map((label, i) => (
            <div key={i} style={{
              display: "flex", alignItems: "center", gap: 14,
              opacity: i > stage ? 0.3 : 1, transition: "opacity 220ms",
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: "50%",
                background: i < stage ? ED_BILL : i === stage ? "rgba(133,187,101,0.18)" : "transparent",
                border: i >= stage ? `2px solid ${i === stage ? ED_BILL : "rgba(6,57,50,0.15)"}` : "none",
                display: "flex", alignItems: "center", justifyContent: "center",
                transition: "all 220ms",
              }}>
                {i < stage && <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 7l3.5 3.5L12 3.5" stroke="#fff" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                {i === stage && <div style={{ width: 10, height: 10, borderRadius: "50%", background: ED_BILL, animation: "edPulse 900ms infinite" }}/>}
              </div>
              <div style={{ fontSize: 15, fontWeight: i === stage ? 700 : 500, color: i <= stage ? ED_FOREST : ED_FG3 }}>{label}</div>
            </div>
          ))}
        </div>
      </EDBody>
      <EDFooter>
        <div style={{ fontSize: 12, color: ED_FG3, textAlign: "center", lineHeight: 1.5 }}>
          Plaid is the connection layer used by Venmo, Robinhood, and 8,000+ apps.
        </div>
      </EDFooter>
    </EDScreen>
  );
}

function ScrCardsFound({ onNext }) {
  const [confirmed, setConfirmed] = React.useState(new Set(ED_CARDS.map(c => c.id)));
  const toggle = (id) => {
    const next = new Set(confirmed);
    next.has(id) ? next.delete(id) : next.add(id);
    setConfirmed(next);
  };
  return (
    <EDScreen>
      <EDHeader
        eyebrow={<EDStep n={3} total={3}/>}
        title={<>We found <span style={{ color: ED_BILL_700 }}>{ED_CARDS.length} cards</span><br/>in your accounts.</>}
        subtitle="Confirm the ones you actively use. We'll learn your wallet from here."
        showBackRow={false}
      />
      <EDBody noGutter>
        <div style={{ padding: "0 16px", display: "flex", flexDirection: "column", gap: 10 }}>
          {ED_CARDS.map(c => {
            const on = confirmed.has(c.id);
            return (
              <button key={c.id} onClick={() => toggle(c.id)} style={{
                background: "#fff", border: on ? `2px solid ${ED_FOREST}` : `1px solid ${ED_LINE}`,
                borderRadius: ED_R_BTN, padding: 12, display: "flex", alignItems: "center", gap: 12,
                cursor: "pointer", textAlign: "left", fontFamily: "inherit",
                transition: "all 180ms",
              }}>
                <EDCardChip card={c} size={52}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: ED_FOREST, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.issuer} {c.name}</div>
                  <div style={{ fontSize: 12, color: ED_FG3, fontFeatureSettings: '"tnum"' }}>•••• {c.last4}</div>
                  <div style={{ fontSize: 11, color: ED_BILL_700, fontWeight: 600, marginTop: 2, cursor: "pointer" }}
                       onClick={(e) => { e.stopPropagation(); alert("Card-name picker — choose the correct product (e.g. Sapphire Reserve vs Preferred)."); }}>
                    This isn't right ›
                  </div>
                </div>
                <div style={{
                  width: 24, height: 24, borderRadius: "50%",
                  background: on ? ED_FOREST : "transparent",
                  border: on ? "none" : `2px solid rgba(6,57,50,0.2)`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  flexShrink: 0,
                }}>
                  {on && <svg width="12" height="12" viewBox="0 0 14 14"><path d="M2 7l3.5 3.5L12 3.5" stroke="#fff" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                </div>
              </button>
            );
          })}
        </div>
      </EDBody>
      <EDFooter>
        <EDPrimaryButton onClick={onNext} disabled={confirmed.size === 0}>
          {confirmed.size === 0 ? "Pick at least one card" : `Confirm ${confirmed.size} card${confirmed.size === 1 ? "" : "s"}`}
        </EDPrimaryButton>
      </EDFooter>
    </EDScreen>
  );
}

function ScrReady({ onNext }) {
  return (
    <EDScreen bg={ED_PAPER}>
      <EDHeader
        eyebrow="Welcome aboard"
        title={<>Here's what we<br/>found right away.</>}
        showBackRow={false}
      />
      <EDBody>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{
            background: ED_FOREST, color: ED_CREAM, borderRadius: ED_R_HERO, padding: 20,
            border: "none",
          }}>
            <EDEyebrow color={ED_BILL} style={{ marginBottom: 8 }}>You left on the table</EDEyebrow>
            <div style={{ fontSize: 52, fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1, color: "#fff" }}>
              <EDCounter value={312.40} duration={1400}/>
            </div>
            <div style={{ fontSize: 14, color: ED_ON_DARK_2, marginTop: 8 }}>across the last 90 days. We'll show you exactly where.</div>
          </div>

          <EDSurface>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: "rgba(133,187,101,0.18)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                <img src="/assets/icons/discount.png" width="32" height="32" alt=""/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: ED_FOREST }}>4 statement credits unused</div>
                <div style={{ fontSize: 13, color: ED_FG3 }}>$40 expires in the next 30 days</div>
              </div>
            </div>
          </EDSurface>

          <EDSurface>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: "rgba(242,220,59,0.4)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                <img src="/assets/icons/dollar-coin.png" width="32" height="32" alt=""/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: ED_FOREST }}>Tracking 1 welcome bonus</div>
                <div style={{ fontSize: 13, color: ED_FG3 }}>$1,840 / $4,000 spend by Aug 12</div>
              </div>
            </div>
          </EDSurface>
        </div>
      </EDBody>
      <EDFooter>
        <EDPrimaryButton onClick={onNext}>Show me my dashboard</EDPrimaryButton>
      </EDFooter>
    </EDScreen>
  );
}

Object.assign(window, { ScrWelcome, ScrChoosePath, ScrPlaidLink, ScrCardsFound, ScrReady });