import { Briefcase, Bot, Crown, FileText, Gamepad2, LayoutGrid, MessageCircle, Radar, Sparkles } from 'lucide-react';
import type { ComponentType } from 'react';

interface DashboardSidebarProps {
  active?: DashboardNavKey;
  onNavigate?: (target: DashboardNavKey) => void;
}

export type DashboardNavKey = 'dashboard' | 'jobs' | 'cv' | 'messages' | 'agents' | 'ai-agent' | 'simulator' | 'subscription';

interface NavItem {
  accent?: boolean;
  badge?: string;
  dot?: boolean;
  icon: ComponentType<{ size?: number; strokeWidth?: number }>;
  key: DashboardNavKey;
  label: string;
}

const primaryItems: NavItem[] = [
  { key: 'dashboard', label: 'Dashboard', icon: LayoutGrid },
  { key: 'jobs', label: 'Jobs', icon: Briefcase },
  { key: 'cv', label: 'CV', icon: FileText },
  { key: 'messages', label: 'Beskeder', icon: MessageCircle, badge: '3' },
];

const secondaryItems: NavItem[] = [
  { key: 'agents', label: 'Jobagenter', icon: Radar, dot: true },
  { key: 'ai-agent', label: 'AI-agent', icon: Bot, accent: true },
  { key: 'simulator', label: 'Simulator', icon: Gamepad2 },
  { key: 'subscription', label: 'Abonnement', icon: Crown },
];

export function DashboardSidebar({ active = 'dashboard', onNavigate }: DashboardSidebarProps) {
  return (
    <aside className="dash-sidebar">
      <div className="dash-logo-row">
        <div className="dash-logo-dot">A</div>
        <span className="dash-logo-text">ARBEJD</span>
      </div>

      <nav className="dash-nav">
        {primaryItems.map((item) => {
          const Icon = item.icon;
          const isActive = item.key === active;
          return (
            <button
              key={item.key}
              type="button"
              className={isActive ? 'dash-nav-item active' : 'dash-nav-item'}
              onClick={() => onNavigate?.(item.key)}
            >
              <span className={item.accent ? 'dash-nav-icon accent' : 'dash-nav-icon'}>
                <Icon size={19} strokeWidth={1.7} />
              </span>
              <span className="dash-nav-label">{item.label}</span>
              {item.badge ? <span className="dash-nav-badge">{item.badge}</span> : null}
            </button>
          );
        })}

        <div className="dash-nav-divider" />

        {secondaryItems.map((item) => {
          const Icon = item.icon;
          const isActive = item.key === active;
          return (
            <button
              key={item.key}
              type="button"
              className={isActive ? 'dash-nav-item active' : 'dash-nav-item'}
              onClick={() => onNavigate?.(item.key)}
            >
              <span className={item.accent ? 'dash-nav-icon accent' : 'dash-nav-icon'}>
                <Icon size={19} strokeWidth={1.7} />
              </span>
              <span className="dash-nav-label">{item.label}</span>
              {item.dot ? <span className="dash-nav-dot" /> : null}
            </button>
          );
        })}
      </nav>

      <div className="dash-sidebar-pro">
        <div className="dash-sidebar-pro-glow" />
        <Sparkles size={19} strokeWidth={1.8} />
        <h4>Pro-medlemskab</h4>
        <p>Faa ubegrænsede simuleringer</p>
      </div>
    </aside>
  );
}