import { Link, useLocation } from 'react-router-dom'
import {
  LayoutDashboard,
  Building2,
  Ticket,
  FileText,
  Gauge,
  ToggleLeft,
  Settings,
  FolderTree,
  ClipboardList,
  MessageSquareText,
  LayoutGrid,
  ArrowLeft,
} from 'lucide-react'
import { cn } from '@/lib/utils'

const navItems = [
  { path: '/admin', label: 'Dashboard', icon: LayoutDashboard, end: true },
  { path: '/admin/accounts', label: 'Accounts', icon: Building2 },
  { path: '/admin/invite-codes', label: 'Invite Codes', icon: Ticket },
  { path: '/admin/audit-logs', label: 'Audit Logs', icon: FileText },
  { path: '/admin/plan-limits', label: 'Plan Limits', icon: Gauge },
  { path: '/admin/feature-flags', label: 'Feature Flags', icon: ToggleLeft },
  { path: '/admin/settings', label: 'Settings', icon: Settings },
  { path: '/admin/categories', label: 'Categories', icon: FolderTree },
  { path: '/admin/survey-invites', label: 'Survey Invites', icon: ClipboardList },
  { path: '/admin/survey-responses', label: 'Survey Responses', icon: MessageSquareText },
  { path: '/admin/gallery', label: 'Gallery', icon: LayoutGrid },
]

interface AdminSidebarProps {
  className?: string
  onNavigate?: () => void
}

export function AdminSidebar({ className, onNavigate }: AdminSidebarProps) {
  const location = useLocation()

  const isActive = (path: string, end?: boolean) => {
    if (end) return location.pathname === path
    return location.pathname.startsWith(path)
  }

  return (
    <aside className={cn('flex h-full flex-col', className)}>
      <div className="p-4">
        <h2 className="text-lg font-bold text-foreground">Admin Panel</h2>
      </div>
      <nav className="flex-1 space-y-1 px-3">
        {navItems.map((item) => (
          <Link
            key={item.path}
            to={item.path}
            onClick={onNavigate}
            className={cn(
              'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
              isActive(item.path, item.end)
                ? 'bg-accent text-foreground'
                : 'text-muted-foreground hover:bg-accent hover:text-foreground'
            )}
          >
            <item.icon className="h-4 w-4" />
            {item.label}
          </Link>
        ))}
      </nav>
      <div className="border-t border-border p-3">
        <Link
          to="/trees"
          onClick={onNavigate}
          className={cn(
            'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium',
            'text-muted-foreground hover:bg-accent hover:text-foreground'
          )}
        >
          <ArrowLeft className="h-4 w-4" />
          Back to App
        </Link>
      </div>
    </aside>
  )
}

export default AdminSidebar