"use client";

import type React from "react";
import { useEffect, useMemo, useState } from "react";
import { usePathname, useRouter } from "next/navigation";
import AdminLeftNavigation, {
  type AdminNavGroup,
} from "@/components/AdminLeftNavigation";
import { useAuth } from "@/context/AuthContext";
import {
  LayoutDashboard,
  Download,
  Layers,
  Boxes,
  Store,
  Users,
  Settings,
  Mail,
  Wand2,
  FolderKanban,
  Shield,
} from "lucide-react";

const navGroups: AdminNavGroup[] = [
  {
    label: "Overview",
    icon: <LayoutDashboard className="h-4 w-4" />,
    items: [
      {
        label: "Dashboard",
        href: "/admin",
        icon: <LayoutDashboard className="h-4 w-4" />,
      },
    ],
  },
  {
    label: "Catalog",
    icon: <FolderKanban className="h-4 w-4" />,
    items: [
      {
        label: "Products",
        href: "/admin/products",
        icon: <Boxes className="h-4 w-4" />,
      },
      {
        label: "Platforms",
        href: "/admin/platforms",
        icon: <Layers className="h-4 w-4" />,
      },
    ],
  },
  {
    label: "Data Ops",
    icon: <Download className="h-4 w-4" />,
    items: [
      {
        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: "Enrichment",
        href: "/admin/enrichment",
        icon: <Wand2 className="h-4 w-4" />,
      },
    ],
  },
  {
    label: "Growth & Comms",
    icon: <Mail className="h-4 w-4" />,
    items: [
      {
        label: "Beta Invites",
        href: "/admin/beta-invites",
        icon: <Mail className="h-4 w-4" />,
      },
      {
        label: "List Emails",
        href: "/admin/email",
        icon: <Mail className="h-4 w-4" />,
      },
      {
        label: "Send an Email",
        href: "/admin/email/send",
        icon: <Mail className="h-4 w-4" />,
      },
    ],
  },
  {
    label: "Access & Config",
    icon: <Shield className="h-4 w-4" />,
    items: [
      {
        label: "Users",
        href: "/admin/users",
        icon: <Users className="h-4 w-4" />,
      },
      {
        label: "Merchants",
        href: "/admin/merchants",
        icon: <Store className="h-4 w-4" />,
      },
      {
        label: "Settings",
        href: "/admin/settings",
        icon: <Settings className="h-4 w-4" />,
      },
    ],
  },
];

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

  const router = useRouter();
  const pathname = usePathname();

  const next = useMemo(
    () => encodeURIComponent(pathname || "/admin"),
    [pathname]
  );

  useEffect(() => {
    if (loading) return;

    if (!user) {
      router.replace(`/login?next=${next}`);
      return;
    }

    if (user.role !== "ADMIN") {
      router.replace("/");
    }
  }, [loading, user, router, next]);

  if (loading) return null;
  if (!user) return null;
  if (user.role !== "ADMIN") return null;

  return (
    // ✅ prevent browser-level horizontal scroll from any wide children
    <div className="min-h-screen bg-black text-zinc-50 overflow-x-hidden pt-[52px]">
      <AdminLeftNavigation
        collapsed={collapsed}
        onToggleCollapsed={() => setCollapsed((v) => !v)}
        groups={navGroups}
      />

      {/* ✅ min-w-0 is the critical fix: lets the main column shrink */}
      <div
        className="flex min-h-screen flex-1 min-w-0 flex-col transition-all duration-300"
        style={{ marginLeft: collapsed ? '68px' : '280px' }}
      >
        <header className="flex items-center justify-between border-b border-zinc-900 bg-zinc-950/70 px-4 py-3 sticky top-0 z-30 backdrop-blur-sm">
          <div>
            <p className="text-xs uppercase tracking-[0.18em] text-zinc-500">
              Admin
            </p>
            <p className="text-sm text-zinc-200">Battl 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>

        {/* ✅ min-w-0 here prevents table min-width from widening the page */}
        <main className="flex w-full flex-1 min-w-0 flex-col px-4 py-6">
          {children}
        </main>
      </div>
    </div>
  );
}