import React, { type ReactNode } from 'react';
import { useAuth } from './AdminAuth';

const navItems = [
  { href: '/admin', label: 'Dashboard', icon: 'D' },
  { href: '/admin/homepage', label: 'Homepage', icon: '🏠' },
  { href: '/admin/feeds', label: 'Feeds', icon: '📡' },
  { href: '/admin/products', label: 'Products', icon: 'P' },
  { href: '/admin/collections', label: 'Collections', icon: 'T' },
  { href: '/admin/analytics', label: 'Analytics', icon: 'A' },
];

function NavLink({ href, label, icon }: { href: string; label: string; icon: string }) {
  const active = typeof window !== 'undefined' && window.location.pathname === href;
  return (
    <a href={href}
      className={`flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm transition-colors
        ${active ? 'bg-[#00FF6A]/10 text-[#00FF6A]' : 'text-[#999] hover:text-[#F5F5F5] hover:bg-[#1A1A1A]'}`}
    >
      <span className="text-base">{icon}</span>
      <span>{label}</span>
    </a>
  );
}

export default function AdminLayout({ children, title }: { children: ReactNode; title: string }) {
  const { user, logout } = useAuth();

  return (
    <div className="flex min-h-screen bg-[#0A0A0A]">
      {/* Sidebar */}
      <aside className="w-60 border-r border-[#333] flex flex-col">
        <div className="p-4 border-b border-[#333]">
          <a href="/admin" className="flex items-center gap-2">
            <span className="text-[#00FF6A] font-bold text-lg font-[var(--font-display)]">SneakerPicks</span>
            <span className="text-xs text-[#666] bg-[#1A1A1A] px-2 py-0.5 rounded">Admin</span>
          </a>
        </div>
        <nav className="flex-1 p-3 space-y-1">
          {navItems.map(item => <NavLink key={item.href} {...item} />)}
        </nav>
        <div className="p-4 border-t border-[#333]">
          <div className="text-xs text-[#666] mb-2">{user?.email}</div>
          <button onClick={logout} className="text-xs text-[#999] hover:text-[#FF3B3B] transition-colors">
            Uitloggen
          </button>
        </div>
      </aside>

      {/* Main */}
      <main className="flex-1 overflow-auto">
        <header className="border-b border-[#333] px-8 py-4">
          <h1 className="text-xl font-semibold text-[#F5F5F5]">{title}</h1>
        </header>
        <div className="p-8">
          {children}
        </div>
      </main>
    </div>
  );
}