// Shell — SideNav + TopBar for the Client app.
// Adapted from /projects/c95cc902-ace6-466c-ad08-4119308b8281/ui_kits/app/SideNav.jsx
// but recast for the Client role: nav reads "Credit facilities" (the user is
// an investor/borrower, not an issuer).

// ---------- SideNav -----------------------------------------------------

const NavItem = ({ icon, label, active, badge, onClick }) => (
  <button onClick={onClick} style={{
    all: "unset", cursor: "pointer", display: "grid",
    gridTemplateColumns: "3px 16px 1fr auto", alignItems: "center",
    gap: 10, padding: "8px 16px 8px 0",
    color: active ? "var(--accent)" : "var(--fg-muted)",
    font: '500 13px/18px "Inter", sans-serif',
    background: active ? "var(--blue-10)" : "transparent",
    borderRadius: active ? "0 6px 6px 0" : 0,
    transition: "color var(--motion-fast), background var(--motion-fast)",
  }}
  onMouseEnter={(e) => { if (!active) e.currentTarget.style.color = "var(--fg)"; }}
  onMouseLeave={(e) => { if (!active) e.currentTarget.style.color = "var(--fg-muted)"; }}>
    <span style={{
      width: 3, height: 20,
      background: active ? "var(--accent)" : "transparent",
      borderRadius: "0 2px 2px 0",
      transition: "background var(--motion-fast)",
    }} />
    <Icon name={icon} size={15} />
    <span style={{ color: active ? "var(--accent)" : undefined }}>{label}</span>
    {badge && <span style={{
      font: '500 11px/14px "Inter", sans-serif',
      color: "var(--fg-subtle)", fontVariantNumeric: "tabular-nums",
      paddingRight: 16,
    }}>{badge}</span>}
  </button>
);

const NavGroup = ({ title, children }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 2, padding: "12px 0" }}>
    <div style={{
      font: '500 10px/14px "Inter", sans-serif', letterSpacing: "0.08em",
      textTransform: "uppercase", color: "var(--fg-subtle)",
      padding: "0 16px 8px 19px",
    }}>{title}</div>
    {children}
  </div>
);

