// Sidebar — editorial, sparse, premium
const { useState } = React;

function Sidebar({ active, setActive }) {
  const items = [
    { id: "dashboard", label: "Dashboard", icon: Icon.Dashboard },
    { id: "agents", label: "Agents", icon: Icon.Agents, badge: "7" },
    { id: "org", label: "Organization", icon: Icon.Org },
    { id: "tasks", label: "Tasks", icon: Icon.Tasks, badge: "23" },
    { id: "trading", label: "Trading", icon: Icon.Trading },
    { id: "terminal", label: "Terminal", icon: Icon.Terminal, badge: "VPS" },
    { id: "settings", label: "Settings", icon: Icon.Settings },
  ];

  return (
    <aside style={{
      width: 232, flex: "none",
      borderRight: "1px solid var(--line-1)",
      background: "linear-gradient(180deg, rgba(255,255,255,0.015), transparent 40%)",
      display: "flex", flexDirection: "column",
      padding: "18px 14px",
      position: "relative", zIndex: 2,
    }}>
      {/* Brand */}
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "6px 8px 22px" }}>
        <div style={{
          width: 26, height: 26, borderRadius: 7,
          background: "linear-gradient(145deg, #1A1D26, #0B0C10)",
          border: "1px solid var(--line-2)",
          display: "grid", placeItems: "center",
          position: "relative", overflow: "hidden",
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="url(#bg)" strokeWidth="1.3" strokeLinecap="round">
            <defs>
              <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stopColor="oklch(0.9 0.16 220)"/>
                <stop offset="1" stopColor="oklch(0.82 0.14 80)"/>
              </linearGradient>
            </defs>
            <path d="M9 2.5v6.5a2.5 2.5 0 11-5 0V3.5a1.5 1.5 0 013 0v5"/>
          </svg>
        </div>
        <div style={{ lineHeight: 1.1 }}>
          <div style={{ fontSize: 13.5, fontWeight: 500, letterSpacing: "-0.01em" }}>Gastronaut.ai</div>
          <div style={{ fontSize: 10.5, color: "var(--ink-3)", fontFamily: "var(--font-mono)" }}>AGENTIC OS · v0.4</div>
        </div>
      </div>

      {/* Section label */}
      <div className="eyebrow" style={{ padding: "4px 8px 8px" }}>System</div>

      <nav style={{ display: "flex", flexDirection: "column", gap: 2 }}>
        {items.map((it) => {
          const Ico = it.icon;
          const on = active === it.id;
          return (
            <button
              key={it.id}
              onClick={() => setActive(it.id)}
              style={{
                display: "flex", alignItems: "center", gap: 10,
                padding: "8px 10px",
                borderRadius: 8,
                border: "1px solid transparent",
                background: on ? "rgba(255,255,255,0.04)" : "transparent",
                color: on ? "var(--ink-1)" : "var(--ink-2)",
                fontSize: 13, fontWeight: on ? 500 : 400,
                cursor: "pointer",
                textAlign: "left",
                fontFamily: "inherit",
                transition: "background 160ms, color 160ms",
                position: "relative",
              }}
              onMouseEnter={(e) => { if (!on) e.currentTarget.style.background = "rgba(255,255,255,0.025)"; }}
              onMouseLeave={(e) => { if (!on) e.currentTarget.style.background = "transparent"; }}
            >
              {on && <div style={{
                position: "absolute", left: -14, top: "50%", transform: "translateY(-50%)",
                width: 2, height: 16, borderRadius: 2,
                background: "var(--accent)",
                boxShadow: "0 0 12px var(--accent-glow)"
              }}/>}
              <Ico size={16} />
              <span style={{ flex: 1 }}>{it.label}</span>
              {it.badge && (
                <span className="mono" style={{
                  fontSize: 10, color: "var(--ink-3)",
                  padding: "1px 6px", borderRadius: 4,
                  background: "rgba(255,255,255,0.04)",
                  border: "1px solid var(--line-1)",
                }}>{it.badge}</span>
              )}
            </button>
          );
        })}
      </nav>

      <div className="eyebrow" style={{ padding: "24px 8px 8px" }}>Pinned agents</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
        {[
          { name: "Market Sentry", status: "live", color: "var(--gold)" },
          { name: "Creative Director", status: "idle", color: "var(--accent)" },
          { name: "Research Specialist", status: "live", color: "var(--accent)" },
        ].map((a) => (
          <button key={a.name} style={{
            display: "flex", alignItems: "center", gap: 10,
            padding: "7px 10px", borderRadius: 8,
            background: "transparent", border: "1px solid transparent",
            color: "var(--ink-2)", fontSize: 12.5, cursor: "pointer",
            textAlign: "left", fontFamily: "inherit",
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = "rgba(255,255,255,0.025)"}
          onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
          >
            <span style={{
              width: 8, height: 8, borderRadius: "50%",
              background: a.color,
              boxShadow: `0 0 8px ${a.color}`,
              opacity: a.status === "idle" ? 0.35 : 1,
            }}/>
            <span style={{ flex: 1 }}>{a.name}</span>
            {a.status === "live" && <span className="mono" style={{ fontSize: 9.5, color: "var(--ink-3)" }}>LIVE</span>}
          </button>
        ))}
      </div>

      <div style={{ flex: 1 }}/>

      {/* System status card */}
      <div className="glass" style={{ padding: 12, marginTop: 12 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
          <span className="dot live"/>
          <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-2)", letterSpacing: "0.08em" }}>VPS · NYC-03</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
          <MiniStat label="CPU" value="42%"/>
          <MiniStat label="MEM" value="3.1G"/>
        </div>
        <div style={{ marginTop: 10, height: 3, background: "rgba(255,255,255,0.05)", borderRadius: 2, overflow: "hidden" }}>
          <div style={{ width: "42%", height: "100%", background: "linear-gradient(90deg, var(--accent), var(--gold))" }}/>
        </div>
      </div>

      {/* User */}
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 8px 2px", marginTop: 8, borderTop: "1px solid var(--line-1)" }}>
        <div style={{
          width: 26, height: 26, borderRadius: "50%",
          background: "linear-gradient(135deg, oklch(0.6 0.1 40), oklch(0.4 0.08 20))",
          border: "1px solid var(--line-2)",
          display: "grid", placeItems: "center",
          fontSize: 11, fontWeight: 600, color: "#fff",
        }}>SÖ</div>
        <div style={{ lineHeight: 1.15, flex: 1 }}>
          <div style={{ fontSize: 12 }}>Sefa · Founder</div>
          <div style={{ fontSize: 10.5, color: "var(--ink-3)", fontFamily: "var(--font-mono)" }}>gastronaut.ai</div>
        </div>
      </div>
    </aside>
  );
}

function MiniStat({ label, value }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 9.5, color: "var(--ink-3)", letterSpacing: "0.1em" }}>{label}</div>
      <div style={{ fontSize: 13, fontFamily: "var(--font-mono)", color: "var(--ink-1)", marginTop: 2 }}>{value}</div>
    </div>
  );
}

window.Sidebar = Sidebar;