import { NavLink, Outlet, Link } from 'react-router-dom'
import { Grid, Cog, User, Comment, Home, Fire, ChevronLeft } from '../components/icons'

const nav = [
  { to: '/admin', label: 'Dashboard', icon: Grid, end: true },
  { to: '/admin/videos', label: 'Videos', icon: Fire },
  { to: '/admin/categories', label: 'Categories', icon: Grid },
  { to: '/admin/ads', label: 'Ads Manager', icon: Comment },
  { to: '/admin/users', label: 'Users', icon: User },
  { to: '/admin/comments', label: 'Comments', icon: Comment },
  { to: '/admin/settings', label: 'Settings', icon: Cog },
]

export default function AdminLayout() {
  return (
    <div className="mx-auto flex max-w-7xl gap-6 px-3 py-4 sm:px-4">
      <aside className="sticky top-16 hidden h-fit w-56 shrink-0 space-y-1 md:block">
        <Link
          to="/"
          className="mb-2 flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800"
        >
          <ChevronLeft width={16} height={16} /> Back to site
        </Link>
        {nav.map((n) => (
          <NavLink
            key={n.to}
            to={n.to}
            end={n.end}
            className={({ isActive }) =>
              `flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition ${
                isActive
                  ? 'bg-[var(--brand)] text-white'
                  : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
              }`
            }
          >
            <n.icon width={18} height={18} /> {n.label}
          </NavLink>
        ))}
      </aside>

      <div className="min-w-0 flex-1">
        {/* Mobile nav */}
        <div className="no-scrollbar mb-4 flex gap-2 overflow-x-auto md:hidden">
          {nav.map((n) => (
            <NavLink
              key={n.to}
              to={n.to}
              end={n.end}
              className={({ isActive }) =>
                `shrink-0 rounded-full px-3 py-1.5 text-sm font-medium ${
                  isActive
                    ? 'bg-[var(--brand)] text-white'
                    : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300'
                }`
              }
            >
              {n.label}
            </NavLink>
          ))}
        </div>
        <Outlet />
      </div>
    </div>
  )
}