const SideNav = ({ activeRoute = "portfolio", onNavigate, mobileOpen, onClose,
                  connected = true, onConnect, onDisconnect }) => {
  const go = (route) => { if (!connected) return; onNavigate && onNavigate(route); onClose && onClose(); };
  return (
  <React.Fragment>
    <div className={`nav-scrim ${mobileOpen ? "open" : ""}`} onClick={onClose} aria-hidden="true" />
    <aside className={`app-sidenav ${mobileOpen ? "open" : ""}`} style={{
    width: 232, borderRight: "1px solid var(--border)",
    background: "var(--bg-inset, #F7F7F5)",
    display: "flex", flexDirection: "column", flex: "0 0 232px",
  }}>
    <div style={{
      display: "flex", alignItems: "center", gap: 10,
      padding: "18px 19px", borderBottom: "1px solid var(--border)",
      height: 56, boxSizing: "border-box",
    }}>
      <Mark size={18} />
      <div style={{ flex: 1, font: '700 16px/20px "Figtree", sans-serif', letterSpacing: "-0.005em", color: "var(--fg)" }}>
        Ascend
      </div>
      <div style={{
        font: '500 10px/14px "Inter", sans-serif', letterSpacing: "0.06em",
        textTransform: "uppercase", color: "var(--fg-subtle)",
        border: "1px solid var(--border)", padding: "2px 6px", borderRadius: 2,
      }}>Client</div>
    </div>

    <div style={{
      flex: 1, overflow: "auto", paddingTop: 8, position: "relative",
      opacity: connected ? 1 : 0.4,
      pointerEvents: connected ? "auto" : "none",
      filter: connected ? "none" : "grayscale(0.4)",
      transition: "opacity var(--motion-base)",
    }} aria-disabled={!connected}>
      {/* Portfolio sits at the top, no group label — matches OZ structure */}
      <div style={{ display: "flex", flexDirection: "column", gap: 2, padding: "6px 0 12px" }}>
        <NavItem icon="grid" label="Portfolio"
                 active={activeRoute === "portfolio"}
                 onClick={() => go("portfolio")} />
      </div>
      <NavGroup title="Borrow">
        <NavItem icon="facility" label="Credit facilities"
                 active={activeRoute === "facilities" || activeRoute === "facility"}
                 badge="12"
                 onClick={() => go("facilities")} />
        <NavItem icon="accounts" label="Margin accounts"
                 active={activeRoute === "accounts"}
                 badge="7"
                 onClick={() => go("accounts")} />
        <NavItem icon="shield" label="Facility access"
                 active={activeRoute === "access"}
                 onClick={() => go("access")} />
      </NavGroup>
      <NavGroup title="Lend">
        <NavItem icon="coins" label="Lender dashboard" />
      </NavGroup>
      <NavGroup title="Liquidate">
        <NavItem icon="alert" label="Liquidations" />
      </NavGroup>
      <NavGroup title="Account">
        <NavItem icon="activity" label="Transaction history"
                 active={activeRoute === "activity"}
                 onClick={() => go("activity")} />
        <NavItem icon="user" label="Profile"
                 active={activeRoute === "profile"}
                 onClick={() => go("profile")} />
      </NavGroup>
    </div>

    {connected ? (
      <div style={{
        padding: "12px 16px", borderTop: "1px solid var(--border)",
        display: "flex", alignItems: "center", gap: 10,
      }}>
        <div style={{
          width: 28, height: 28, borderRadius: "50%", background: "var(--fg)",
          color: "var(--bg)", display: "grid", placeItems: "center",
          font: '500 11px/1 "Inter", sans-serif',
        }}>MR</div>
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2, flex: 1, minWidth: 0 }}>
          <span style={{
            font: '500 12px "JetBrains Mono", monospace', color: "var(--fg)",
            overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
          }}>0x1b75eb…a4f3</span>
          <span style={{
            font: '400 11px "Inter", sans-serif', color: "var(--fg-subtle)",
            overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
          }}>3,721.62 USDC</span>
        </div>
        <span style={{
          width: 8, height: 8, borderRadius: "50%", background: "var(--success)",
          flexShrink: 0,
        }} title="Connected" />
        <button onClick={onDisconnect} title="Disconnect wallet" aria-label="Disconnect wallet" style={{
          all: "unset", cursor: "pointer", color: "var(--fg-faint)",
          width: 26, height: 26, display: "grid", placeItems: "center",
          borderRadius: 6, flexShrink: 0,
          transition: "color var(--motion-fast), background var(--motion-fast)",
        }}
        onMouseEnter={(e) => { e.currentTarget.style.color = "var(--danger)"; e.currentTarget.style.background = "var(--red-10)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.color = "var(--fg-faint)"; e.currentTarget.style.background = "transparent"; }}>
          <Icon name="power" size={14} stroke={1.6} />
        </button>
      </div>
    ) : (
      <div style={{
        padding: "12px 16px", borderTop: "1px solid var(--border)",
        display: "flex", flexDirection: "column", gap: 8,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{
            width: 28, height: 28, borderRadius: "50%",
            border: "1px dashed var(--border-strong)",
            display: "grid", placeItems: "center", color: "var(--fg-faint)", flexShrink: 0,
          }}><Icon name="wallet" size={14} stroke={1.5} /></span>
          <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.25, minWidth: 0 }}>
            <span style={{ font: '500 12px "Inter", sans-serif', color: "var(--fg)" }}>Not connected</span>
            <span style={{ font: '400 11px "Inter", sans-serif', color: "var(--fg-subtle)" }}>No wallet linked</span>
          </div>
        </div>
        <button className="btn btn--primary" onClick={onConnect} style={{
          width: "100%", justifyContent: "center", gap: 7, height: 34,
        }}>
          <Icon name="wallet" size={14} stroke={1.6} />
          Connect wallet
        </button>
      </div>
    )}
  </aside>
  </React.Fragment>
);
};

// ---------- TopBar ------------------------------------------------------

const Breadcrumb = ({ items }) => (
  <nav aria-label="Breadcrumb" style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
    {items.map((item, i) => {
      const last = i === items.length - 1;
      return (
        <React.Fragment key={i}>
          {last ? (
            <span style={{
              font: '500 13px/18px "Inter", sans-serif',
              color: "var(--fg)", whiteSpace: "nowrap",
              overflow: "hidden", textOverflow: "ellipsis",
            }}>{item.label}</span>
          ) : (
            <button onClick={item.onClick} disabled={!item.onClick} style={{
              all: "unset", cursor: item.onClick ? "pointer" : "default",
              font: '400 13px/18px "Inter", sans-serif',
              color: "var(--fg-faint)",
              transition: "color var(--motion-fast)",
            }}
            onMouseEnter={(e) => { if (item.onClick) e.currentTarget.style.color = "var(--accent)"; }}
            onMouseLeave={(e) => e.currentTarget.style.color = "var(--fg-faint)"}>
              {item.label}
            </button>
          )}
          {!last && (
            <span style={{
              color: "var(--fg-faint)",
              font: '400 13px/18px "Inter", sans-serif',
              userSelect: "none",
            }}>/</span>
          )}
        </React.Fragment>
      );
    })}
  </nav>
);

