'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { 
  Search, 
  Users, 
  Settings, 
  Zap,
  LayoutGrid,
  Activity,
  CreditCard,
  X
} from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

export function DashboardNav({ onClose }: { onClose?: () => void }) {
  const pathname = usePathname();

  const navItems = [
    { name: 'Dashboard', href: '/dashboard', icon: LayoutGrid },
    { name: 'Scraper', href: '/dashboard/scan', icon: Search },
    { name: 'Leads', href: '/dashboard/leads', icon: Users },
    { name: 'Activity', href: '/dashboard/logs', icon: Activity },
    { name: 'Settings', href: '/dashboard/settings', icon: Settings },
  ];

  return (
    <nav className="w-[260px] h-screen bg-white border-r border-[#f0f0f0] flex flex-col shrink-0 z-50 overflow-hidden font-sans">
      {/* Brand Header */}
      <div className="p-8 lg:p-10 pb-12 flex items-center justify-between">
        <Link href="/" className="flex items-center gap-2 group">
          <div className="h-6 w-6 rounded bg-black flex items-center justify-center">
            <div className="h-2 w-2 rounded-full bg-white animate-pulse" />
          </div>
          <span className="text-[22px] font-medium tracking-tight text-slate-900 leading-none">LeadForge</span>
        </Link>
        
        {/* Mobile Close Button */}
        {onClose && (
          <button 
            onClick={onClose}
            className="lg:hidden p-2 rounded-full hover:bg-slate-50 text-slate-400 hover:text-slate-900 transition-all"
          >
            <X className="w-5 h-5" />
          </button>
        )}
      </div>

      {/* Navigation Links */}
      <div className="flex-1 px-8 space-y-1">
        {navItems.map((item) => {
          const isActive = pathname === item.href;
          return (
            <Link 
              key={item.name} 
              href={item.href}
              onClick={() => onClose?.()}
              className={`
                group relative flex items-center gap-3 py-3 rounded-full text-[14px] font-medium transition-all duration-300
                ${isActive ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'}
              `}
            >
              <item.icon className="w-4 h-4" />
              <span className="relative z-10 transition-transform group-hover:translate-x-1 duration-300">
                {item.name}
              </span>
              
              {isActive && (
                <motion.div 
                  layoutId="sidebar-active"
                  className="absolute -left-1 w-1 h-3 bg-black rounded-full"
                  transition={{ type: "spring", stiffness: 300, damping: 30 }}
                />
              )}
            </Link>
          );
        })}
      </div>

      {/* Bottom Profile Section */}
      <div className="p-8 border-t border-[#f0f0f0]">
        <div className="flex flex-col gap-6">
          <div className="flex items-center gap-3">
            <div className="h-9 w-9 rounded-full bg-slate-50 border border-slate-100 flex items-center justify-center overflow-hidden">
               <img src="https://i.pravatar.cc/150?u=9" alt="User" className="w-full h-full object-cover" />
            </div>
            <div>
              <p className="text-[14px] font-semibold text-slate-900 leading-none">JDoe</p>
              <p className="text-[12px] text-slate-400 mt-1 uppercase tracking-widest font-bold">Pro Plan</p>
            </div>
          </div>
          
          <Link href="/dashboard/settings" className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-[#fcfcfc] border border-slate-100 text-slate-900 hover:bg-slate-50 rounded-full text-[13px] font-bold transition-all shadow-sm active:scale-[0.98]">
            <CreditCard className="w-4 h-4" />
            Plans
          </Link>
        </div>
      </div>
    </nav>
  );
}
