import { A, useLocation } from '@solidjs/router';

const links = [
  { href: '/admin/runtime-roles/new', label: 'Create Role' },
  { href: '/admin/runtime-roles', label: 'Manage Roles' },
  { href: '/admin/role-ui-configs/new', label: 'Create Dashboard' },
  { href: '/admin/role-ui-configs', label: 'Manage Dashboards' },
  { href: '/admin/onboarding-schemas/new', label: 'Create Onboarding Flow' },
  { href: '/admin/onboarding-schemas', label: 'Manage Onboarding Flows' },
];

export default function AdminSidebar() {
  const location = useLocation();

  return (
    <aside class="sidebar">
      <div class="brand">
        <img src="/nxtgauge-logo.png" alt="NXTGAUGE" />
      </div>
      {links.map((item) => {
        const isActive =
          location.pathname === item.href ||
          (item.href !== '/admin/runtime-roles' &&
            item.href !== '/admin/role-ui-configs' &&
            item.href !== '/admin/onboarding-schemas' &&
            location.pathname.startsWith(item.href.replace('/new', '')));

        return (
          <A href={item.href} class={`nav-item ${isActive ? 'active' : ''}`}>
            {item.label}
          </A>
        );
      })}
      <p class="notice">Same UI flow, simpler builder experience.</p>
    </aside>
  );
}