'use client'

import { usePathname } from 'next/navigation'
import Link from 'next/link'
import { motion } from 'framer-motion'
import { Home, CalendarPlus, KeyRound, Clock, User, Shield } from 'lucide-react'
import { cn } from '@/lib/utils'

const links = [
  { href: '/', label: 'Accueil', icon: Home },
  { href: '/reserver', label: 'Réserver', icon: CalendarPlus },
  { href: '/acces', label: 'Mon accès', icon: KeyRound },
  { href: '/historique', label: 'Historique', icon: Clock },
]

export default function DesktopNav() {
  const pathname = usePathname()

  return (
    <header className="hidden md:block fixed top-0 left-0 right-0 z-50 glass border-b border-gray-200/50">
      <div className="max-w-6xl mx-auto px-6 flex items-center justify-between h-16">
        <Link href="/" className="flex items-center gap-2">
          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500 to-brand-700 flex items-center justify-center">
            <Shield size={18} className="text-white" />
          </div>
          <span className="text-lg font-bold text-gray-900">
            Smart<span className="text-brand-600">Accès</span>
          </span>
        </Link>

        <nav className="flex items-center gap-1">
          {links.map((link) => {
            const isActive = pathname === link.href ||
              (link.href !== '/' && pathname.startsWith(link.href))
            const Icon = link.icon

            return (
              <Link
                key={link.href}
                href={link.href}
                className={cn(
                  'relative flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-colors',
                  isActive ? 'text-brand-600' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100/50'
                )}
              >
                {isActive && (
                  <motion.div
                    layoutId="desktop-nav-indicator"
                    className="absolute inset-0 bg-brand-50 rounded-xl border border-brand-200/50"
                    transition={{ type: 'spring', stiffness: 400, damping: 30 }}
                  />
                )}
                <Icon size={16} className="relative z-10" />
                <span className="relative z-10">{link.label}</span>
              </Link>
            )
          })}
        </nav>

        <Link
          href="/profil"
          className="flex items-center gap-2 px-3 py-2 rounded-xl text-sm font-medium text-gray-600 hover:bg-gray-100/50 transition-colors"
        >
          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center">
            <User size={14} className="text-white" />
          </div>
          <span>Mon compte</span>
        </Link>
      </div>
    </header>
  )
}