"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useAuth } from "@/hooks/useAuth";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Separator } from "@/components/ui/separator";
import {
  LayoutDashboard,
  Users,
  Newspaper,
  Settings,
  LogOut,
  Menu,
  X,
  ChevronDown,
  UserCircle,
  MessageSquare,
  MessageCircle,
  Megaphone,
  Star,
  Briefcase,
  UserCog,
  Image,
  Hospital,
  Info,
  Scissors,
  Stethoscope,
  HeartPulse,
  Home,
  Syringe,
  Package,
} from "lucide-react";

interface NavItem {
  title: string;
  href: string;
  icon: React.ReactNode;
  children?: { title: string; href: string }[];
}

const navItems: NavItem[] = [
  {
    title: "Dashboard",
    href: "/admin",
    icon: <LayoutDashboard className="w-5 h-5" />,
  },
  {
    title: "Dokter",
    href: "/admin/doctors",
    icon: <Users className="w-5 h-5" />,
  },
  {
    title: "Poli",
    href: "/admin/polis",
    icon: <Hospital className="w-5 h-5" />,
  },
  {
    title: "Landing Poli",
    href: "/admin/poli-landing",
    icon: <Stethoscope className="w-5 h-5" />,
  },
  {
    title: "Halaman About",
    href: "/admin/about",
    icon: <Info className="w-5 h-5" />,
  },
  {
    title: "Sunat Racing",
    href: "/admin/sunat-racing",
    icon: <Scissors className="w-5 h-5" />,
  },
  {
    title: "MCU",
    href: "/admin/mcu",
    icon: <HeartPulse className="w-5 h-5" />,
  },
  {
    title: "Programs",
    href: "/admin/programs",
    icon: <Package className="w-5 h-5" />,
  },
  {
    title: "Home Care",
    href: "/admin/home-care",
    icon: <Home className="w-5 h-5" />,
  },
  {
    title: "Vaksinasi",
    href: "/admin/vaksinasi",
    icon: <Syringe className="w-5 h-5" />,
    children: [
      { title: "Pengaturan", href: "/admin/vaksinasi" },
      { title: "Pendaftaran HPV", href: "/admin/vaccination-registration" },
    ],
  },
  {
    title: "Berita",
    href: "/admin/news",
    icon: <Newspaper className="w-5 h-5" />,
    children: [
      { title: "Semua Berita", href: "/admin/news" },
      { title: "Komentar", href: "/admin/news/comments" },
      { title: "Subscribers", href: "/admin/news/subscribers" },
      { title: "Kategori", href: "/admin/news/categories" },
      { title: "Tag", href: "/admin/news/tags" },
    ],
  },
  {
    title: "Pesan Masuk",
    href: "/admin/inquiries",
    icon: <MessageSquare className="w-5 h-5" />,
  },
  {
    title: "CMS",
    href: "/admin/cms",
    icon: <Megaphone className="w-5 h-5" />,
    children: [
      { title: "Promo", href: "/admin/cms/promos" },
      { title: "Testimoni", href: "/admin/cms/testimonials" },
      { title: "Layanan", href: "/admin/cms/services" },
    ],
  },
  {
    title: "Media Library",
    href: "/admin/media",
    icon: <Image className="w-5 h-5" />,
  },
  {
    title: "Admin Users",
    href: "/admin/users",
    icon: <UserCog className="w-5 h-5" />,
  },
];

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
  const { user, logout } = useAuth();

  return (
    <div className="min-h-screen bg-slate-50">
      {/* Sidebar */}
      <aside
        className={cn(
          "fixed left-0 top-0 z-40 h-screen bg-slate-900 text-white transition-all duration-300 flex flex-col",
          isSidebarCollapsed ? "w-20" : "w-64"
        )}
      >
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-slate-700 h-16">
          {!isSidebarCollapsed && (
            <Link href="/admin" className="text-xl font-bold">
              Adera
            </Link>
          )}
          <Button
            variant="ghost"
            size="icon"
            onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
            className="text-white hover:bg-slate-800"
          >
            {isSidebarCollapsed ? <Menu className="w-5 h-5" /> : <X className="w-5 h-5" />}
          </Button>
        </div>

        {/* Navigation */}
        <nav className="flex-1 p-4 space-y-2 overflow-y-auto">
          {navItems.map((item) => (
            <div key={item.href}>
              <Link
                href={item.href}
                className={cn(
                  "flex items-center gap-3 px-3 py-2 rounded-lg transition-colors",
                  pathname === item.href || pathname.startsWith(item.href + "/")
                    ? "bg-primary text-primary-foreground"
                    : "hover:bg-slate-800 text-slate-300"
                )}
              >
                {item.icon}
                {!isSidebarCollapsed && <span>{item.title}</span>}
              </Link>
              
              {/* Submenu */}
              {!isSidebarCollapsed && item.children && (
                <div className="ml-8 mt-1 space-y-1">
                  {item.children.map((child) => (
                    <Link
                      key={child.href}
                      href={child.href}
                      className={cn(
                        "block px-3 py-2 rounded-lg text-sm transition-colors",
                        pathname === child.href
                          ? "bg-primary/20 text-primary"
                          : "hover:bg-slate-800 text-slate-400"
                      )}
                    >
                      {child.title}
                    </Link>
                  ))}
                </div>
              )}
            </div>
          ))}
        </nav>

        {/* Footer */}
        <div className="p-4 border-t border-slate-700">
          <AdminSidebarFooter 
            isCollapsed={isSidebarCollapsed} 
            user={user} 
            logout={logout} 
          />
        </div>
      </aside>

      {/* Main Content */}
      <div
        className={cn(
          "transition-all duration-300",
          isSidebarCollapsed ? "ml-20" : "ml-64"
        )}
      >
        {/* Header */}
        <header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 fixed top-0 right-0 z-30"
          style={{ left: isSidebarCollapsed ? '5rem' : '16rem' }}
        >
          <h1 className="text-xl font-semibold text-slate-800">Admin Panel</h1>
          
          <DropdownMenu>
            <DropdownMenuTrigger>
              <Button variant="ghost" className="flex items-center gap-2">
                <UserCircle className="w-5 h-5" />
                <span className="text-sm font-medium">{user?.username || "Admin"}</span>
                <ChevronDown className="w-4 h-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-48">
              <DropdownMenuItem disabled>
                <span className="text-sm text-muted-foreground">{user?.username}</span>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={logout} className="text-red-600 cursor-pointer">
                <LogOut className="w-4 h-4 mr-2" />
                Logout
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </header>

        {/* Page Content */}
        <main className="pt-16 min-h-screen">
          <div className="p-6">{children}</div>
        </main>
      </div>
    </div>
  );
}

// Helper component
function AdminSidebarFooter({ 
  isCollapsed, 
  user, 
  logout 
}: { 
  isCollapsed: boolean; 
  user: { username: string } | null; 
  logout: () => void;
}) {
  if (isCollapsed) {
    return (
      <Button
        variant="ghost"
        size="icon"
        onClick={logout}
        className="w-full text-slate-400 hover:text-white hover:bg-slate-800"
      >
        <LogOut className="w-5 h-5" />
      </Button>
    );
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
        <Button
          variant="ghost"
          className="w-full flex items-center justify-between text-slate-300 hover:text-white hover:bg-slate-800"
        >
          <div className="flex items-center gap-3">
            <UserCircle className="w-5 h-5" />
            <div className="text-left">
              <p className="text-sm font-medium">{user?.username || "Admin"}</p>
              <p className="text-xs text-slate-500">Administrator</p>
            </div>
          </div>
          <ChevronDown className="w-4 h-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-56">
        <DropdownMenuItem disabled>
          <span className="text-sm text-muted-foreground">Logged in as {user?.username}</span>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={logout} className="text-red-600 cursor-pointer">
          <LogOut className="w-4 h-4 mr-2" />
          Logout
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}