import { NavLink, Outlet, useNavigate } from 'react-router-dom';
import { MessageSquare, Tag, ShoppingBag, Settings, List, Heart, LogOut, CalendarCheck, Home } from 'lucide-react';
import { useAuth } from '../../context/AuthContext';

const navItems = [
  { to: '/dashboard/offers', icon: Tag, label: 'Offers' },
  { to: '/dashboard/sold', icon: ShoppingBag, label: 'Sold Items' },
  { to: '/dashboard/listings', icon: List, label: 'My Listings' },
  { to: '/dashboard/saved', icon: Heart, label: 'Saved Items' },
  { to: '/dashboard/bookings', icon: CalendarCheck, label: 'My Bookings' },
  { to: '/dashboard/saved-rentals', icon: Home, label: 'Saved Rentals' },
  { to: '/dashboard/messages', icon: MessageSquare, label: 'My Messages' },
  { to: '/dashboard/settings', icon: Settings, label: 'Settings' },
];

export function DashboardLayout() {
  const { logout } = useAuth();
  const navigate = useNavigate();

  const handleLogout = () => {
    logout();
    navigate('/');
  };

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
      <div className="flex gap-8">
        {/* Sidebar */}
        <aside className="hidden md:block w-56 flex-shrink-0">
          <nav className="bg-gradient-to-b from-purple-100 via-purple-50 to-pink-50 rounded-2xl p-3 sticky top-24 shadow-sm">
            {navItems.map(({ to, icon: Icon, label }) => (
              <NavLink key={to} to={to}
                className={({ isActive }) => `flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-colors ${isActive ? 'bg-white/70 text-primary-700 shadow-sm' : 'text-purple-700/70 hover:bg-white/40'}`}>
                <Icon className="w-4 h-4" />
                {label}
              </NavLink>
            ))}
            <hr className="my-2 border-purple-200/50" />
            <button
              onClick={handleLogout}
              className="flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-colors text-purple-700/70 hover:bg-white/40 w-full cursor-pointer"
            >
              <LogOut className="w-4 h-4" />
              Logout
            </button>
          </nav>
        </aside>

        {/* Content */}
        <main className="flex-1 min-w-0">
          <Outlet />
        </main>
      </div>
    </div>
  );
}
