/* global React, ReactDOM */
/* Vault Control — app shell. */
const { Gate, Sidebar, TopBar } = window;
const APPVC = window.VC;

// Plain-language subtitles. Vocabulary is fixed across the app:
// Strategy → the Asset it trades → the Basket it belongs to → its allocation inside that basket
// → the Broker account (API) that executes it → how much of that account goes to each basket.
const TITLES = {
  baskets: ["Basket Studio", "Build baskets, set each strategy's allocation and leverage, and arm/disarm execution — all in one place."],
  environments: ["Broker Accounts", "Your broker accounts — the API keys that place trades — and how much of each account goes to each basket."],
  strategies: ["Strategies", "Every strategy: the asset it trades, the basket it belongs to, its health and full record."],
  analytics: ["Analytics", "Compare and analyze strategies — equity curves, monthly P&L, head-to-head metrics and correlation."],
  monitor: ["Monitor", "Health scores, lifecycle status, recommendations and the full audit trail across the strategy book."],
  trades: ["Trade Log", "Open positions, live positions, recent orders and every closed trade."],
};

// Official Hyperliquid blob (brand SVG: Hyperliquid_Blob_{Dark,Green,Light}).
// Fill follows --hl-blob (dark #011916 on light surfaces / green #97fce4 on dark
// theme); tone="ondark" forces the green for surfaces that are dark in BOTH themes
// (selected account-type buttons, sidebar).
function HLLogo({ size = 24, tone }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 200 200"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      style={{ borderRadius: 4, flexShrink: 0 }}
    >
      <path d="M175.11589,99.27891c0,49.46366-30.3687,65.33789-46.47302,51.30413-13.11357-11.5031-17.02471-35.88989-36.81018-38.42055-25.07698-2.99085-27.37764,30.36839-43.94216,30.36839-19.3254,0-23.00642-27.83773-23.00642-42.33179,0-14.72405,4.14115-34.73961,20.47565-34.73961,19.09528,0,20.24566,28.75802,44.17226,27.14754,23.69661-1.61047,24.1567-31.51877,39.80103-44.17224,13.57335-11.27313,45.78283.69019,45.78283,50.84413Z" fill={tone === "ondark" ? "var(--hl-blob-ondark)" : "var(--hl-blob)"} />
    </svg>
  );
}

// Every Coinbase broker value the DB can hold. brokerTag() used to compare against
// the bare string "coinbase" and so rendered a coinbase_deribit account as "HL
// Personal" — the logo was right and the label was wrong. Both read this now.
const COINBASE_BROKERS = ["coinbase", "coinbase_perps", "coinbase_deribit"];
const isCoinbaseBroker = (b) => COINBASE_BROKERS.includes(String(b || "").toLowerCase());

function BrokerMark({ broker, size = 22, tone = "light" }) {
  const isCoinbase = isCoinbaseBroker(broker);
  if (!isCoinbase) return <HLLogo size={size} tone={tone === "dark" ? "ondark" : undefined} />;
  return <CoinbaseLogo size={size} />;
}

// Coinbase consumer wordmark (blue). Rendered at small sizes inside broker tags.
function CoinbaseLogo({ size = 22 }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 1527 1551"
      xmlns="http://www.w3.org/2000/svg"
      style={{ flexShrink: 0, display: "block" }}
    >
      <title>Coinbase</title>
      <defs>
        <clipPath clipPathUnits="userSpaceOnUse" id="cp-cb">
          <path d="m0-600.49h12041.16v2151.49h-12041.16z"/>
        </clipPath>
      </defs>
      <style>{`.s0 { fill: #0052ff }`}</style>
      <g clipPath="url(#cp-cb)">
        <path className="s0" d="m350.4 777.1c0 259.8 176.7 453.3 428.7 453.3 182.5 0 327.4-115.5 379.5-283h365.1c-66.7 361-367.9 603.6-744.5 603.6-446 0-779.2-329.2-779.2-773.9 0-444.8 341.8-776.9 779.2-776.9 385.2 0 680.6 242.6 747.3 600.6h-367.9c-55-167.5-199.8-280.1-382.3-280.1-252 0-425.8 193.5-425.9 456.4z"/>
      </g>
    </svg>
  );
}

