'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import {
  Monitor,
  LayoutDashboard,
  Laptop,
  History,
  Settings,
  Download,
  Link2,
  ShieldCheck,
  X
} from 'lucide-react'

interface Profile {
  fullName: string | null
  company: string | null
  role: string | null
}

interface MobileNavProps {
  open: boolean
  onClose: () => void
  profile: Profile | null
}

const navItems = [
  { href: '/dashboard', icon: LayoutDashboard, label: 'Overview' },
  { href: '/dashboard/machines', icon: Laptop, label: 'Machines' },
  { href: '/dashboard/connect', icon: Link2, label: 'Quick Connect' },
  { href: '/dashboard/sessions', icon: History, label: 'Sessions' },
  { href: '/download', icon: Download, label: 'Download Agent' },
  { href: '/dashboard/settings', icon: Settings, label: 'Settings' },
]

const adminNavItems = [
  { href: '/dashboard/admin', icon: ShieldCheck, label: 'Admin' },
]

export function MobileNav({ open, onClose, profile }: MobileNavProps) {
  const pathname = usePathname()
  const isAdmin = profile?.role === 'admin'
  const allNavItems = isAdmin ? [...navItems, ...adminNavItems] : navItems

  if (!open) return null

  return (
    <>
      <div
        className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm lg:hidden"
        onClick={onClose}
      />

      <div className="fixed inset-y-0 left-0 z-50 w-72 bg-sidebar border-r border-sidebar-border lg:hidden">
        <div className="flex h-16 items-center justify-between px-6 border-b border-sidebar-border">
          <div className="flex items-center gap-2">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
              <Monitor className="h-4 w-4 text-primary-foreground" />
            </div>
            <span className="font-bold text-sidebar-foreground">RemoteLink</span>
          </div>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="h-5 w-5" />
            <span className="sr-only">Close menu</span>
          </Button>
        </div>

        <nav className="flex-1 p-4 space-y-1">
          {allNavItems.map((item) => {
            const isActive =
              pathname === item.href ||
              (item.href !== '/dashboard' && pathname.startsWith(item.href))

            return (
              <Link
                key={item.href}
                href={item.href}
                onClick={onClose}
                className={cn(
                  'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-sidebar-accent text-sidebar-accent-foreground'
                    : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'
                )}
              >
                <item.icon className="h-4 w-4" />
                {item.label}
              </Link>
            )
          })}
        </nav>

        <div className="p-4 border-t border-sidebar-border">
          <div className="flex items-center gap-3 px-3 py-2">
            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-sidebar-accent text-sm font-medium">
              {profile?.fullName?.charAt(0)?.toUpperCase() || 'U'}
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-sidebar-foreground truncate">
                {profile?.fullName || 'User'}
              </p>
              <p className="text-xs text-sidebar-foreground/60 truncate">
                {profile?.company || 'Personal'}
              </p>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}