'use client';

import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();

  if (pathname === '/admin/login') {
    return <>{children}</>;
  }

  const navItems = [
    { href: '/admin', label: 'Artworks', icon: '🖼' },
    { href: '/admin/events', label: 'Events', icon: '📅' },
    { href: '/admin/services', label: 'Services', icon: '✨' },
  ];

  const handleLogout = async () => {
    await fetch('/api/admin/logout', { method: 'POST' });
    router.push('/admin/login');
  };

  return (
    <div className="min-h-screen bg-gray-50 flex">
      {/* Sidebar */}
      <aside className="w-56 bg-[#2d2d2d] text-white flex flex-col shrink-0">
        <div className="p-5 border-b border-white/10">
          <Link href="/admin" className="text-lg font-light tracking-wider">XHIVA ART</Link>
          <p className="text-xs text-gray-400 mt-1">Admin</p>
        </div>

        <nav className="flex-1 py-4">
          {navItems.map((item) => {
            const isActive = item.href === '/admin'
              ? pathname === '/admin' || pathname === '/admin/artworks'
              : pathname.startsWith(item.href);
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`flex items-center gap-3 px-5 py-3 text-sm transition-colors ${
                  isActive ? 'bg-white/10 text-[#c9a962]' : 'text-gray-300 hover:bg-white/5'
                }`}
              >
                <span>{item.icon}</span>
                {item.label}
              </Link>
            );
          })}
        </nav>

        <div className="p-4 border-t border-white/10 space-y-2">
          <a
            href="/"
            target="_blank"
            className="block text-xs text-gray-400 hover:text-white transition-colors px-1"
          >
            View Site &rarr;
          </a>
          <button
            onClick={handleLogout}
            className="block text-xs text-gray-400 hover:text-red-400 transition-colors px-1"
          >
            Logout
          </button>
        </div>
      </aside>

      {/* Main content */}
      <main className="flex-1 overflow-auto">
        {children}
      </main>
    </div>
  );
}
