"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { LogOut, Menu, X, Store } from "lucide-react";
import { useAuth } from "@/context/AuthContext";
import { company } from "@/data/company";
import { adminNav } from "@/components/admin/adminNav";

export default function AdminShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();
  const { isAdmin, isLoading, user, logout } = useAuth();
  const [sidebarOpen, setSidebarOpen] = useState(false);

  useEffect(() => {
    if (!isLoading && !isAdmin) router.replace("/login");
  }, [isAdmin, isLoading, router]);

  useEffect(() => {
    setSidebarOpen(false);
  }, [pathname]);

  if (isLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-[hsl(220_20%_97%)]">
        <p className="text-sm text-muted-foreground">Loading admin…</p>
      </div>
    );
  }

  if (!isAdmin) return null;

  const Nav = (
    <aside className="flex h-full w-64 flex-col border-r border-border bg-[hsl(221_39%_12%)] text-white">
      <div className="border-b border-white/10 px-5 py-5">
        <Link href="/admin/dashboard" className="block">
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-white/50">Admin</p>
          <p className="mt-1 text-lg font-bold">{company.shortName}</p>
          <p className="text-xs text-white/55">{company.name}</p>
        </Link>
      </div>
      <nav className="flex-1 space-y-1 overflow-y-auto px-3 py-4">
        {adminNav.map((item) => {
          const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
          const Icon = item.icon;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
                active
                  ? "bg-accent text-white shadow-sm"
                  : "text-white/70 hover:bg-white/8 hover:text-white"
              }`}
            >
              <Icon className="h-4 w-4 shrink-0" />
              {item.label}
            </Link>
          );
        })}
      </nav>
      <div className="space-y-2 border-t border-white/10 p-4">
        <Link
          href="/"
          className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-white/70 transition-colors hover:bg-white/8 hover:text-white"
        >
          <Store className="h-4 w-4" />
          View storefront
        </Link>
        <button
          type="button"
          onClick={() => void logout().then(() => router.push("/login"))}
          className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-white/70 transition-colors hover:bg-white/8 hover:text-white"
        >
          <LogOut className="h-4 w-4" />
          Logout
        </button>
        <p className="px-3 text-[11px] text-white/40">{user?.email}</p>
      </div>
    </aside>
  );

  return (
    <div className="min-h-screen bg-[hsl(220_20%_97%)]">
      <div className="flex min-h-screen">
        <div className="hidden lg:block">{Nav}</div>
        {sidebarOpen && (
          <div className="fixed inset-0 z-50 lg:hidden">
            <button type="button" className="absolute inset-0 bg-Blue/50" onClick={() => setSidebarOpen(false)} aria-label="Close sidebar" />
            <div className="absolute inset-y-0 left-0">{Nav}</div>
          </div>
        )}
        <div className="flex min-w-0 flex-1 flex-col">
          <header className="sticky top-0 z-40 flex h-14 items-center justify-between border-b border-border bg-white/90 px-4 backdrop-blur lg:px-8">
            <button
              type="button"
              className="rounded-lg border border-border p-2 lg:hidden"
              onClick={() => setSidebarOpen(true)}
            >
              {sidebarOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
            </button>
            <p className="text-sm font-semibold text-foreground">GNS Control Panel</p>
            <p className="text-xs text-muted-foreground">{user?.first_name || user?.username || "Admin"}</p>
          </header>
          <main className="flex-1 px-4 py-6 lg:px-8 lg:py-8">{children}</main>
        </div>
      </div>
    </div>
  );
}