"use client";

import { useAuth } from "@/lib/auth";
import { useRouter, usePathname } from "next/navigation";
import { useEffect, type ReactNode } from "react";
import Link from "next/link";
import Navbar from "@/components/layout/Navbar";
import MobileNav from "@/components/layout/MobileNav";
import {
  LayoutDashboard, ShoppingCart, Users, Package, Megaphone,
  RefreshCw, Loader2, ShieldCheck, Ticket
} from "lucide-react";

const adminNav = [
  { label: "Overview", href: "/admin", icon: LayoutDashboard },
  { label: "Pesanan", href: "/admin/orders", icon: ShoppingCart },
  { label: "Kode Kupon", href: "/admin/vouchers", icon: Ticket },
  { label: "Users", href: "/admin/users", icon: Users },
  { label: "Produk", href: "/admin/products", icon: Package },
  { label: "Pengumuman", href: "/admin/announcements", icon: Megaphone },
];

export default function AdminLayout({ children }: { children: ReactNode }) {
  const { user, loading } = useAuth();
  const router = useRouter();
  const pathname = usePathname();

  useEffect(() => {
    if (!loading && (!user || user.role !== "admin")) {
      router.replace("/dashboard");
    }
  }, [loading, user, router]);

  if (loading || !user || user.role !== "admin") {
    return (
      <>
        <Navbar />
        <main className="min-h-screen flex items-center justify-center pt-20">
          <div className="text-center">
            <Loader2 size={40} className="mx-auto text-primary animate-spin mb-4" />
            <p className="text-muted">Memuat admin panel...</p>
          </div>
        </main>
      </>
    );
  }

  return (
    <>
      <Navbar />
      <div className="flex min-h-screen pt-[60px] bg-dark overflow-x-hidden">
        {/* Sidebar */}
        <aside className="hidden lg:flex flex-col sticky top-[60px] h-[calc(100vh-60px)] w-[240px] border-r border-dark-border bg-dark-surface/30">
          <div className="pt-6 px-5 pb-4 flex items-center gap-3">
            <div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center">
              <ShieldCheck size={16} className="text-red-400" />
            </div>
            <div>
              <p className="text-xs text-red-400 font-bold uppercase tracking-wider">Admin Panel</p>
              <p className="text-[10px] text-muted">{process.env.NEXT_PUBLIC_APP_NAME}</p>
            </div>
          </div>
          <nav className="flex-1 px-3 space-y-0.5">
            {adminNav.map((item) => {
              const Icon = item.icon;
              const isActive = pathname === item.href || (item.href !== "/admin" && pathname.startsWith(item.href));
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={`flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium transition-all ${
                    isActive
                      ? "bg-red-500/10 text-red-400 border-l-2 border-red-500"
                      : "text-muted hover:text-white hover:bg-white/5 border-l-2 border-transparent"
                  }`}
                >
                  <Icon size={16} />
                  <span>{item.label}</span>
                </Link>
              );
            })}
          </nav>
          <div className="p-4">
            <Link href="/dashboard" className="flex items-center gap-2 text-xs text-muted hover:text-white transition-colors">
              ← Kembali ke Dashboard
            </Link>
          </div>
        </aside>

        {/* Main */}
        <main className="flex-1 pb-8 min-h-[calc(100vh-60px)] min-w-0">
          {/* Mobile tabs */}
          <div className="lg:hidden bg-dark-surface border-b border-dark-border overflow-x-auto scrollbar-none">
            <div className="flex items-center gap-2 px-4 py-3 min-w-max">
              {adminNav.map((item) => {
                const Icon = item.icon;
                const isActive = pathname === item.href || (item.href !== "/admin" && pathname.startsWith(item.href));
                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    className={`flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-xs font-bold whitespace-nowrap transition-all border ${
                      isActive ? "bg-red-500/10 text-red-400 border-red-500/20" : "bg-white/5 text-muted hover:text-white border-transparent"
                    }`}
                  >
                    <Icon size={14} />
                    {item.label}
                  </Link>
                );
              })}
            </div>
          </div>
          <div className="p-4 md:p-6 lg:p-8 max-w-7xl mx-auto">
            {children}
          </div>
        </main>
      </div>
      <MobileNav />
    </>
  );
}