"use client";

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  UserRound,
  Palette,
  Users,
  Network,
  Brush,
  Compass,
  Cpu,
  Plug,
  KeyRound,
  Wrench,
  Activity,
} from 'lucide-react';

// Apple-style inner rail. Each entry resolves to a nested /settings/<slug>
// route (split in Step 2) or an existing top-level route for surfaces that
// already had their own pages (Organization, Brand, Onboarding, Runtime).
const RAIL_GROUPS = [
  {
    label: 'General',
    items: [
      { id: 'account',     name: 'Account',          icon: UserRound, href: '/settings/account' },
      { id: 'appearance',  name: 'Appearance',       icon: Palette,   href: '/settings/appearance' },
    ],
  },
  {
    label: 'Identity',
    items: [
      { id: 'team',        name: 'Team',             icon: Users,             href: '/settings/team' },
      { id: 'organization',name: 'Agent chart',      icon: Network,           href: '/settings/organization' },
      { id: 'brand',       name: 'Brand templates',  icon: Brush,             href: '/settings/brand' },
      { id: 'onboarding',  name: 'Onboarding',       icon: Compass,           href: '/settings/onboarding' },
    ],
  },
  {
    label: 'Agent runtime',
    items: [
      { id: 'engines',     name: 'Engines',          icon: Cpu,               href: '/settings/engines' },
      { id: 'connectors',  name: 'Connectors',       icon: Plug,              href: '/settings/connectors' },
      { id: 'tools',       name: 'Tools & secrets',  icon: KeyRound,          href: '/settings/tools' },
    ],
  },
  {
    label: 'Advanced',
    items: [
      { id: 'advanced',    name: 'Advanced',           icon: Wrench,   href: '/settings/advanced' },
      { id: 'runtime',     name: 'Runtime diagnostics',icon: Activity, href: '/settings/runtime' },
    ],
  },
];

function isItemActive(item, pathname) {
  if (!item.href) return false;
  if (item.href === pathname) return true;
  return pathname.startsWith(`${item.href}/`);
}

export default function SettingsRail() {
  const pathname = usePathname() || '/settings';

  return (
    <nav className="settings-rail" aria-label="Settings sections">
      <div className="settings-rail-head">
        <span className="settings-rail-title">Settings</span>
        <small className="settings-rail-sub">madarX OS v1.0</small>
      </div>
      <ul className="settings-rail-list">
        {RAIL_GROUPS.map((group, gi) => (
          <li key={group.label} className="settings-rail-group">
            {gi > 0 ? <hr className="settings-rail-divider" aria-hidden="true" /> : null}
            <span className="settings-rail-group-label">{group.label}</span>
            <ul className="settings-rail-sublist">
              {group.items.map((item) => {
                const Icon = item.icon;
                const active = !item.stub && isItemActive(item, pathname);
                if (item.stub) {
                  return (
                    <li key={item.id}>
                      <span
                        className="settings-rail-item"
                        data-stub="true"
                        aria-disabled="true"
                        title="Coming soon"
                      >
                        <Icon className="settings-rail-icon" strokeWidth={1.75} aria-hidden="true" />
                        <span className="settings-rail-label">{item.name}</span>
                        <span className="settings-rail-tag">soon</span>
                      </span>
                    </li>
                  );
                }
                return (
                  <li key={item.id}>
                    <Link
                      href={item.href}
                      prefetch
                      className="settings-rail-item"
                      data-active={active ? 'true' : undefined}
                      aria-current={active ? 'page' : undefined}
                    >
                      <Icon className="settings-rail-icon" strokeWidth={1.75} aria-hidden="true" />
                      <span className="settings-rail-label">{item.name}</span>
                    </Link>
                  </li>
                );
              })}
            </ul>
          </li>
        ))}
      </ul>
    </nav>
  );
}