function DeploymentEnvironment({ vault }) {
  const [busy, setBusy] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [msg, setMsg] = React.useState(null);
  const [adding, setAdding] = React.useState(false);
  const [envs, setEnvs] = React.useState([]);
  const [studioBaskets, setStudioBaskets] = React.useState([]);
  // inline "edit which baskets this account funds" — writes deployment_environment_baskets only
  // (env_update_baskets), no credentials. Separate state from the Add-account form.
  const [editSlug, setEditSlug] = React.useState(null);
  const [editBaskets, setEditBaskets] = React.useState([]);

  const blank = {
    slug: "",
    display_name: "",
    broker_mode: "vault",
    status: "active",
    api_key: "",
    api_secret: "",
    portfolio_uuid: "",
    wallet_address: "",
    vault_address: "",
    notes: "",
    // HIP-3 is the builder perp dex that lists the EQUITY perps (xyz:NVDA, xyz:TSLA).
    // It is NOT a property of "personal account" — a personal wallet trading crypto
    // perps (BNB, HYPE, SOL) must have this OFF. Default off: turning it on makes the
    // bridge read equity from the builder dex's own clearinghouse and ignore the
    // standard-perps balance entirely (execution/brokers/hyperliquid.py get_account),
    // so a crypto account with this on reads 0 equity and every order is blocked
    // "non-positive equity". Only the US-equity account should set it.
    hip3: false,
    baskets: [{ basket_ref: "", alloc_pct: 50 }],
  };
  const [form, setForm] = React.useState(blank);

  const accountTypes = {
    vault: { label: "Hyperliquid Vault", profile: "hyperliquid_vault", broker: "hyperliquid" },
    personal: { label: "Hyperliquid Personal Account", profile: "hyperliquid_personal", broker: "hyperliquid" },
    coinbase: { label: "Coinbase Perpetuals", profile: "coinbase_deribit", broker: "coinbase_deribit" },
  };
  const selectedType = accountTypes[form.broker_mode] || accountTypes.vault;
  // A vault never trades the builder dex, so HIP-3 is only ever offered on personal
  // accounts — and only honoured there, so a stale flag can't survive a mode switch.
  const hip3Available = form.broker_mode === "personal";
  const hip3On = hip3Available && !!form.hip3;
  const inputStyle = { padding: 10, border: "1px solid var(--line)", borderRadius: 8, background: "var(--paper)", color: "var(--ink)", width: "100%", boxSizing: "border-box" };
  const labelStyle = { display: "flex", flexDirection: "column", gap: 6 };
  const smallCaps = { fontSize: 11, textTransform: "uppercase", letterSpacing: ".08em", color: "var(--muted)" };

  // Basket allocation offers ONLY the baskets the admin composed in Basket Studio
  // (showcase/builder baskets — the single source of truth). The legacy vault-plan
  // library (zhedgedbac_index_strategies: B1 Crypto, B2 Metals, …) and raw deployment
  // basket_codes are deliberately NOT listed — they duplicated every basket under a
  // second name and are not admin-managed. Compose baskets in Basket Studio.
  const basketOptions = React.useMemo(() => {
    const out = [];
    const seen = {};
    function push(ref, name, showcase = false) {
      const r = String(ref || "").trim();
      if (!r || seen[r]) return;
      seen[r] = true;
      out.push({ ref: r, name: String(name || r), showcase });
    }
    // From Basket Studio loaded baskets (showcase)
    studioBaskets.filter((b) => b.status !== "archived").forEach((b) => push(b.name, "★ " + b.name, true));
    // keep any ref an in-flight form row already selected (so an open edit never blanks)
    (form && form.baskets ? form.baskets : []).forEach((b) => push(b.basket_ref, b.basket_ref, false));

    return out;
  }, [vault, studioBaskets, form]);

  function setField(key, value) { setForm((cur) => ({ ...cur, [key]: value })); }
  function slugify(s) {
    return String(s || "").trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 64);
  }
  function openAdd() {
    const seed = selectedType.profile + "-" + (envs.length + 1);
    setForm({ ...blank, slug: seed, display_name: selectedType.label + " " + (envs.length + 1), baskets: [{ basket_ref: basketOptions[0]?.ref || "", alloc_pct: 50 }] });
    setAdding(true);
    setMsg(null);
  }
  function loadEnvs() {
    setLoading(true);
    return APPVC.api3("list_environments").then((r) => {
      setLoading(false);
      if (r.status === 200 && r.body.ok) {
        const list = r.body.environments || [];
        // Name every venue from its own display_name, so a new broker labels itself.
        if (window.registerVenueLabels) window.registerVenueLabels(list);
        setEnvs(list); return;
      }
      setMsg({ t: "Error " + r.status + ": " + (r.body.error || "could not load environments"), err: true });
    }).catch((e) => { setLoading(false); setMsg({ t: "Network error: " + e.message, err: true }); });
  }
  // Load basket studio baskets for the basket selector
  function loadStudioBaskets() {
    APPVC.api2("list_baskets").then((r) => {
      if (r.status === 200 && r.body.ok) setStudioBaskets(r.body.baskets || []);
    }).catch(() => { });
  }
  React.useEffect(() => { loadEnvs(); loadStudioBaskets(); }, []);

  function updateBasket(i, key, value) {
    setForm((cur) => ({ ...cur, baskets: cur.baskets.map((b, idx) => idx === i ? { ...b, [key]: value } : b) }));
  }
  function addBasket() {
    const used = {};
    form.baskets.forEach((b) => { used[b.basket_ref] = true; });
    const next = basketOptions.find((b) => !used[b.ref]);
    setForm((cur) => ({ ...cur, baskets: cur.baskets.concat({ basket_ref: next?.ref || "", alloc_pct: 0 }) }));
  }
  function removeBasket(i) {
    setForm((cur) => ({ ...cur, baskets: cur.baskets.filter((_, idx) => idx !== i) }));
  }

  // ---- inline basket-allocation editor for a saved account ----
  function startEditBaskets(env) {
    setEditSlug(env.slug);
    setEditBaskets((env.baskets || []).map((b) => ({ basket_ref: b.basket_ref, alloc_pct: Number(b.alloc_pct) })));
    setMsg(null);
  }
  function setEB(i, key, value) { setEditBaskets((cur) => cur.map((b, idx) => idx === i ? { ...b, [key]: value } : b)); }
  function addEB() {
    const used = {}; editBaskets.forEach((b) => { used[b.basket_ref] = true; });
    const next = basketOptions.find((b) => !used[b.ref]);
    setEditBaskets((cur) => cur.concat({ basket_ref: next?.ref || "", alloc_pct: 0 }));
  }
  function delEB(i) { setEditBaskets((cur) => cur.filter((_, idx) => idx !== i)); }
  const editTotal = editBaskets.reduce((s, b) => s + (Number(b.alloc_pct) || 0), 0);
  function saveEB() {
    const clean = editBaskets
      .map((b, idx) => ({ basket_ref: String(b.basket_ref || "").trim(), alloc_pct: Number(b.alloc_pct), sort_order: idx, enabled: true }))
      .filter((b) => b.basket_ref && Number.isFinite(b.alloc_pct));
    const refs = clean.map((b) => b.basket_ref);
    if (new Set(refs).size !== refs.length) { setMsg({ t: "Each basket can appear only once", err: true }); return; }
    if (editTotal > 150.01) { setMsg({ t: "Total allocation is " + editTotal.toFixed(1) + "% — must be ≤ 150%", err: true }); return; }
    setBusy(true); setMsg({ t: "Saving basket allocation…", err: false });
    APPVC.api3("update_baskets", { slug: editSlug, baskets: clean }).then((r) => {
      setBusy(false);
      if (r.status === 200 && r.body.ok) { setEditSlug(null); setMsg({ t: "✓ basket allocation saved", err: false }); loadEnvs(); }
      else setMsg({ t: "Error " + r.status + ": " + (r.body.error || "unknown"), err: true });
    }).catch((e) => { setBusy(false); setMsg({ t: "Network error: " + e.message, err: true }); });
  }

  // ---- account Active/Inactive + halt-resurrect (env_set_account_status) ----
  // statusPanel: { slug, account, mode: "deactivate" | "reactivate" } | null
  const [statusPanel, setStatusPanel] = React.useState(null);
  const [ddPct, setDdPct] = React.useState("");
  const [deletePanel, setDeletePanel] = React.useState(null);
  const [deletePasscode, setDeletePasscode] = React.useState("");
  function openStatusPanel(env, mode) {
    const acct = env.account || { id: env.slug, status: env.status || "active", current_equity: 0, total_dd_limit_pct: 5 };
    setStatusPanel({ slug: env.slug, account: acct, mode });
    setDdPct(acct && acct.total_dd_limit_pct != null ? String(acct.total_dd_limit_pct) : "");
    setMsg(null);
  }
  function submitDelete() {
    if (!deletePanel) return;
    if (!deletePasscode.trim()) { setMsg({ t: "Enter the Control passcode to delete", err: true }); return; }
    setBusy(true);
    setMsg({ t: "Deleting account…", err: false });
    APPVC.api3("delete_environment", { slug: deletePanel, passcode: deletePasscode.trim() }).then((r) => {
      setBusy(false);
      if (r.status === 200 && r.body.ok) {
        setDeletePanel(null); setDeletePasscode("");
        setMsg({ t: "✓ Account deleted", err: false });
        loadEnvs(); return;
      }
      setMsg({ t: "Error " + r.status + ": " + (r.body.error || "unknown"), err: true });
    }).catch((e) => { setBusy(false); setMsg({ t: "Network error: " + e.message, err: true }); });
  }
  function submitStatus() {
    if (!statusPanel) return;
    const { slug, mode } = statusPanel;
    const payload = { slug, op: mode };
    if (mode === "reactivate" && ddPct.trim() !== "") payload.dd_pct = Number(ddPct);
    setBusy(true);
    setMsg({ t: mode === "deactivate" ? "Deactivating account…" : "Resurrecting account…", err: false });
    APPVC.api3("set_account_status", payload).then((r) => {
      setBusy(false);
      if (r.status === 200 && r.body.ok) {
        setStatusPanel(null);
        setMsg({ t: "✓ " + (r.body.picked_up || (mode === "deactivate" ? "account deactivated" : "account reactivated")), err: false });
        loadEnvs(); return;
      }
      setMsg({ t: "Error " + r.status + ": " + (r.body.error || "unknown"), err: true });
    }).catch((e) => { setBusy(false); setMsg({ t: "Network error: " + e.message, err: true }); });
  }
  // Real trading state of the linked broker account: OK / HALTED / INACTIVE.
  function accountBadge(env) {
    const a = env.account;
    if (!a) return null;
    const st = String(a.status || "");
    const cfg = st === "active" ? { label: "OK", color: "var(--green)", clickable: false }
      : st === "inactive" ? { label: "INACTIVE", color: "var(--muted)", clickable: false }
      : { label: "HALTED", color: "var(--red)", clickable: true };   // halted / killed / anything else
    return (
      <span
        onClick={cfg.clickable ? (e) => { e.stopPropagation(); openStatusPanel(env, "reactivate"); } : undefined}
        title={cfg.clickable ? "Account halted by the risk gate — click to resurrect" : a.kill_switch ? "kill switch ON" : undefined}
        style={{ fontFamily: "var(--font-mono)", fontSize: 10, padding: "2px 8px", borderRadius: 6, border: "1px solid var(--line)", color: cfg.color, textTransform: "uppercase", cursor: cfg.clickable ? "pointer" : "default", fontWeight: cfg.clickable ? 700 : 400 }}>
        {cfg.label}
      </span>
    );
  }
  function credentialPayload() {
    if (form.broker_mode === "coinbase") return { BROKER: "coinbase_deribit", EXECUTION_PROFILE: "coinbase_deribit", api_key: form.api_key.trim(), private_key: form.api_secret.trim(), portfolio_uuid: form.portfolio_uuid.trim(), settlement_currency: "USDC" };
    const privateKey = form.api_key.trim();
    const payload = {
      BROKER: "hyperliquid",
      HYPERLIQUID_ACCOUNT_TYPE: form.broker_mode,
      EXECUTION_PROFILE: selectedType.profile,
      HIP3_ENABLED: hip3On,
      HYPERLIQUID_PRIVATE_KEY: privateKey,
      HYPERLIQUID_API_KEY: privateKey,
    };
    if (form.api_secret.trim()) payload.HYPERLIQUID_API_SECRET = form.api_secret.trim();
    if (form.wallet_address.trim()) payload.HYPERLIQUID_WALLET_ADDRESS = form.wallet_address.trim();
    if (form.vault_address.trim()) payload.HYPERLIQUID_VAULT_ADDRESS = form.vault_address.trim();
    return payload;
  }
  function cleanBaskets() {
    return form.baskets
      .map((b, idx) => ({ basket_ref: String(b.basket_ref || "").trim(), alloc_pct: Number(b.alloc_pct), sort_order: idx, enabled: true }))
      .filter((b) => b.basket_ref && Number.isFinite(b.alloc_pct));
  }
  const baskets = cleanBaskets();
  const totalAlloc = baskets.reduce((sum, b) => sum + Number(b.alloc_pct || 0), 0);

  async function upsert() {
    if (!form.slug.trim() || !form.display_name.trim()) {
      setMsg({ t: "Name and slug are required", err: true }); return;
    }
    if (!form.api_key.trim() || (form.broker_mode === "coinbase" && !form.api_secret.trim())) {
      setMsg({ t: "API key / private key is required", err: true }); return;
    }
    if (form.broker_mode === "coinbase") {
      const secret = form.api_secret.trim();
      const compact = secret.replace(/\s+/g, "");
      const isPem = secret.includes("BEGIN") && secret.includes("PRIVATE KEY");
      const isEd25519 = /^[A-Za-z0-9+/]+={0,2}$/.test(compact) && (compact.length === 44 || compact.length === 88);
      if (!isPem && !isEd25519) { setMsg({ t: "Private key must be a base64 Ed25519 key or a PEM ECDSA key", err: true }); return; }
      if (!form.api_key.trim().includes("/apiKeys/")) { setMsg({ t: "Use the full CDP key name: organizations/<org>/apiKeys/<id>", err: true }); return; }
    }
    if (form.broker_mode === "vault" && !form.vault_address.trim()) {
      setMsg({ t: "Vault address is required for Hyperliquid Vault mode", err: true }); return;
    }
    if (form.broker_mode === "personal" && !form.wallet_address.trim()) {
      setMsg({ t: "Wallet address is required for Personal Account mode", err: true }); return;
    }
    if (!baskets.length) {
      setMsg({ t: "Select at least one basket for this account", err: true }); return;
    }
    if (baskets.some((b) => !(b.alloc_pct > 0 && b.alloc_pct <= 150))) {
      setMsg({ t: "Each basket allocation must be > 0 and ≤ 150", err: true }); return;
    }
    if (totalAlloc > 150) {
      setMsg({ t: "Total basket allocation cannot exceed 150%", err: true }); return;
    }
    setBusy(true);
    setMsg({ t: "Storing deployment environment…", err: false });

    // Credentials go over TLS and are encrypted SERVER-SIDE by vault_deploy.
    //
    // This used to AES-encrypt here in the browser using a hardcoded master string. That bought
    // nothing: the Cloud Run bridge must decrypt to sign orders, so the server holds the key
    // regardless — TLS already protects the wire. All the browser step achieved was publishing
    // the key, because control/app.jsx is served unauthenticated (curl it and read the source).
    // The same string is also the monitor's GATE_PASS. See
    // docs/HANDOFF-CREDENTIAL-KEY-RISK-2026-07-15.md — it was never deployed, so nothing to rotate.
    //
    // Pairs with the vault_deploy change (accept `credentials`, encrypt with the
    // CREDENTIALS_MASTER_KEY secret). SHIPPED 2026-07-15 as vault_deploy v19 — server-side
    // encryption verified round-trip against the bridge; saving an environment now succeeds.
    APPVC.api3("upsert_environment", {
      slug: slugify(form.slug),
      display_name: form.display_name.trim(),
      broker: selectedType.broker,
      broker_mode: form.broker_mode === "coinbase" ? "custom" : form.broker_mode,
      network: "mainnet",
      reserve_pct: 0,
      status: form.status,
      notes: form.notes.trim() || null,
      credentials: credentialPayload(),
      baskets,
    }).then((r) => {
      setBusy(false);
      if (r.status === 200 && r.body.ok) {
        setAdding(false); setForm(blank);
        setMsg({ t: "✓ Deployment environment saved with encrypted credentials", err: false });
        loadEnvs(); return;
      }
      setMsg({ t: "Error " + r.status + ": " + (r.body.error || "unknown"), err: true });
    }).catch((e) => { setBusy(false); setMsg({ t: "Network error: " + e.message, err: true }); });
  }

  const brokerTag = (env) => {
    const broker = String(env.broker || env.credentials?.BROKER || "hyperliquid").toLowerCase();
    if (isCoinbaseBroker(broker)) return (
      <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontFamily: "var(--font-mono)", fontSize: 11, padding: "2px 8px", borderRadius: 6, border: "1px solid #1652F0", color: "#5f86f7", background: "rgba(22,82,240,.08)" }}>
        <BrokerMark broker="coinbase" size={13} />
        {broker === "coinbase_perps" ? "Coinbase INTX" : "Coinbase"}
      </span>
    );
    const mode = env.broker_mode === "vault" ? "Vault" : "Personal";
    return (
      <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontFamily: "var(--font-mono)", fontSize: 11, padding: "2px 8px", borderRadius: 6, border: "1px solid var(--line)", color: "var(--ink-soft)", background: "var(--paper)" }}>
        <HLLogo size={13} />
        <span style={{ display: "none" }}>HL</span>
        HL {mode}
      </span>
    );
  };

  const activeEnvCount = envs.filter((env) => String(env.account?.status || env.status || "").toLowerCase() === "active").length;
  const attentionEnvCount = envs.filter((env) => ["halted", "killed"].includes(String(env.account?.status || "").toLowerCase())).length;
  const fundedBasketLinks = envs.reduce((sum, env) => sum + (env.baskets || []).filter((b) => b.enabled !== false).length, 0);

  return (
    <div style={{ padding: 30, display: "flex", flexDirection: "column", gap: 16 }}>
      <div className="broker-overview-grid">
        <div className="broker-overview-metric"><span>Connected</span><strong>{envs.length}</strong><small>broker accounts</small></div>
        <div className="broker-overview-metric"><span>Trading</span><strong style={{ color: activeEnvCount ? "var(--green)" : "var(--muted)" }}>{activeEnvCount}</strong><small>runtime active</small></div>
        <div className="broker-overview-metric"><span>Attention</span><strong style={{ color: attentionEnvCount ? "var(--red)" : "var(--green)" }}>{attentionEnvCount}</strong><small>halted or killed</small></div>
        <div className="broker-overview-metric"><span>Basket links</span><strong>{fundedBasketLinks}</strong><small>funding assignments</small></div>
        <div className="broker-overview-actions">
          <button onClick={adding ? () => setAdding(false) : openAdd} className="broker-primary-action">{adding ? "Close setup" : "+ Add account"}</button>
        </div>
      </div>

      {/* Add form */}
      {adding && (
        <div style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12, padding: 22 }}>
          <h4 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 16, margin: "0 0 16px" }}>New broker account</h4>

          {/* Broker type selector */}
          <div style={{ display: "flex", gap: 8, marginBottom: 18 }}>
            {/* Switching mode resets HIP-3 to off, so the default-off promise holds
                on every mode change and can never be inherited from a previous pick. */}
            {Object.entries(accountTypes).map(([key, t]) => (
              <button key={key} onClick={() => setForm((cur) => ({ ...cur, broker_mode: key, hip3: false, status: "active" }))} style={{
                display: "flex", alignItems: "center", gap: 8, padding: "10px 16px", borderRadius: 9, border: `2px solid ${form.broker_mode === key ? "var(--ink)" : "var(--line)"}`,
                background: form.broker_mode === key ? "var(--btn-ink)" : "var(--paper)", color: form.broker_mode === key ? "#fff" : "var(--ink-soft)",
                cursor: "pointer", fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 13, transition: "all .15s",
              }}>
                <BrokerMark broker={t.broker} size={16} tone={form.broker_mode === key ? "dark" : "light"} /> {t.label}
              </button>
            ))}
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <label style={labelStyle}><span style={smallCaps}>Reference name (display)</span><input value={form.display_name} onChange={(e) => setField("display_name", e.target.value)} placeholder="e.g. Client A HL Vault" style={inputStyle} /></label>
            <label style={labelStyle}><span style={smallCaps}>Slug (unique identifier)</span><input value={form.slug} onChange={(e) => setField("slug", e.target.value)} placeholder="e.g. client-a-hl-vault" style={inputStyle} /></label>
            <label style={labelStyle}><span style={smallCaps}>{form.broker_mode === "coinbase" ? "CDP API key name" : "API key"}</span><input type="password" value={form.api_key} onChange={(e) => setField("api_key", e.target.value)} placeholder={form.broker_mode === "coinbase" ? "organizations/<org>/apiKeys/<id>" : "API key"} style={inputStyle} /></label>
            <label style={labelStyle}><span style={smallCaps}>{form.broker_mode === "coinbase" ? "CDP private key (Ed25519 or PEM)" : "API secret"}</span><textarea value={form.api_secret} onChange={(e) => setField("api_secret", e.target.value)} rows={form.broker_mode === "coinbase" ? 4 : 1} placeholder={form.broker_mode === "coinbase" ? "base64 Ed25519 key, or -----BEGIN PRIVATE KEY-----" : "API secret"} style={{ ...inputStyle, resize: "vertical" }} /></label>
            {form.broker_mode === "coinbase" ? (
              <label style={{ ...labelStyle, gridColumn: "1 / -1" }}><span style={smallCaps}>Portfolio UUID (optional, INTX only)</span><input value={form.portfolio_uuid} onChange={(e) => setField("portfolio_uuid", e.target.value)} placeholder="leave blank unless trading INTX perps" style={inputStyle} /></label>
            ) : form.broker_mode === "vault" ? (
              <label style={{ ...labelStyle, gridColumn: "1 / -1" }}><span style={smallCaps}>Vault address</span><input value={form.vault_address} onChange={(e) => setField("vault_address", e.target.value)} placeholder="0x... (the vault contract address)" style={inputStyle} /></label>
            ) : (
              <label style={labelStyle}><span style={smallCaps}>Wallet address</span><input value={form.wallet_address} onChange={(e) => setField("wallet_address", e.target.value)} placeholder="0x... (User wallet address)" style={inputStyle} /></label>
            )}
          </div>

          {/* HIP-3 (US-equity builder dex) — opt-in, never implied by account mode */}
          {hip3Available && (
            <div style={{
              marginTop: 12, padding: "10px 14px", borderRadius: 8, fontSize: 12.5, color: "var(--ink-soft)",
              background: hip3On ? "rgba(176,136,60,.07)" : "var(--paper)",
              border: `1px solid ${hip3On ? "var(--gold)" : "var(--line)"}`,
            }}>
              <label style={{ display: "flex", alignItems: "flex-start", gap: 12, cursor: "pointer" }}>
                {/* Toggle switch. A native checkbox carries the state (keyboard + form
                    semantics for free); the visual track/knob is painted on top. */}
                <span style={{ position: "relative", flexShrink: 0, marginTop: 1, width: 38, height: 22 }}>
                  <input
                    type="checkbox"
                    role="switch"
                    aria-label="Trade US equities via the HIP-3 builder dex"
                    checked={hip3On}
                    onChange={(e) => setField("hip3", e.target.checked)}
                    style={{ position: "absolute", inset: 0, width: "100%", height: "100%", margin: 0, opacity: 0, cursor: "pointer" }}
                  />
                  <span aria-hidden="true" style={{
                    position: "absolute", inset: 0, borderRadius: 999, pointerEvents: "none",
                    background: hip3On ? "var(--gold)" : "var(--line)",
                    border: `1px solid ${hip3On ? "var(--gold)" : "var(--border-strong, var(--line))"}`,
                    transition: "background .15s ease",
                  }} />
                  <span aria-hidden="true" style={{
                    position: "absolute", top: 3, left: 3, width: 16, height: 16, borderRadius: "50%",
                    background: "var(--paper)", pointerEvents: "none",
                    boxShadow: "0 1px 2px rgba(0,0,0,.35)",
                    transform: hip3On ? "translateX(16px)" : "translateX(0)",
                    transition: "transform .15s ease",
                  }} />
                </span>
                <span>
                  <b style={{ color: hip3On ? "var(--gold-ink)" : "var(--ink)" }}>Trade US equities via the HIP-3 builder dex</b>
                  <span style={{ display: "block", marginTop: 4 }}>
                    Leave this OFF for crypto perps (BTC, ETH, BNB, HYPE, SOL …) — they trade on
                    Hyperliquid standard perps. Turn it ON only for a US-equity account
                    (<code style={{ fontFamily: "var(--font-mono)" }}>xyz:NVDA</code>,{" "}
                    <code style={{ fontFamily: "var(--font-mono)" }}>xyz:TSLA</code>).
                  </span>
                  {hip3On && (
                    <span style={{ display: "block", marginTop: 6, color: "var(--gold-ink)" }}>
                      The builder dex holds its own collateral, so the bridge will size this account
                      off the HIP-3 balance and ignore the standard-perps balance completely. Fund the
                      dex, or every order is blocked as “non-positive equity”.
                    </span>
                  )}
                </span>
              </label>
            </div>
          )}

          {/* Basket allocation */}
          <div style={{ marginTop: 18, borderTop: "1px solid var(--line)", paddingTop: 16 }}>
            <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "center", flexWrap: "wrap", marginBottom: 10 }}>
              <h4 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 15, margin: 0 }}>Basket allocation</h4>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: totalAlloc > 150 ? "var(--red)" : "var(--muted)" }}>
                Total: <b style={{ color: totalAlloc > 150 ? "var(--red)" : totalAlloc > 0 ? "var(--ink)" : "var(--muted)" }}>{totalAlloc.toFixed(1)}%</b>
                {totalAlloc > 150 && " — exceeds 150%, reduce allocations"}
              </span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {form.baskets.map((row, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "minmax(200px,1fr) 130px auto", gap: 10, alignItems: "center" }}>
                  <select value={row.basket_ref} onChange={(e) => updateBasket(i, "basket_ref", e.target.value)} style={{ ...inputStyle, cursor: "pointer" }}>
                    <option value="">— select basket —</option>
                    {basketOptions.map((b) => <option key={b.ref} value={b.ref}>{b.name}</option>)}
                    {!basketOptions.length && <option value="" disabled>No baskets yet — create one in Basket Studio</option>}
                  </select>
                  <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                    <input type="number" min="0" max="100" step="0.1" value={row.alloc_pct} onChange={(e) => updateBasket(i, "alloc_pct", e.target.value)} style={{ ...inputStyle, textAlign: "right" }} />
                    <span style={{ color: "var(--muted)", fontSize: 13 }}>%</span>
                  </div>
                  <button onClick={() => removeBasket(i)} disabled={form.baskets.length === 1} style={{ padding: "9px 12px", borderRadius: 8, border: "1px solid var(--line)", background: "var(--surface)", color: "var(--muted)", cursor: form.baskets.length === 1 ? "not-allowed" : "pointer", whiteSpace: "nowrap" }}>Remove</button>
                </div>
              ))}
              <button onClick={addBasket} style={{ justifySelf: "start", padding: "8px 14px", borderRadius: 8, border: "1px solid var(--line)", background: "var(--paper)", color: "var(--ink)", cursor: "pointer", fontWeight: 500, fontSize: 13 }}>+ Add basket</button>
            </div>
          </div>

          {/* Notes */}
          <div style={{ marginTop: 14, display: "grid", gap: 12 }}>
            <label style={labelStyle}><span style={smallCaps}>Notes <span style={{ fontWeight: 400 }}>(optional)</span></span><textarea value={form.notes} onChange={(e) => setField("notes", e.target.value)} rows={2} placeholder="Internal notes" style={{ ...inputStyle, resize: "vertical" }} /></label>
          </div>
          <div style={{ marginTop: 16, display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
            <button onClick={upsert} disabled={busy} style={{ padding: "10px 20px", borderRadius: 8, border: "none", background: "var(--btn-ink)", color: "#fff", fontWeight: 600, cursor: "pointer", opacity: busy ? 0.7 : 1 }}>
              {busy ? "Saving…" : "Save account"}
            </button>
            <span style={{ fontSize: 12, color: "var(--muted)" }}>Sent over TLS and encrypted (AES-256-GCM) server-side before storage; only the bridge decrypts them, at execution time.</span>
          </div>
          {msg && <div style={{ marginTop: 10, fontSize: 12.5, color: msg.err ? "var(--red)" : "var(--green)" }}>{msg.t}</div>}
        </div>
      )}

      {/* Saved environments list */}
      <div className="broker-environments-panel" style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12, overflow: "hidden" }}>
        <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10 }}>
          <div><h4 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 17, margin: 0 }}>Account directory</h4><div style={{ fontSize: 11.5, color: "var(--muted)", marginTop: 3 }}>Execution access, capital routing and runtime state</div></div>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--muted)" }}>{envs.length} total</span>
        </div>
        <div className="broker-environment-grid">
        {envs.length === 0 ? (
          <div style={{ padding: "28px 22px", color: "var(--muted)", fontSize: 13 }}>{loading ? "Loading environments…" : "No deployment environments yet — add the first account above."}</div>
        ) : envs.map((env) => {
          const rows = env.baskets || [];
          const alloc = rows.filter((b) => b.enabled !== false).reduce((sum, b) => sum + Number(b.alloc_pct || 0), 0);
          return (
            <div key={env.id || env.slug} className="broker-environment-tile" data-broker={String(env.broker || "hyperliquid").toLowerCase()}>
              <div className="broker-card-header">
                <div className="broker-card-mark"><BrokerMark broker={env.broker || env.credentials?.BROKER} size={27} /></div>
                <div className="broker-tile-identity">
                  <div style={{ fontWeight: 600, fontSize: 15.5, color: "var(--ink)", lineHeight: 1.25 }}>{env.display_name}</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--muted)", marginTop: 3, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{env.slug}</div>
                </div>
                <div className="broker-card-state">
                  {accountBadge(env)}
                  {!env.account && <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, padding: "2px 8px", borderRadius: 6, border: "1px solid var(--line)", color: env.status === "active" ? "var(--green)" : "var(--muted)", textTransform: "uppercase" }}>{env.status}</span>}
                </div>
              </div>
              <div className="broker-card-tags">{brokerTag(env)}<span>{rows.length} funded basket{rows.length !== 1 ? "s" : ""}</span></div>
              {env.notes && <div className="broker-card-note">{env.notes}</div>}
              <div className="broker-card-kpis">
                <div><span>Assigned</span><strong style={{ color: alloc > 150 ? "var(--red)" : alloc > 100 ? "var(--gold)" : "var(--ink)" }}>{alloc.toFixed(0)}%</strong></div>
                <div><span>Baskets</span><strong>{rows.length}</strong></div>
                <div><span>Runtime</span><strong style={{ color: String(env.account?.status || env.status).toLowerCase() === "active" ? "var(--green)" : String(env.account?.status || env.status).toLowerCase() === "inactive" ? "var(--muted)" : "var(--red)" }}>{String(env.account?.status || env.status || "unknown").toUpperCase()}</strong></div>
              </div>
              <div className="broker-allocation-strip">
                <div style={{ display: "flex", justifyContent: "space-between", gap: 10, marginBottom: 6 }}>
                  <span style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--muted)" }}>Capital routing</span>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: alloc > 150 ? "var(--red)" : "var(--muted)" }}>{alloc.toFixed(1)} / 150%</span>
                </div>
                <div className="broker-capital-track"><span style={{ width: `${Math.min(100, alloc / 150 * 100)}%`, background: alloc > 150 ? "var(--red)" : alloc > 100 ? "var(--gold)" : "var(--green)" }} /></div>
              </div>
              {editSlug !== env.slug && (
                <div className="broker-basket-stack">
                  {rows.length ? rows.map((b, bi) => (
                    <div key={bi} className="broker-basket-row"><span>{b.basket_ref}</span><strong>{Number(b.alloc_pct).toFixed(1)}%</strong></div>
                  )) : <div className="broker-basket-empty">No basket allocation</div>}
                </div>
              )}
              <div className="broker-card-actions">
                {editSlug !== env.slug && <button onClick={() => startEditBaskets(env)} className="broker-action-main">Edit allocation</button>}
                {!(statusPanel && statusPanel.slug === env.slug) && (
                  String(env.account?.status || env.status) === "inactive" ? (
                    <button onClick={() => openStatusPanel(env, "reactivate")} className="broker-action-positive">Reactivate</button>
                  ) : (
                    <button onClick={() => openStatusPanel(env, "deactivate")} className="broker-action-quiet">Deactivate</button>
                  )
                )}
                {!(deletePanel && deletePanel === env.slug) && (
                  <button onClick={() => { setDeletePanel(env.slug); setDeletePasscode(""); setMsg(null); }} className="broker-action-danger">Delete</button>
                )}
              </div>
              {statusPanel && statusPanel.slug === env.slug && (
                statusPanel.mode === "deactivate" ? (
                  <div style={{ padding: 12, border: "1px solid var(--red)", background: "rgba(176,60,60,.05)", borderRadius: 9 }}>
                    <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--red)", marginBottom: 8 }}>Deactivate {statusPanel.account.id}?</div>
                    <p style={{ fontSize: 12.5, color: "var(--ink-soft)", margin: "0 0 10px", lineHeight: 1.6 }}>
                      This <b>closes all open positions</b> on {statusPanel.account.id} at market within ~60s and <b>stops all further trades</b> for this account. No further position or alert messages will be sent for it. You can reactivate it here at any time.
                    </p>
                    <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
                      <button onClick={submitStatus} disabled={busy} style={{ fontSize: 13, fontWeight: 600, color: "#fff", background: "var(--red)", border: "none", borderRadius: 8, padding: "8px 15px", cursor: "pointer", opacity: busy ? 0.6 : 1 }}>{busy ? "Working…" : "Confirm deactivate"}</button>
                      <button onClick={() => { setStatusPanel(null); setMsg(null); }} style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-soft)", background: "none", border: "1px solid var(--line)", borderRadius: 8, padding: "7px 12px", cursor: "pointer" }}>Cancel</button>
                    </div>
                  </div>
                ) : (
                  <div style={{ padding: 12, border: "1px solid var(--gold)", background: "rgba(176,136,60,.05)", borderRadius: 9 }}>
                    <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--muted)", marginBottom: 8 }}>Resurrect {statusPanel.account.id} to live trading</div>
                    <p style={{ fontSize: 12.5, color: "var(--ink-soft)", margin: "0 0 10px", lineHeight: 1.6 }}>
                      Current equity <b style={{ fontFamily: "var(--font-mono)" }}>${Number(statusPanel.account.current_equity || 0).toFixed(2)}</b>.
                      The drawdown base resets to this equity (otherwise the risk gate would re-halt the account within a minute). Assign the drawdown limit to guard from here:
                    </p>
                    <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
                      <label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12.5, color: "var(--ink-soft)" }}>
                        DD limit
                        <input type="number" min="0.5" max="50" step="0.5" value={ddPct} onChange={(e) => setDdPct(e.target.value)} style={{ ...inputStyle, width: 76, textAlign: "right" }} />
                        %
                      </label>
                      {ddPct.trim() !== "" && Number(ddPct) > 0 && (
                        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--muted)" }}>
                          → floor ${(Number(statusPanel.account.current_equity || 0) * (1 - Number(ddPct) / 100)).toFixed(2)}
                        </span>
                      )}
                      <button onClick={submitStatus} disabled={busy} style={{ marginLeft: "auto", fontSize: 13, fontWeight: 600, color: "#fff", background: "var(--btn-ink)", border: "none", borderRadius: 8, padding: "8px 15px", cursor: "pointer", opacity: busy ? 0.6 : 1 }}>{busy ? "Working…" : "Make live again"}</button>
                      <button onClick={() => { setStatusPanel(null); setMsg(null); }} style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-soft)", background: "none", border: "1px solid var(--line)", borderRadius: 8, padding: "7px 12px", cursor: "pointer" }}>Cancel</button>
                    </div>
                    <p style={{ fontSize: 11.5, color: "var(--muted)", margin: "8px 0 0", lineHeight: 1.5 }}>Sleeves trade again only where their own arm/enabled flags allow. The bridge picks this up on its next ~60s pass.</p>
                  </div>
                )
              )}
              {deletePanel === env.slug && (
                <div style={{ padding: 12, border: "1px solid var(--red)", background: "rgba(176,60,60,.05)", borderRadius: 9 }}>
                  <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--red)", marginBottom: 8 }}>Delete {env.slug}?</div>
                  <p style={{ fontSize: 12.5, color: "var(--ink-soft)", margin: "0 0 10px", lineHeight: 1.6 }}>
                    This permanently removes the broker account <b>{env.display_name}</b> and its basket allocations. Enter the Control operator passcode to confirm.
                  </p>
                  <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
                    <input type="password" placeholder="Control passcode" value={deletePasscode} onChange={(e) => setDeletePasscode(e.target.value)} style={{ ...inputStyle, width: 220 }} />
                    <button onClick={submitDelete} disabled={busy} style={{ fontSize: 13, fontWeight: 600, color: "#fff", background: "var(--red)", border: "none", borderRadius: 8, padding: "8px 15px", cursor: "pointer", opacity: busy ? 0.6 : 1 }}>{busy ? "Deleting…" : "Delete account"}</button>
                    <button onClick={() => { setDeletePanel(null); setDeletePasscode(""); setMsg(null); }} style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-soft)", background: "none", border: "1px solid var(--line)", borderRadius: 8, padding: "7px 12px", cursor: "pointer" }}>Cancel</button>
                  </div>
                </div>
              )}
              {editSlug === env.slug && (
                <div style={{ padding: 12, border: "1px solid var(--gold)", background: "rgba(176,136,60,.05)", borderRadius: 9 }}>
                  <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--muted)", marginBottom: 8 }}>Baskets this account funds &amp; their share</div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                    {editBaskets.map((b, i) => (
                      <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 92px 30px", gap: 8, alignItems: "center" }}>
                        <select value={b.basket_ref} onChange={(e) => setEB(i, "basket_ref", e.target.value)} style={{ ...inputStyle, cursor: "pointer" }}>
                          {!basketOptions.some((o) => o.ref === b.basket_ref) && b.basket_ref && <option value={b.basket_ref}>{b.basket_ref}</option>}
                          {basketOptions.map((o) => <option key={o.ref} value={o.ref}>{o.name}</option>)}
                          {!basketOptions.length && <option value="" disabled>No baskets — compose one in Basket Studio</option>}
                        </select>
                        <input type="number" min="0" max="100" step="1" placeholder="%" value={b.alloc_pct} onChange={(e) => setEB(i, "alloc_pct", e.target.value)} style={{ ...inputStyle, textAlign: "right" }} />
                        <button onClick={() => delEB(i)} title="Remove basket" style={{ border: "1px solid var(--line)", background: "none", borderRadius: 7, color: "var(--muted)", cursor: "pointer", height: 38 }}>×</button>
                      </div>
                    ))}
                  </div>
                  <div style={{ display: "flex", gap: 10, alignItems: "center", marginTop: 10, flexWrap: "wrap" }}>
                    <button onClick={addEB} style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ink-soft)", background: "none", border: "1px solid var(--line)", borderRadius: 8, padding: "7px 12px", cursor: "pointer" }}>+ Add basket</button>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: editTotal > 150.01 ? "var(--red)" : "var(--ink-soft)" }}>Σ {editTotal.toFixed(0)}% / 150%</span>
                    <button onClick={saveEB} disabled={busy} style={{ marginLeft: "auto", fontSize: 13, fontWeight: 600, color: "#fff", background: "var(--btn-ink)", border: "none", borderRadius: 8, padding: "8px 15px", cursor: "pointer", opacity: busy ? 0.6 : 1 }}>Save</button>
                    <button onClick={() => { setEditSlug(null); setMsg(null); }} style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-soft)", background: "none", border: "1px solid var(--line)", borderRadius: 8, padding: "7px 12px", cursor: "pointer" }}>Cancel</button>
                  </div>
                  <p style={{ fontSize: 11.5, color: "var(--muted)", margin: "8px 0 0", lineHeight: 1.5 }}>How much of this account funds each basket. Editing this doesn't touch the API keys. Nothing trades until the resolver applies it.</p>
                </div>
              )}
            </div>
          );
        })}
        </div>
      </div>
      {!adding && msg && <div style={{ fontSize: 12.5, color: msg.err ? "var(--red)" : "var(--green)" }}>{msg.t}</div>}
    </div>
  );
}





