// ConnectGate.jsx — Wallet-not-connected entry state for the Client app.
//
// Posture (decided with the user, against the rejected OZ reference):
//   · Shell stays visible but LOCKED — SideNav + TopBar render dimmed; the
//     workspace is replaced by this connect prompt. Nothing is browsable.
//   · NO marketing hero, NO "Connect Wallet to Get Started", NO "For Internal
//     Use Only" pill, NO floating mock banner, NO equal-weight 4-KPI grid,
//     NO browsable facility list. Those are the OZ patterns the execs rejected.
//   · Identity-first voice (design.md §1): "Access is verified at connection",
//     subject is the system, not the reader. Sentence case. No hype.
//
// Two layouts, switchable via the `variant` prop (Tweak "Gate layout"):
//   · "centered" — one quiet centered identity card + a hairline status line.
//   · "split"    — editorial identity message (left) + wallet-picker panel (right).
//
// Both share <WalletPicker/> (the 4 wallets + the "Verifying OnchainID…" beat).

// ── Public protocol status — the only public figures shown (no facility list) ──
const GATE_STATUS = {
  tvl:        "$56.4M",
  facilities: 12,
  active:     10,
  status:     "Operational",
};

const GATE_WALLETS = [
  { name: "MetaMask",        icon: "wallet"   },
  { name: "Ledger",          icon: "lock"     },
  { name: "WalletConnect",   icon: "refresh"  },
  { name: "Coinbase Wallet", icon: "accounts" },
];

// ── A single wallet row ────────────────────────────────────────────────────
const WalletRow = ({ wallet, icon, onClick, disabled }) => (
  <button type="button" onClick={onClick} disabled={disabled} style={{
    all: "unset", cursor: disabled ? "default" : "pointer", boxSizing: "border-box",
    display: "flex", alignItems: "center", gap: 12, width: "100%",
    padding: "12px 14px", borderRadius: 8,
    border: "1px solid var(--border-strong)", background: "var(--surface)",
    opacity: disabled ? 0.5 : 1,
    transition: "border-color var(--motion-fast), background var(--motion-fast)",
  }}
  onMouseEnter={(e) => { if (disabled) return; e.currentTarget.style.borderColor = "var(--accent)"; e.currentTarget.style.background = "var(--blue-10)"; }}
  onMouseLeave={(e) => { if (disabled) return; e.currentTarget.style.borderColor = "var(--border-strong)"; e.currentTarget.style.background = "var(--surface)"; }}>
    <span style={{
      width: 28, height: 28, borderRadius: 6,
      background: "var(--bg-alt)", border: "1px solid var(--border)",
      display: "grid", placeItems: "center", flexShrink: 0, color: "var(--fg-muted)",
    }}><Icon name={icon} size={15} stroke={1.5}/></span>
    <span style={{ font: '500 13px/18px "Inter", sans-serif', color: "var(--fg)", flex: 1 }}>{wallet}</span>
    <Icon name="chevron" size={13} stroke={1.6} style={{ color: "var(--fg-faint)" }} />
  </button>
);

// ── The "Verifying OnchainID…" beat ────────────────────────────────────────
const VerifyingPanel = ({ wallet }) => (
  <div style={{
    padding: "26px 18px", borderRadius: 10,
    border: "1px solid var(--border)", background: "var(--bg-alt)",
    textAlign: "center",
  }}>
    <div style={{
      width: 38, height: 38, margin: "0 auto 14px", borderRadius: "50%",
      border: "1px solid var(--border-strong)", background: "var(--surface)",
      display: "grid", placeItems: "center", color: "var(--accent)",
    }}>
      <Icon name="fingerprint" size={19} stroke={1.5} />
    </div>
    <div style={{ display: "flex", gap: 6, justifyContent: "center", marginBottom: 12 }}>
      {[0,1,2].map((i) => (
        <span key={i} style={{
          width: 6, height: 6, borderRadius: 3, background: "var(--accent)",
          animation: `cgpulse 1.2s ease-in-out ${i * 0.2}s infinite`, display: "inline-block",
        }} />
      ))}
    </div>
    <div style={{ font: '500 13px/18px "Inter", sans-serif', color: "var(--fg)" }}>
      Verifying OnchainID…
    </div>
    <div style={{ font: '400 12px/16px "Inter", sans-serif', color: "var(--fg-subtle)", marginTop: 4 }}>
      Checking attached claims via {wallet}
    </div>
    <style>{`@keyframes cgpulse{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}`}</style>
  </div>
);

// ── Wallet picker — picker → verifying → onConnect ─────────────────────────
const WalletPicker = ({ onConnect, compact }) => {
  const [connecting, setConnecting] = React.useState(null);
  const connect = (wallet) => {
    setConnecting(wallet);
    setTimeout(() => { setConnecting(null); onConnect && onConnect(); }, 1400);
  };
  if (connecting) return <VerifyingPanel wallet={connecting} />;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <div style={{
        font: '500 11px/16px "Inter", sans-serif', letterSpacing: "0.06em",
        textTransform: "uppercase", color: "var(--fg-subtle)", marginBottom: 2,
      }}>Select wallet</div>
      {GATE_WALLETS.map((w) => (
        <WalletRow key={w.name} wallet={w.name} icon={w.icon} onClick={() => connect(w.name)} />
      ))}
    </div>
  );
};

