import { NavLink } from "react-router-dom";
import type { ComponentType, SVGProps } from "react";
import {
  CodesIcon,
  MachinesIcon,
  SessionsIcon,
  UsersIcon,
} from "./icons";

interface NavItem {
  to: string;
  label: string;
  Icon: ComponentType<SVGProps<SVGSVGElement>>;
  /** Pass-1 stubs are disabled until their views land in later passes. */
  enabled: boolean;
}

const NAV: NavItem[] = [
  { to: "/machines", label: "Machines", Icon: MachinesIcon, enabled: true },
  { to: "/sessions", label: "Sessions", Icon: SessionsIcon, enabled: true },
  { to: "/codes", label: "Codes", Icon: CodesIcon, enabled: true },
  { to: "/users", label: "Users", Icon: UsersIcon, enabled: false },
];

export function Sidebar() {
  return (
    <aside className="sidebar">
      <div className="sidebar__brand">
        <span className="sidebar__logo" aria-hidden="true">
          GC
        </span>
        <span className="sidebar__name">
          GuruConnect
          <small>Operator Console</small>
        </span>
      </div>
      <nav className="sidebar__nav" aria-label="Primary">
        <span className="sidebar__section">Operations</span>
        {NAV.map(({ to, label, Icon, enabled }) =>
          enabled ? (
            <NavLink
              key={to}
              to={to}
              className={({ isActive }) =>
                `navlink${isActive ? " navlink--active" : ""}`
              }
            >
              <span className="navlink__icon">
                <Icon />
              </span>
              {label}
            </NavLink>
          ) : (
            <span
              key={to}
              className="navlink navlink--disabled"
              aria-disabled="true"
              title={`${label} — coming in a later pass`}
            >
              <span className="navlink__icon">
                <Icon />
              </span>
              {label}
              <span className="navlink__soon">Soon</span>
            </span>
          ),
        )}
      </nav>
    </aside>
  );
}