/* eslint-disable */
// App shell — sidebar + Alamelu workspace with sub-nav across the 5 components.

const NAV = [
  { id: "dashboard",  label: "Dashboard",       icon: I.Dashboard },
  { id: "markets",    label: "Markets",         icon: I.Markets },
  { id: "positions",  label: "Positions",       icon: I.Briefcase },
  { id: "orders",     label: "Orders",          icon: I.Orders },
  { id: "alerts",     label: "Alerts",          icon: I.Bell },
  { id: "analytics",  label: "Analytics",       icon: I.Activity },
  { id: "strategy",   label: "Strategy Builder",icon: I.Strategy },
  // separator before agent-suite
  { divider: "Agent suite" },
  { id: "alamelu",    label: "Alamelu",         icon: I.Sparkles, accent: true, badge: "5" },
];

const SUBNAV = [
  { id: "chat",       label: "Chat",            icon: I.Chat },
  { id: "guidelines", label: "Guidelines",      icon: I.File },
  { id: "status",     label: "Status",          icon: I.Activity },
  { id: "balance",    label: "API Balance",     icon: I.Wallet },
  { id: "routing",    label: "LLM Routing",     icon: I.Routes },
];

function App() {
  const [active, setActive] = useState("alamelu");
  const [sub, setSub] = useState("chat");

  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "232px 1fr",
      height: "100vh",
      minHeight: 0,
    }}>
      <Sidebar active={active} onSelect={setActive}/>
      {active === "alamelu" ? (
        <AlameluWorkspace sub={sub} setSub={setSub}/>
      ) : (
        <PlaceholderTab tab={NAV.find((n) => n.id === active)} jumpToAlamelu={() => setActive("alamelu")}/>
      )}
    </div>
  );
}

function Sidebar({ active, onSelect }) {
  return (
    <aside style={{
      borderRight: "1px solid var(--border-s)",
      background: "oklch(0.18 0.022 250)",
      display: "flex", flexDirection: "column",
      padding: "20px 14px",
      minHeight: 0,
    }}>
      <Brand/>
      <nav style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 2, flex: 1, overflow: "auto" }}>
        {NAV.map((item, i) => {
          if (item.divider) {
            return (
              <div key={i} style={{
                padding: "16px 12px 8px",
                fontSize: 10.5, fontWeight: 600,
                color: "var(--text-4)",
                letterSpacing: "0.14em", textTransform: "uppercase",
              }}>{item.divider}</div>
            );
          }
          const Icon = item.icon;
          const isActive = active === item.id;
          return (
            <button key={item.id} onClick={() => onSelect(item.id)}
              style={{
                position: "relative",
                display: "flex", alignItems: "center", gap: 12,
                padding: "9px 12px",
                background: isActive ? "var(--accent-soft)" : "transparent",
                color: isActive ? "var(--accent)" : "var(--text-2)",
                border: "none", borderRadius: "var(--r-sm)",
                fontSize: 13.5, fontWeight: isActive ? 600 : 500,
                textAlign: "left",
                transition: "all 140ms ease",
              }}
              onMouseEnter={(e) => { if (!isActive) { e.currentTarget.style.background = "var(--bg-2)"; e.currentTarget.style.color = "var(--text-1)"; } }}
              onMouseLeave={(e) => { if (!isActive) { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--text-2)"; } }}
            >
              {isActive && (
                <span style={{
                  position: "absolute", left: -14, top: "50%", transform: "translateY(-50%)",
                  width: 3, height: 18, background: "var(--accent)",
                  borderRadius: "0 3px 3px 0",
                }}/>
              )}
              <Icon size={16}/>
              <span style={{ flex: 1 }}>{item.label}</span>
              {item.badge && (
                <span className="mono" style={{
                  padding: "1px 6px",
                  background: isActive ? "oklch(0.820 0.150 170 / 0.20)" : "var(--bg-3)",
                  color: isActive ? "var(--accent)" : "var(--text-3)",
                  fontSize: 10, fontWeight: 600,
                  borderRadius: 999,
                }}>{item.badge}</span>
              )}
            </button>
          );
        })}
      </nav>

      {/* status footer — no user avatar/username per request */}
      <div style={{
        padding: "12px 12px 4px",
        borderTop: "1px solid var(--border-s)",
        marginTop: 12,
        display: "flex", flexDirection: "column", gap: 4,
      }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--good)", fontSize: 12, fontWeight: 600 }}>
            <StatusDot tone="good" size={7}/> All systems
          </span>
          <span className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>v0.7.3</span>
        </div>
        <span className="mono" style={{ fontSize: 10.5, color: "var(--text-4)" }}>
          us-east-1 · 12d uptime
        </span>
      </div>
    </aside>
  );
}

function Brand() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "0 6px" }}>
      <BrandMark/>
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.1 }}>
        <span style={{ fontWeight: 800, fontSize: 16, letterSpacing: "-0.02em" }}>Lazytrade</span>
        <span className="mono" style={{ fontSize: 10, color: "var(--text-4)", letterSpacing: "0.18em", textTransform: "uppercase" }}>
          autonomous desk
        </span>
      </div>
    </div>
  );
}