// ── Protocol status — hairline strip, public figures only (no facility list) ─
const StatusLine = () => (
  <div className="gate-statusline" style={{
    display: "flex", alignItems: "stretch", flexWrap: "wrap",
    border: "1px solid var(--border)", borderRadius: 12, background: "var(--surface)",
    overflow: "hidden",
  }}>
    <GateStat label="Total value locked" value={GATE_STATUS.tvl}
              sub={`Across ${GATE_STATUS.facilities} facilities`} />
    <GateStat label="Facilities" value={String(GATE_STATUS.facilities)}
              sub={`${GATE_STATUS.active} active · 2 paused`} />
    <GateStat label="Protocol status" value={GATE_STATUS.status}
              sub="All systems nominal" valueColor="var(--success)" last />
  </div>
);

const GateStat = ({ label, value, sub, valueColor, last }) => (
  <div style={{
    flex: "1 1 160px", padding: "16px 20px",
    borderRight: last ? "none" : "1px solid var(--border)",
  }} className="gate-stat">
    <div className="stat-label" style={{
      font: '500 11px/16px "Inter", sans-serif', letterSpacing: "0.04em",
      textTransform: "uppercase", color: "var(--fg-subtle)",
    }}>{label}</div>
    <div className="tnum" style={{
      font: `600 22px/28px "Inter", sans-serif`, color: valueColor || "var(--fg)",
      marginTop: 5, letterSpacing: "-0.01em",
    }}>{value}</div>
    <div style={{ font: '400 12px/16px "Inter", sans-serif', color: "var(--fg-subtle)", marginTop: 3 }}>{sub}</div>
  </div>
);

// ── Identity fine print (shared editorial line) ────────────────────────────
const IdentityNote = ({ style }) => (
  <p style={{
    margin: 0, font: 'italic 300 13px/21px "Literata", serif',
    color: "var(--fg-faint)", maxWidth: 460, ...style,
  }}>
    Access is verified at connection. Your OnchainID and the claims attached to it
    determine which credit facilities you may enter — connecting does not grant access on its own.
  </p>
);

// ─────────────────────────────────────────────────────────────────────────
// Variant A — Centered identity card
// ─────────────────────────────────────────────────────────────────────────
const GateCentered = ({ onConnect }) => (
  <div style={{
    display: "flex", flexDirection: "column", alignItems: "center",
    gap: 20, width: "100%", maxWidth: 460, margin: "0 auto",
  }}>
    <section className="card" style={{ padding: "32px 30px", width: "100%" }}>
      <div style={{
        width: 44, height: 44, borderRadius: 10, margin: "0 0 18px",
        background: "var(--blue-10)", display: "grid", placeItems: "center", color: "var(--accent)",
      }}>
        <Icon name="lock" size={20} stroke={1.5} />
      </div>
      <Eyebrow>Access</Eyebrow>
      <h1 style={{
        margin: "7px 0 10px", font: '700 28px/32px "Figtree", sans-serif',
        letterSpacing: "-0.015em", color: "var(--fg)",
      }}>Connect to continue</h1>
      <p style={{
        margin: "0 0 22px", font: '400 14px/22px "Inter", sans-serif',
        color: "var(--fg-subtle)",
      }}>
        Connect a wallet to load your margin accounts, net position, and borrowing
        capacity. The portfolio remains private until a wallet is linked.
      </p>
      <WalletPicker onConnect={onConnect} />
      <div style={{
        marginTop: 20, paddingTop: 18, borderTop: "1px solid var(--border)",
      }}>
        <IdentityNote style={{ maxWidth: "none" }} />
      </div>
    </section>
    <StatusLine />
  </div>
);

// ─────────────────────────────────────────────────────────────────────────
// Variant B — Split identity-led
// ─────────────────────────────────────────────────────────────────────────
const GateSplit = ({ onConnect }) => (
  <div className="gate-split" style={{
    display: "grid", gridTemplateColumns: "minmax(0,1fr) 340px", gap: 36,
    alignItems: "start", width: "100%", maxWidth: 920, margin: "0 auto",
  }}>
    {/* Left — editorial message + status */}
    <div style={{ paddingTop: 4 }}>
      <Eyebrow>Permissioned access</Eyebrow>
      <h1 style={{
        margin: "8px 0 14px", font: '700 36px/40px "Figtree", sans-serif',
        letterSpacing: "-0.018em", color: "var(--fg)", maxWidth: 460,
      }}>Your portfolio is private until a wallet is connected.</h1>
      <p style={{
        margin: "0 0 18px", font: '400 15px/24px "Inter", sans-serif',
        color: "var(--fg-subtle)", maxWidth: 460,
      }}>
        Ascend is a permissioned, identity-aware market. Margin accounts, positions,
        and borrowing capacity load only once a wallet is linked and its OnchainID is verified.
      </p>
      <IdentityNote style={{ marginBottom: 28 }} />
      <StatusLine />
    </div>

    {/* Right — wallet picker panel */}
    <section className="card gate-picker-panel" style={{ padding: "26px 24px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
        <span style={{
          width: 34, height: 34, borderRadius: 8,
          background: "var(--blue-10)", display: "grid", placeItems: "center", color: "var(--accent)",
        }}><Icon name="wallet" size={17} stroke={1.5} /></span>
        <div style={{ font: '700 16px/20px "Figtree", sans-serif', color: "var(--fg)" }}>
          Connect a wallet
        </div>
      </div>
      <WalletPicker onConnect={onConnect} />
    </section>
  </div>
);

// ── Top-level gate ─────────────────────────────────────────────────────────
const ConnectGate = ({ variant = "centered", onConnect }) => (
  <div className="gate-wrap">
    {variant === "split"
      ? <GateSplit onConnect={onConnect} />
      : <GateCentered onConnect={onConnect} />}
  </div>
);

window.ConnectGate = ConnectGate;