import { NavLink, Outlet } from 'react-router-dom';
import { LayoutDashboard, Users, ShoppingBag, Flag, Shield, CreditCard, Settings, Home, CalendarCheck, DollarSign } from 'lucide-react';
import { useAuth } from '../../context/AuthContext';

const navItems = [
  { to: '/admin', icon: LayoutDashboard, label: 'Dashboard', end: true },
  { to: '/admin/users', icon: Users, label: 'Users' },
  { to: '/admin/listings', icon: ShoppingBag, label: 'Listings' },
  { to: '/admin/reports', icon: Flag, label: 'Reports' },
  { to: '/admin/moderation', icon: Shield, label: 'Moderation' },
  { to: '/admin/payments', icon: CreditCard, label: 'Payments' },
  { to: '/admin/rentals', icon: Home, label: 'Rentals' },
  { to: '/admin/bookings', icon: CalendarCheck, label: 'Bookings' },
  { to: '/admin/rental-payouts', icon: DollarSign, label: 'Rental Payouts' },
  { to: '/admin/settings', icon: Settings, label: 'Settings' },
];

export function AdminLayout() {
  const { isAdmin } = useAuth();

  return (
    <div className="flex min-h-[calc(100vh-4rem)]">
      <aside className="w-64 bg-gray-900 text-white p-4 hidden md:block">
        <h2 className="text-lg font-bold mb-6 px-3">Admin Panel</h2>
        <nav className="space-y-1">
          {navItems.map(({ to, icon: Icon, label, end }) => {
            if ((label === 'Payments' || label === 'Settings') && !isAdmin) return null;
            return (
              <NavLink
                key={to}
                to={to}
                end={end}
                className={({ isActive }) =>
                  `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                    isActive ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-800 hover:text-white'
                  }`
                }
              >
                <Icon className="w-5 h-5" />
                {label}
              </NavLink>
            );
          })}
        </nav>
      </aside>
      <main className="flex-1 bg-gray-50 p-6 overflow-auto">
        <Outlet />
      </main>
    </div>
  );
}
