/* global React, Wordmark, Logo, Ic, VS */
const { useState: useState_nav } = React;

function Sidebar({ screen, setScreen, collapsed }) {
  const items = [
    { id: "dashboard", label: "Dashboard", icon: <Ic.dashboard /> },
    { id: "measurements", label: "Pomiary", icon: <Ic.measure /> },
    { id: "charts", label: "Wykresy", icon: <Ic.chart />, badge: "WIP" },
    { id: "computers", label: "Komputery", icon: <Ic.computer /> },
    { id: "config", label: "Konfiguracja", icon: <Ic.config /> },
  ];

  const username = (VS && VS.getUsername && VS.getUsername()) || '';
  const role = (VS && VS.getRole && VS.getRole()) || '';
  const initials = username ? username.slice(0, 2).toUpperCase() : '??';

  return (
    <aside style={{
      width: collapsed ? 56 : 216,
      background: "var(--bg-elev)",
      borderRight: "1px solid var(--border)",
      display: "flex", flexDirection: "column",
      flexShrink: 0,
      transition: "width 0.15s",
    }}>
      <div style={{
        padding: collapsed ? "14px 12px" : "14px 16px",
        borderBottom: "1px solid var(--border)",
        height: 56,
        display: "flex", alignItems: "center",
      }}>
        {collapsed ? <Logo size={22} /> : <Wordmark />}
      </div>

      <nav style={{ padding: 10, display: "flex", flexDirection: "column", gap: 2, flex: 1 }}>
        {!collapsed && <div className="uppercase-label" style={{ padding: "8px 8px 4px" }}>Menu</div>}
        {items.map((it) => (
          <SidebarItem key={it.id} item={it} active={screen === it.id} onClick={() => setScreen(it.id)} collapsed={collapsed} />
        ))}
      </nav>

      {!collapsed && username && (
        <div style={{
          padding: 14, borderTop: "1px solid var(--border)",
          display: "flex", alignItems: "center", gap: 10,
        }}>
          <div style={{
            width: 28, height: 28, borderRadius: "50%",
            background: "var(--accent-weak)",
            color: "var(--accent)",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 11, fontWeight: 600, border: "1px solid var(--accent-border)",
          }}>{initials}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{username}</div>
            <div style={{ fontSize: 10.5, color: "var(--fg-muted)", fontFamily: "var(--font-mono)", letterSpacing: "0.04em" }}>{role || 'user'}</div>
          </div>
        </div>
      )}
    </aside>
  );
}

function SidebarItem({ item, active, onClick, collapsed }) {
  const [hover, setHover] = useState_nav(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", alignItems: "center", gap: 10,
        padding: collapsed ? "8px 0" : "7px 10px",
        justifyContent: collapsed ? "center" : "flex-start",
        borderRadius: "var(--r-sm)",
        cursor: "pointer",
        fontSize: 12.5,
        fontWeight: active ? 500 : 400,
        background: active ? "var(--surface)" : hover ? "var(--bg-sunken)" : "transparent",
        border: active ? "1px solid var(--border-strong)" : "1px solid transparent",
        color: active ? "var(--fg)" : "var(--fg-muted)",
        position: "relative",
      }}
    >
      {active && !collapsed && <div style={{ position: "absolute", left: -10, top: 6, bottom: 6, width: 2, background: "var(--fg)", borderRadius: 2 }} />}
      {item.icon}
      {!collapsed && <span style={{ flex: 1 }}>{item.label}</span>}
      {!collapsed && item.badge && (
        <span className="mono" style={{
          fontSize: 9, padding: "1px 5px", border: "1px solid var(--border-strong)",
          borderRadius: 2, color: "var(--fg-muted)", letterSpacing: "0.04em",
        }}>{item.badge}</span>
      )}
    </div>
  );
}

function TopBar({ breadcrumb, right }) {
  return (
    <div style={{
      height: 56, borderBottom: "1px solid var(--border)",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "0 20px", background: "var(--bg)",
      flexShrink: 0,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        {breadcrumb}
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        {right}
      </div>
    </div>
  );
}

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