function BrandMark() {
  // a tilted "λ"-on-disc lockup — minimal, geometric, no AI-slop iconography
  return (
    <div style={{
      width: 32, height: 32,
      borderRadius: 9,
      background: "linear-gradient(135deg, oklch(0.32 0.10 170), oklch(0.20 0.06 235))",
      display: "flex", alignItems: "center", justifyContent: "center",
      boxShadow: "inset 0 0 0 1px oklch(1 0 0 / 0.06), 0 8px 22px -10px oklch(0.5 0.18 170 / 0.5)",
      position: "relative",
    }}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
        <path d="M5 19 L11 5 L13.5 5 L19 19" stroke="var(--accent)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M10 12 L14.5 19" stroke="var(--accent)" strokeWidth="2.4" strokeLinecap="round"/>
        <circle cx="19.5" cy="5" r="1.6" fill="var(--accent)"/>
      </svg>
    </div>
  );
}

function AlameluWorkspace({ sub, setSub }) {
  return (
    <main style={{
      display: "grid",
      gridTemplateRows: "auto 1fr",
      minHeight: 0,
      background: "var(--bg-0)",
    }}>
      <WorkspaceHeader sub={sub} setSub={setSub}/>

      {/* sub-views: each gets its own scroll container */}
      <div style={{ minHeight: 0, position: "relative", overflow: "hidden" }}>
        <div key={sub} className="fade-up" style={{
          position: "absolute", inset: 0,
          overflow: "auto",
        }}>
          {sub === "chat"       && <ChatInterface/>}
          {sub === "guidelines" && <GuidelinesEditor/>}
          {sub === "status"     && <StatusDisplay/>}
          {sub === "balance"    && <ApiBalanceMonitor/>}
          {sub === "routing"    && <LlmConfigPanel/>}
        </div>
      </div>
    </main>
  );
}

function WorkspaceHeader({ sub, setSub }) {
  return (
    <header style={{
      padding: "16px 24px 0",
      borderBottom: "1px solid var(--border-s)",
      background: "oklch(0.175 0.022 250)",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, paddingBottom: 12 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "var(--text-3)" }}>
            <span>Agent suite</span>
            <span style={{ color: "var(--text-4)" }}>/</span>
            <span style={{ color: "var(--text-1)", fontWeight: 600 }}>Alamelu</span>
          </div>
          <h1 style={{
            margin: "4px 0 0",
            fontSize: 22, fontWeight: 700,
            letterSpacing: "-0.02em",
            display: "flex", alignItems: "center", gap: 10,
          }}>
            Alamelu
            <span style={{
              fontSize: 11.5, fontWeight: 600,
              padding: "2px 8px",
              background: "var(--accent-soft)",
              color: "var(--accent)",
              borderRadius: 999,
              letterSpacing: "0.04em",
            }}>v1 · live</span>
          </h1>
          <p style={{ margin: "2px 0 0", fontSize: 13, color: "var(--text-3)" }}>
            Pi's control room — chat, guidelines, runners, model balances, routing.
          </p>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <Btn kind="ghost" size="sm" icon={<I.Settings size={13}/>}>Configure</Btn>
        </div>
      </div>

      {/* subtab bar */}
      <div style={{ display: "flex", gap: 4, position: "relative", marginTop: 4 }}>
        {SUBNAV.map((s) => {
          const Icon = s.icon;
          const active = s.id === sub;
          return (
            <button key={s.id} onClick={() => setSub(s.id)}
              style={{
                position: "relative",
                display: "inline-flex", alignItems: "center", gap: 8,
                padding: "10px 14px 12px",
                background: "transparent",
                border: "none",
                color: active ? "var(--text-1)" : "var(--text-3)",
                fontSize: 13.5, fontWeight: active ? 600 : 500,
                transition: "color 120ms ease",
              }}
              onMouseEnter={(e) => { if (!active) e.currentTarget.style.color = "var(--text-1)"; }}
              onMouseLeave={(e) => { if (!active) e.currentTarget.style.color = "var(--text-3)"; }}
            >
              <Icon size={14} style={{ color: active ? "var(--accent)" : "currentColor" }}/>
              {s.label}
              {active && <span style={{
                position: "absolute", left: 8, right: 8, bottom: -1,
                height: 2, borderRadius: 2,
                background: "var(--accent)",
              }}/>}
            </button>
          );
        })}
      </div>
    </header>
  );
}

function PlaceholderTab({ tab, jumpToAlamelu }) {
  const Icon = tab?.icon || I.Dashboard;
  return (
    <main style={{
      display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center",
      gap: 16,
      padding: 40,
      background: "var(--bg-0)",
      textAlign: "center",
    }}>
      <div style={{
        width: 64, height: 64, borderRadius: 18,
        background: "var(--bg-1)",
        border: "1px solid var(--border-s)",
        display: "flex", alignItems: "center", justifyContent: "center",
        color: "var(--text-3)",
      }}>
        <Icon size={28}/>
      </div>
      <h2 style={{ margin: 0, fontSize: 20, letterSpacing: "-0.01em" }}>{tab?.label}</h2>
      <p style={{ margin: 0, color: "var(--text-3)", maxWidth: 440, fontSize: 13.5, lineHeight: 1.65 }}>
        This prototype focuses on the <b style={{ color: "var(--accent)" }}>Alamelu</b> tab — Pi's agent control surface.
        The {tab?.label} tab is part of the existing Lazytrade desk; click below to jump back.
      </p>
      <Btn kind="primary" size="md" icon={<I.Sparkles size={13}/>} onClick={jumpToAlamelu}>
        Open Alamelu
      </Btn>
    </main>
  );
}

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