'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { LayoutDashboard, Users, Brain, Settings } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useLanguage } from '@/lib/i18n'

export interface AdminSidebarProps {
  className?: string
}

export interface NavItem {
  titleKey: string
  href: string
  icon: React.ReactNode
}

const navItems: NavItem[] = [
  {
    titleKey: 'admin.sidebar.dashboard',
    href: '/admin',
    icon: <LayoutDashboard className="h-5 w-5" />,
  },
  {
    titleKey: 'admin.sidebar.users',
    href: '/admin/users',
    icon: <Users className="h-5 w-5" />,
  },
  {
    titleKey: 'admin.sidebar.aiManagement',
    href: '/admin/ai',
    icon: <Brain className="h-5 w-5" />,
  },
  {
    titleKey: 'admin.sidebar.settings',
    href: '/admin/settings',
    icon: <Settings className="h-5 w-5" />,
  },
]

export function AdminSidebar({ className }: AdminSidebarProps) {
  const pathname = usePathname()
  const { t } = useLanguage()

  return (
    <aside
      className={cn(
        'w-64 bg-white dark:bg-zinc-900 border-r border-gray-200 dark:border-gray-800 p-4',
        className
      )}
    >
      <nav className="space-y-1">
        {navItems.map((item) => {
          const isActive = pathname === item.href || (item.href !== '/admin' && pathname?.startsWith(item.href))

          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                'flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors',
                'hover:bg-gray-100 dark:hover:bg-zinc-800',
                isActive
                  ? 'bg-gray-100 dark:bg-zinc-800 text-gray-900 dark:text-white font-semibold'
                  : 'text-gray-600 dark:text-gray-400'
              )}
            >
              {item.icon}
              <span>{t(item.titleKey)}</span>
            </Link>
          )
        })}
      </nav>
    </aside>
  )
}