const TopBar = ({ crumbs, onThemeToggle, theme, onMenu, connected = true, onConnect }) => (
  <header style={{
    height: 56, flex: "0 0 56px", display: "flex", alignItems: "center",
    borderBottom: "1px solid var(--border)", background: "var(--bg)",
    padding: "0 24px", gap: 16,
  }} className="app-topbar">
    <button className="nav-burger" onClick={onMenu} aria-label="Open menu" style={{
      all: "unset", cursor: "pointer", color: "var(--fg-muted)",
      width: 32, height: 32, display: "none", placeItems: "center",
      borderRadius: 6, flexShrink: 0,
    }}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
        <path d="M4 7h16M4 12h16M4 17h16"/>
      </svg>
    </button>
    <div style={{ flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: 12 }}>
      <Breadcrumb items={crumbs} />
    </div>

    <div className="topbar-search" style={{
      display: "flex", alignItems: "center", gap: 8, padding: "0 12px",
      height: 32, borderRadius: 6, background: "var(--bg-alt)",
      color: "var(--fg-subtle)", font: '400 12px "Inter", sans-serif',
      width: 280, flexShrink: 0, opacity: connected ? 1 : 0.5,
      pointerEvents: connected ? "auto" : "none",
    }}>
      <Icon name="search" size={13} style={{ flexShrink: 0 }} />
      <span style={{
        flex: 1, minWidth: 0, whiteSpace: "nowrap",
        overflow: "hidden", textOverflow: "ellipsis",
      }}>Search facilities, accounts, addresses…</span>
      <span style={{
        flexShrink: 0, font: '500 10px "JetBrains Mono", monospace',
        border: "1px solid var(--border-strong)", borderRadius: 3, padding: "1px 4px",
        color: "var(--fg-subtle)",
      }}>⌘K</span>
    </div>

    <div className="topbar-env" style={{
      display: "flex", alignItems: "center", gap: 6,
      height: 30, padding: "0 10px", borderRadius: 999,
      border: "1px solid var(--border-strong)",
      font: '500 12px "Inter", sans-serif', color: "var(--fg)",
    }}>
      <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--gold-60)" }} />
      Testnet · Sepolia
    </div>

    {connected ? (
      <div className="topbar-wallet" style={{
        display: "flex", alignItems: "center", gap: 8, padding: "0 10px",
        height: 30, borderRadius: 6, border: "1px solid var(--border-strong)",
        font: '500 12px "JetBrains Mono", monospace', color: "var(--fg)",
      }}>
        <span style={{ width: 8, height: 8, borderRadius: 2, background: "var(--accent)" }} />
        0x1b75…a4f3
      </div>
    ) : (
      <button className="topbar-wallet" onClick={onConnect} style={{
        all: "unset", cursor: "pointer",
        display: "flex", alignItems: "center", gap: 7, padding: "0 12px",
        height: 30, borderRadius: 6, border: "1px solid var(--border-strong)",
        font: '500 12px "Inter", sans-serif', color: "var(--fg-muted)",
        transition: "border-color var(--motion-fast), color var(--motion-fast)",
      }}
      onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--accent)"; e.currentTarget.style.color = "var(--accent)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--border-strong)"; e.currentTarget.style.color = "var(--fg-muted)"; }}>
        <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--fg-faint)" }} />
        Not connected
      </button>
    )}

    <button onClick={onThemeToggle} title="Toggle theme" style={{
      all: "unset", cursor: "pointer", color: "var(--fg-muted)",
      width: 32, height: 32, display: "grid", placeItems: "center",
      borderRadius: 6,
    }}>
      <Icon name={theme === "dark" ? "sun" : "moon"} size={15} />
    </button>
    <button title="Notifications" style={{
      all: "unset", cursor: "pointer", color: "var(--fg-muted)",
      width: 32, height: 32, display: "grid", placeItems: "center",
      borderRadius: 6, position: "relative",
    }}>
      <Icon name="bell" size={15} />
      <span style={{
        position: "absolute", top: 6, right: 7,
        width: 6, height: 6, borderRadius: 3, background: "var(--accent)",
        border: "1.5px solid var(--bg)",
      }} />
    </button>
  </header>
);

Object.assign(window, { SideNav, TopBar });