import { NavLink } from 'react-router-dom';
import {
  LayoutDashboard,
  Rss,
  Package,
  LayoutTemplate,
  FolderKanban,
  Mail,
  Users,
  Bell,
  Clock,
  Activity,
  Shield,
  ListChecks,
  Megaphone,
  Calendar,
  Tag,
  Heart,
  AlertTriangle,
} from 'lucide-react';
import { cn } from '../lib/cn';

type NavItem = { to: string; label: string; icon: React.ComponentType<{ className?: string }>; end?: boolean };

type NavGroup = {
  label: string;
  items: NavItem[];
};

const groups: NavGroup[] = [
  {
    label: 'Overzicht',
    items: [{ to: '/cms', label: 'Dashboard', icon: LayoutDashboard, end: true }],
  },
  {
    label: 'Feeds',
    items: [{ to: '/cms/feeds', label: 'Feeds', icon: Rss }],
  },
  {
    label: 'Catalogus',
    items: [
      { to: '/cms/products', label: 'Producten', icon: Package },
      { to: '/cms/collections', label: 'Collecties', icon: FolderKanban },
      { to: '/cms/categories', label: 'Categorieën', icon: Tag },
    ],
  },
  {
    label: 'Content',
    items: [
      { to: '/cms/homepage', label: 'Homepage', icon: LayoutTemplate },
      { to: '/cms/brands', label: 'Merken', icon: Heart },
      { to: '/cms/calendar', label: 'Releasekalender', icon: Calendar },
    ],
  },
  {
    label: 'Marketing',
    items: [
      { to: '/cms/emails', label: 'Emails', icon: Mail },
      { to: '/cms/subscribers', label: 'Subscribers', icon: Users },
      { to: '/cms/push', label: 'Push', icon: Megaphone },
    ],
  },
  {
    label: 'Operaties',
    items: [
      { to: '/cms/jobs', label: 'Jobs', icon: ListChecks },
      { to: '/cms/audit', label: 'Audit log', icon: Shield },
      { to: '/cms/crons', label: 'Crons', icon: Clock },
      { to: '/cms/health', label: 'Health', icon: Activity },
      { to: '/cms/errors', label: 'Errors', icon: AlertTriangle },
      { to: '/cms/notifications', label: 'Meldingen', icon: Bell },
    ],
  },
];

export function Sidebar() {
  return (
    <aside className="w-60 border-r border-[#333] bg-[#0A0A0A] flex flex-col shrink-0">
      <div className="p-4 border-b border-[#333]">
        <a href="/cms" className="flex items-center gap-2">
          <span className="text-[#00FF6A] font-bold text-lg">SneakerPicks</span>
          <span className="text-[10px] text-[#666] bg-[#1A1A1A] px-1.5 py-0.5 rounded uppercase tracking-wide">CMS</span>
        </a>
      </div>
      <nav className="flex-1 overflow-y-auto p-3 space-y-5">
        {groups.map((group) => (
          <div key={group.label}>
            <div className="px-3 mb-1.5 text-[10px] uppercase tracking-wider text-[#666]">{group.label}</div>
            <div className="space-y-0.5">
              {group.items.map((item) => (
                <NavLink
                  key={item.to}
                  to={item.to}
                  end={item.end}
                  className={({ isActive }) =>
                    cn(
                      'flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors',
                      isActive
                        ? 'bg-[#00FF6A]/10 text-[#00FF6A]'
                        : 'text-[#999] hover:text-[#F5F5F5] hover:bg-[#1A1A1A]',
                    )
                  }
                >
                  <item.icon className="h-4 w-4" />
                  <span>{item.label}</span>
                </NavLink>
              ))}
            </div>
          </div>
        ))}
      </nav>
    </aside>
  );
}