// CardByte Enterprise — left navigation rail (deep navy).
const React = window.React;
const Icon = window.CBIcon;

const NAV = [
  { id: "dashboard", label: "Dashboard", icon: "dashboard" },
  { id: "contacts", label: "Contacts", icon: "contacts" },
  { id: "mycard", label: "My Card", icon: "card" },
  { id: "team", label: "My Team", icon: "team" },
  { id: "actions", label: "Actions", icon: "actions" },
  { id: "calendar", label: "Calendar", icon: "calendar" },
  { id: "preferences", label: "App Preferences", icon: "settings" },
];

function Sidebar({ active, onNavigate, onQuickCreate }) {
  const A = "../../assets/";
  const [hovered, setHovered] = React.useState(null);
  return (
    <aside
      style={{
        width: 248,
        flex: "0 0 248px",
        background: "var(--cb-navy)",
        color: "#fff",
        display: "flex",
        flexDirection: "column",
        padding: "22px 16px",
        boxSizing: "border-box",
      }}
    >
      <div style={{ padding: "4px 8px 22px" }}>
        <img src={A + "logo-full.svg"} alt="CardByte" style={{ height: 26, filter: "brightness(0) invert(1)" }} />
      </div>

      <nav style={{ display: "flex", flexDirection: "column", gap: 4, flex: 1 }}>
        {NAV.map((n) => {
          const on = n.id === active;
          const hot = !on && hovered === n.id;
          return (
            <button
              key={n.id}
              onClick={() => onNavigate(n.id)}
              onMouseEnter={() => setHovered(n.id)}
              onMouseLeave={() => setHovered((h) => (h === n.id ? null : h))}
              style={{
                display: "flex",
                alignItems: "center",
                gap: 12,
                padding: "11px 12px",
                borderRadius: "var(--radius-md)",
                border: "none",
                cursor: "pointer",
                textAlign: "left",
                fontFamily: "var(--font-sans)",
                fontSize: 14.5,
                fontWeight: on ? 600 : 500,
                color: on ? "#fff" : "rgba(255,255,255,0.72)",
                background: on ? "var(--cb-blue)" : hot ? "rgba(255,255,255,0.07)" : "transparent",
                boxShadow: on ? "0 6px 16px rgba(18,75,200,.45)" : "none",
              }}
            >
              <Icon name={n.icon} size={19} />
              {n.label}
            </button>
          );
        })}
      </nav>

      <button
        onClick={onQuickCreate}
        style={{
          display: "flex", alignItems: "center", justifyContent: "center", gap: 9,
          padding: "12px", marginTop: 10,
          borderRadius: "var(--radius-pill)",
          border: "1.5px solid rgba(255,255,255,0.28)",
          background: "rgba(255,255,255,0.06)",
          color: "#fff", cursor: "pointer",
          fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 600,
        }}
      >
        <Icon name="plus" size={18} /> Quick Create
      </button>
      <div style={{ display: "flex", alignItems: "center", gap: 6, justifyContent: "center", marginTop: 16, opacity: 0.6, fontSize: 11.5 }}>
        Powered by <img src={A + "logo-full.svg"} style={{ height: 13, filter: "brightness(0) invert(1)" }} />
      </div>
    </aside>
  );
}
window.CBSidebar = Sidebar;