"use client";
import type React from "react";
import { useState } from "react";
import AdminLeftNavigation from "@/components/AdminLeftNavigation";
import {
  LayoutDashboard,
  Download,
  Layers,
  Boxes,
  Store,
  Users,
  Settings,
  LucideMail,
} from "lucide-react";

const navItems = [
  {
    label: "Dashboard",
    href: "/admin",
    icon: <LayoutDashboard className="h-4 w-4" />,
  },
  {
    label: "Imports",
    href: "/admin/import-status",
    icon: <Download className="h-4 w-4" />,
  },
  {
    label: "Mappings",
    href: "/admin/mapping",
    icon: <Layers className="h-4 w-4" />,
  },
  {
    label: "Products",
    href: "/admin/products",
    icon: <Boxes className="h-4 w-4" />,
  },
  {
    label: "Merchants",
    href: "/admin/merchants",
    icon: <Store className="h-4 w-4" />,
  },
  {
    label: "Platforms",
    href: "/admin/platforms",
    icon: <Layers className="h-4 w-4" />,
  },
  {
    label: "Users",
    href: "/admin/users",
    icon: <Users className="h-4 w-4" />,
  },
  {
    label: "Settings",
    href: "/admin/settings",
    icon: <Settings className="h-4 w-4" />,
  },
  {
    label: "List Emails",
    href: "/admin/email",
    icon: <LucideMail className="h-4 w-4" />,
  },
  {
    label: "Send a Email",
    href: "/admin/email/send",
    icon: <LucideMail className="h-4 w-4" />,
  },
];

// ... existing code ...
// ADMIN CHECK FOR LOGIN
// const { user, loading } = useAuth();

// if (!loading && user?.role !== "ADMIN") {
//   redirect("/"); // or /login
// }

export default function AdminLayout({
                                      children,
                                    }: {
  children: React.ReactNode;
}) {
  const [collapsed, setCollapsed] = useState(false);

  return (
      <div className="flex min-h-screen bg-black text-zinc-50">
        <AdminLeftNavigation
            collapsed={collapsed}
            onToggleCollapsed={() => setCollapsed((v) => !v)}
        />

        {/* Main column */}
        <div className="flex min-h-screen flex-1 flex-col">
          {/* Top bar */}
          <header className="flex items-center justify-between border-b border-zinc-900 bg-zinc-950/70 px-4 py-3">
            <div>
              <p className="text-xs uppercase tracking-[0.18em] text-zinc-500">
                Admin
              </p>
              <p className="text-sm text-zinc-200">
                Battl Builders Control Panel
              </p>
            </div>
            <div className="flex items-center gap-3">
            <span className="rounded-full border border-amber-500/30 bg-amber-500/10 px-3 py-1 text-[11px] font-medium text-amber-300">
              Internal • v0.1
            </span>
              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-900 text-[11px] text-zinc-300">
                ADMIN
              </div>
            </div>
          </header>

          {/* Content */}
          <main className="mx-auto flex w-full max-w-6xl flex-1 flex-col px-4 py-6">
            {children}
          </main>
        </div>
      </div>
  );
}