"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { LayoutDashboard, Package, ShoppingBag, Users, Plus, Eye, LogOut, ChevronRight } from "lucide-react";
import { signOut } from "next-auth/react";
import { cn } from "@/lib/utils";

const navItems = [
  { label: "Dashboard", href: "/admin", icon: LayoutDashboard, exact: true },
  { label: "Products", href: "/admin/products", icon: Package, exact: false },
  { label: "Orders", href: "/admin/orders", icon: ShoppingBag, exact: false },
  { label: "Users", href: "/admin/users", icon: Users, exact: false },
];

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();

  const isActive = (href: string, exact: boolean) =>
    exact ? pathname === href : pathname === href || pathname.startsWith(href + "/");

  return (
    <div className="flex min-h-screen bg-slate-50">
      {/* Sidebar */}
      <aside className="fixed inset-y-0 left-0 z-40 w-64 bg-slate-900 flex flex-col shadow-2xl">
        {/* Logo */}
        <div className="px-5 py-5 border-b border-slate-700/60">
          <Link href="/admin" className="flex items-center gap-2.5">
            <div className="w-8 h-8 rounded-lg bg-sky-500 flex items-center justify-center shrink-0">
              <span className="text-white font-black text-sm">P</span>
            </div>
            <div>
              <p className="text-white font-black text-sm leading-none">ProTouch</p>
              <p className="text-slate-400 text-xs mt-0.5">Admin Panel</p>
            </div>
          </Link>
        </div>

        {/* Nav */}
        <nav className="flex-1 px-3 py-4 space-y-0.5 overflow-y-auto">
          <p className="px-2 pb-2 text-slate-500 text-xs font-bold uppercase tracking-widest">Menu</p>
          {navItems.map(({ label, href, icon: Icon, exact }) => {
            const active = isActive(href, exact);
            return (
              <Link
                key={href}
                href={href}
                className={cn(
                  "flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold transition-all group",
                  active
                    ? "bg-sky-500 text-white shadow-lg shadow-sky-500/30"
                    : "text-slate-400 hover:text-white hover:bg-slate-800"
                )}
              >
                <Icon className="w-4.5 h-4.5 shrink-0" style={{ width: 18, height: 18 }} />
                <span className="flex-1">{label}</span>
                {active && <ChevronRight className="w-3.5 h-3.5 opacity-70" />}
              </Link>
            );
          })}

          <div className="pt-4">
            <p className="px-2 pb-2 text-slate-500 text-xs font-bold uppercase tracking-widest">Actions</p>
            <Link
              href="/admin/products/new"
              className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition-all"
            >
              <Plus className="shrink-0" style={{ width: 18, height: 18 }} />
              Add Product
            </Link>
          </div>
        </nav>

        {/* Bottom */}
        <div className="px-3 py-4 border-t border-slate-700/60 space-y-1">
          <Link
            href="/"
            target="_blank"
            className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition-all"
          >
            <Eye style={{ width: 18, height: 18 }} />
            View Store
          </Link>
          <button
            onClick={() => signOut({ callbackUrl: "/" })}
            className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold text-slate-400 hover:text-red-400 hover:bg-red-500/10 transition-all"
          >
            <LogOut style={{ width: 18, height: 18 }} />
            Sign Out
          </button>
        </div>
      </aside>

      {/* Main content */}
      <div className="flex-1 ml-64 min-h-screen flex flex-col">
        {/* Top bar */}
        <header className="sticky top-0 z-30 bg-white border-b border-slate-100 px-6 py-3.5 flex items-center justify-between shadow-sm">
          <nav className="flex items-center gap-1.5 text-sm text-slate-500">
            <Link href="/admin" className="hover:text-slate-800 font-medium transition-colors">Admin</Link>
            {pathname !== "/admin" && (
              <>
                <ChevronRight className="w-3.5 h-3.5" />
                <span className="text-slate-800 font-semibold capitalize">
                  {pathname.split("/").filter(Boolean).slice(1).join(" / ").replace(/-/g, " ")}
                </span>
              </>
            )}
          </nav>
          <Link
            href="/admin/products/new"
            className="flex items-center gap-1.5 bg-sky-500 hover:bg-sky-600 text-white px-3.5 py-1.5 rounded-lg font-bold text-xs transition-colors"
          >
            <Plus className="w-3.5 h-3.5" /> New Product
          </Link>
        </header>

        <main className="flex-1 p-6">
          {children}
        </main>
      </div>
    </div>
  );
}