'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { clsx } from 'clsx'
import { LayoutDashboard, Users, Newspaper, Calendar, GraduationCap, Settings } from 'lucide-react'

const navItems = [
  { href: '/dashboard', label: 'Übersicht', icon: LayoutDashboard },
  { href: '/dashboard/mitglieder', label: 'Mitglieder', icon: Users },
  { href: '/dashboard/news', label: 'News', icon: Newspaper },
  { href: '/dashboard/termine', label: 'Termine', icon: Calendar },
  { href: '/dashboard/stellen', label: 'Lehrlingsbörse', icon: GraduationCap },
  { href: '/dashboard/einstellungen', label: 'Einstellungen', icon: Settings },
]

export function Sidebar({ orgName, logoUrl }: { orgName?: string; logoUrl?: string | null }) {
  const pathname = usePathname()

  return (
    <aside className="w-64 bg-white border-r flex flex-col flex-shrink-0">
      {/* Logo */}
      <div className="px-6 py-5 border-b flex items-center gap-3">
        <Link href="/dashboard" className="flex items-center gap-3 w-full">
          {logoUrl ? (
            <img src={logoUrl} alt={orgName || 'Logo'} className="h-8 max-w-[120px] object-contain" />
          ) : (
            <span
              className="text-xl font-bold text-gray-900 tracking-tight leading-tight line-clamp-2"
              style={{ fontFamily: "'Syne', system-ui, sans-serif" }}
            >
              {orgName || <span>Innungs<span className="text-brand-500">App</span></span>}
            </span>
          )}
        </Link>
      </div>

      {/* Navigation */}
      <nav className="flex-1 p-3 space-y-0.5">
        {navItems.map((item) => {
          const isActive =
            item.href === '/dashboard'
              ? pathname === '/dashboard'
              : pathname.startsWith(item.href)
          const Icon = item.icon

          return (
            <Link
              key={item.href}
              href={item.href}
              className={clsx('sidebar-link', isActive && 'sidebar-link-active')}
            >
              <Icon size={16} className="flex-shrink-0" />
              <span>{item.label}</span>
            </Link>
          )
        })}
      </nav>
    </aside>
  )
}
