import Link from 'next/link';
import { redirect } from 'next/navigation';
import {
  LayoutDashboard,
  Package,
  Tags,
  ClipboardList,
  Settings,
} from 'lucide-react';
import { getSession } from '@/lib/session';
import { LogoutButton } from '@/components/admin/LogoutButton';

export default async function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getSession();

  if (!session.admin) {
    redirect('/login');
  }

  const nav = [
    { href: '/admin', label: 'Dashboard', icon: LayoutDashboard },
    { href: '/admin/products', label: 'Products', icon: Package },
    { href: '/admin/categories', label: 'Categories', icon: Tags },
    { href: '/admin/orders', label: 'Orders', icon: ClipboardList },
    { href: '/admin/settings', label: 'Settings', icon: Settings },
  ];

  return (
    <div className="flex min-h-screen flex-col md:flex-row">
      <aside className="w-full border-b bg-card p-4 md:w-64 md:border-b-0 md:border-r">
        <Link href="/" className="text-xl font-bold">
          LOM Electronics
        </Link>
        <p className="text-xs text-muted-foreground">Admin</p>

        <nav className="mt-6 space-y-1">
          {nav.map((item) => {
            const Icon = item.icon;
            return (
              <Link
                key={item.href}
                href={item.href}
                className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
              >
                <Icon className="h-4 w-4" />
                {item.label}
              </Link>
            );
          })}
        </nav>

        <div className="mt-8">
          <LogoutButton />
        </div>
      </aside>

      <main className="flex-1 bg-background p-4 md:p-8">{children}</main>
    </div>
  );
}