// ---- Hash routing — every screen and every strategy gets a unique, shareable URL ----
// #/baskets · #/environments · #/strategies · #/analytics · #/trades · #/portfolio/id140
// The strategy page keeps the tab you came from highlighted (it's an overlay), and the
// browser back button works because navigation IS the hash.
const APP_ROUTES = ["baskets", "environments", "strategies", "analytics", "monitor", "trades"];
function parseAppHash() {
  const parts = String(location.hash || "").replace(/^#\/?/, "").split("/").filter(Boolean);
  if ((parts[0] === "portfolio" || parts[0] === "strategy") && /^[A-Za-z0-9_-]+$/.test(parts[1] || "")) return { selected: parts[1] };
  if (APP_ROUTES.includes(parts[0])) return { route: parts[0], selected: null };
  return { route: "baskets", selected: null };
}

function App() {
  const [vault, setVault] = React.useState(null);
  const initial = parseAppHash();
  const [route, setRoute] = React.useState(initial.route || "baskets");
  const [selected, setSelected] = React.useState(initial.selected || null);
  // No global source toggle any more — every screen reads the combined ledger and labels
  // provenance inline (SourceTags, chart markers). "both" is the only mode.
  const mode = "both";
  const [refreshing, setRefreshing] = React.useState(false);
  const mainRef = React.useRef(null);

  React.useEffect(() => {
    function onHash() {
      const h = parseAppHash();
      if (h.selected !== undefined && h.selected !== null) {
        setSelected(h.selected);
        return;
      }
      setSelected(null);
      if (h.route) setRoute(h.route);
    }
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  function onUnlocked(body) {
    if (typeof APPVC.seedRegistryBacktests === "function") APPVC.seedRegistryBacktests(body.registry || []);
    // list_vault already ships every vault strategy's closed-trade ledger in `trades`. Nothing
    // used to cache it (cacheTrades was only reachable via ensureTrades, which Overview never
    // calls), so the landing screen computed decay + equity + returns off an EMPTY cache and
    // rendered N/A / "—" for every basket until you happened to visit Strategies. Free fix:
    // it is already on the wire.
    APPVC.cacheTrades(body.trades || {});
    setVault(body);
    APPVC.api2("list_baskets").then((r) => {
      if (r.status === 200 && r.body.ok) {
        setVault((v) => (v ? { ...v, builderBaskets: r.body.baskets || [] } : v));
      }
    });
  }
  function refresh() {
    setRefreshing(true);
    return APPVC.api("list_vault").then((r) => {
      setRefreshing(false);
      if (r.status === 200 && r.body.ok) { onUnlocked(r.body); }
      else if (r.status === 401) lock();
    }).catch(() => setRefreshing(false));
  }
  function lock() {
    APPVC.clearSession(true);
    setVault(null); setSelected(null);
  }
  // Navigation writes the hash; state follows via the hashchange listener. A strategy
  // detail is an OVERLAY on whichever tab you're on — the route (and sidebar highlight)
  // stays put, so Back always returns exactly where you were.
  function go(r) { location.hash = "#/" + r; }
  function openStrategy(id) {
    if (!/^id\d+$/.test(String(id || ""))) return;
    location.hash = "#/portfolio/" + id;
  }
  function closeStrategy() { location.hash = "#/" + route; }

  if (!vault) return <Gate onUnlocked={onUnlocked} />;

  const [title, sub] = TITLES[route] || TITLES.baskets;
  const warns = vault.warnings || [];
  let screen = null;
  if (selected && /^id\d+$/.test(selected)) screen = <window.DeepDive sid={selected} vault={vault} mode={mode} openStrategy={openStrategy} back={closeStrategy} backLabel={title} refresh={refresh} />;
  else if (selected) { location.hash = "#/strategies"; return null; }
  else if (route === "baskets") screen = <window.BasketStudio vault={vault} mode={mode} refresh={refresh} openStrategy={openStrategy} />;
  else if (route === "environments") screen = <DeploymentEnvironment vault={vault} />;
  else if (route === "strategies") screen = <window.StrategiesList vault={vault} mode={mode} openStrategy={openStrategy} refresh={refresh} />;
  else if (route === "analytics") screen = <window.Analytics vault={vault} mode={mode} openStrategy={openStrategy} />;
  else if (route === "monitor") screen = <window.MonitorScreen vault={vault} refresh={refresh} openStrategy={openStrategy} />;
  else if (route === "trades") screen = <window.TradeLog vault={vault} mode={mode} openStrategy={openStrategy} refresh={refresh} />;

  return (
    <div style={{ display: "flex", minHeight: "100vh", background: "var(--paper)" }} data-screen-label={title}>
      <Sidebar route={route} go={go} vault={vault} onRefresh={refresh} onLock={lock} refreshing={refreshing} />
      <main ref={mainRef} style={{ flex: 1, minWidth: 0, height: "100vh", overflowY: "auto", display: "flex", flexDirection: "column" }}>
        {!selected && route !== "baskets" && <div style={{ position: "sticky", top: 0, zIndex: 5 }}>
          <TopBar title={title} sub={sub} />
        </div>}

        {/* Only genuinely actionable banners survive: demo mode and failed reads. The standing
            "changes here are live" disclaimer was cut (2026-07-21) — arm/disarm dialogs carry
            their own warning at the moment it matters. */}
        <div style={{ padding: "12px 34px 0" }}>
          {route !== "environments" && APPVC.DEMO && (
            <div style={{ border: "1px solid var(--line)", background: "var(--surface)", borderRadius: 10, padding: "10px 14px", fontSize: 12.5, color: "var(--muted)" }}>
              <b style={{ color: "var(--ink)" }}>Demo data.</b> Fixture payload — nothing here is real.
            </div>
          )}
          {warns.length > 0 && (
            <div style={{ marginTop: 8, border: "1px solid var(--red)", background: "rgba(178,58,58,.06)", borderRadius: 10, padding: "10px 14px", fontSize: 12.5, color: "var(--red)" }}>
              <b>Partial data.</b> Some reads failed this refresh: {warns.join("; ")}
            </div>
          )}
        </div>

        <div style={{ flex: 1 }}>{screen}</div>
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("vc-root")).render(<App />);