"use client";
import type React from "react";
import { useState } from "react";
import {
  LayoutDashboard,
  Download,
  Layers,
  Boxes,
  Store,
  Users,
  Settings,
} 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 (TO DO)",
    href: "/admin/products",
    icon: <Boxes className="h-4 w-4" />,
  },
  {
    label: "Merchants",
    href: "/admin/merchants",
    icon: <Store className="h-4 w-4" />,
  },
  {
    label: "Users (TO DO)",
    href: "/admin/users",
    icon: <Users className="h-4 w-4" />,
  },
  {
    label: "Settings (TO DO)",
    href: "/admin/settings",
    icon: <Settings className="h-4 w-4" />,
  },
];

// 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">
      {/* Sidebar */}
      <aside
        className={`hidden border-r border-zinc-900 bg-zinc-950/80 px-3 py-6 md:flex md:flex-col transition-all duration-200 ${
          collapsed ? "w-16" : "w-60"
        }`}
      >
        <div className="mb-6 flex items-center gap-2">
          <button
            type="button"
            onClick={() => setCollapsed((v) => !v)}
            className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-400 transition hover:border-amber-400/60 hover:text-amber-300"
          >
            <span className="sr-only">Toggle sidebar</span>
            <div className="space-y-0.5">
              <span className="block h-[1px] w-3 bg-current" />
              <span className="block h-[1px] w-3 bg-current" />
              <span className="block h-[1px] w-3 bg-current" />
            </div>
          </button>

          {!collapsed && (
            <div>
              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">
                Battl Builders
              </p>
              <p className="text-[10px] text-zinc-600">Admin Command</p>
            </div>
          )}
        </div>

        <nav className="flex-1 space-y-1 text-sm">
          {navItems.map((item) => (
            <a
              key={item.href}
              href={item.href}
              className="flex items-center justify-between rounded-md px-2 py-1.5 text-zinc-300 transition hover:bg-zinc-900 hover:text-amber-300"
            >
              <div className="flex items-center gap-2">
                {item.icon}
                {!collapsed && <span>{item.label}</span>}
              </div>
              {!collapsed && (
                <span className="text-[10px] text-zinc-600">›</span>
              )}
            </a>
          ))}
        </nav>

        {!collapsed && (
          <div className="mt-6 border-t border-zinc-900 pt-4 text-[11px] text-zinc-600">
            <p className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
              Status
            </p>
            <p className="mt-1">
              Import engine: <span className="text-emerald-400">online</span>
            </p>
            <p className="text-zinc-500">Builder UI: in progress</p>
          </div>
        )}
      </aside>

      {/* 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>
  );
}