'use client'

import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'
import {
  LayoutDashboard,
  Car,
  Calendar,
  Globe,
  Users,
  Tag,
  UserPlus,
  BarChart2,
  CreditCard,
  Bell,
  Settings,
  LogOut,
} from 'lucide-react'
import { useDashboardI18n } from '@/components/I18nProvider'
import { marketplaceUrl } from '@/lib/urls'
import { EMPLOYEE_TOKEN_KEY } from '@/lib/api'

const NAV_ITEMS = [
  { href: '/dashboard', key: 'dashboard', icon: LayoutDashboard, exact: true },
  { href: '/dashboard/fleet', key: 'fleet', icon: Car },
  { href: '/dashboard/reservations', key: 'reservations', icon: Calendar },
  { href: '/dashboard/online-reservations', key: 'onlineReservations', icon: Globe },
  { href: '/dashboard/customers', key: 'customers', icon: Users },
  { href: '/dashboard/offers', key: 'offers', icon: Tag },
  { href: '/dashboard/team', key: 'team', icon: UserPlus },
  { href: '/dashboard/reports', key: 'reports', icon: BarChart2 },
  { href: '/dashboard/billing', key: 'billing', icon: CreditCard },
  { href: '/dashboard/notifications', key: 'notifications', icon: Bell },
  { href: '/dashboard/settings', key: 'settings', icon: Settings },
] as const

export default function Sidebar() {
  const { dict } = useDashboardI18n()
  const pathname = usePathname()
  const router = useRouter()

  const isActive = (item: typeof NAV_ITEMS[number]) => {
    if ('exact' in item && item.exact) return pathname === item.href
    return pathname.startsWith(item.href)
  }

  function signOut() {
    localStorage.removeItem(EMPLOYEE_TOKEN_KEY)
    document.cookie = 'employee_token=; path=/; max-age=0; samesite=lax'
    router.push('/sign-in')
  }

  return (
    <aside className="fixed inset-y-0 left-0 z-40 flex w-64 flex-col bg-slate-900">
      <Link href={marketplaceUrl} className="flex items-center gap-3 border-b border-slate-800 px-6 py-5">
        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-500">
          <Car className="h-4 w-4 text-white" />
        </div>
        <span className="text-sm font-bold tracking-wide text-white">RentalDriveGo</span>
      </Link>

      <nav className="flex-1 space-y-0.5 overflow-y-auto px-3 py-4">
        {NAV_ITEMS.map((item) => {
          const Icon = item.icon
          const active = isActive(item)
          return (
            <Link
              key={item.href}
              href={item.href}
              className={[
                'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
                active ? 'bg-blue-600 text-white' : 'text-slate-400 hover:bg-slate-800 hover:text-white',
              ].join(' ')}
            >
              <Icon className="h-4 w-4 flex-shrink-0" />
              {dict.nav[item.key]}
            </Link>
          )
        })}
      </nav>

      <div className="border-t border-slate-800 px-3 py-4">
        <div className="flex items-center gap-3 rounded-lg px-3 py-2">
          <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-xs font-semibold text-white">
            W
          </div>
          <div className="min-w-0 flex-1">
            <p className="truncate text-sm font-medium text-white">{dict.workspaceUser}</p>
            <p className="truncate text-xs text-slate-400">{dict.localAuth}</p>
          </div>
        </div>
        <button
          onClick={signOut}
          className="mt-2 flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-400 transition-colors hover:bg-slate-800 hover:text-white"
        >
          <LogOut className="h-4 w-4" />
          {dict.signOut}
        </button>
      </div>
    </aside>
  )
}
