import type { ReactNode } from "react";
import {
  LuLayoutDashboard,
  LuPackage,
  LuTags,
  LuShoppingCart,
  LuUsers,
  LuSettings,
  LuPill,
} from "react-icons/lu";

interface AdminLayoutProps {
  children: ReactNode;
}

const menuItems = [
  {
    label: "Dashboard",
    href: "/admin",
    icon: LuLayoutDashboard,
  },
  {
    label: "Products",
    href: "/admin/products",
    icon: LuPackage,
  },
  {
    label: "Categories",
    href: "/admin/categories",
    icon: LuTags,
  },
  {
  label: "Subcategories",
  href: "/admin/subcategories",
  icon: LuTags,
},
  {
    label: "Orders",
    href: "/admin/orders",
    icon: LuShoppingCart,
  },
  {
    label: "Customers",
    href: "/admin/customers",
    icon: LuUsers,
  },
  {
    label: "Settings",
    href: "/admin/settings",
    icon: LuSettings,
  },
];

export default function AdminLayout({
  children,
}: AdminLayoutProps) {
  return (
    <div className="min-h-screen bg-[#F7F8FA]">
      <aside className="fixed inset-y-0 left-0 z-40 hidden w-64 border-r border-[#EAECEF] bg-white lg:block">
        <div className="flex h-20 items-center gap-3 border-b border-[#EAECEF] px-6">
          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#B570D4] text-white">
            <LuPill size={22} />
          </div>

          <div>
            <h1 className="text-base font-bold text-gray-800">
              PharmaComm
            </h1>
            <p className="text-xs text-gray-400">
              Admin Panel
            </p>
          </div>
        </div>

        <nav className="p-4">
          <p className="mb-3 px-3 text-[11px] font-semibold uppercase tracking-wider text-gray-400">
            Main Menu
          </p>

          <div className="space-y-1">
            {menuItems.map((item) => {
              const Icon = item.icon;

              return (
                <a
                  key={item.href}
                  href={item.href}
                  className="flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-medium text-gray-600 transition hover:bg-[#F8F1FB] hover:text-[#B570D4]"
                >
                  <Icon size={19} strokeWidth={1.8} />
                  <span>{item.label}</span>
                </a>
              );
            })}
          </div>
        </nav>
      </aside>

      <div className="lg:pl-64">
        <header className="sticky top-0 z-30 flex h-20 items-center justify-between border-b border-[#EAECEF] bg-white/95 px-6 backdrop-blur">
          <div>
            <h2 className="text-lg font-semibold text-gray-800">
              Pharmacy Administration
            </h2>
            <p className="text-sm text-gray-400">
              Manage your pharmacy store
            </p>
          </div>

          <div className="flex items-center gap-3">
            <div className="hidden text-right sm:block">
              <p className="text-sm font-semibold text-gray-700">
                Administrator
              </p>
              <p className="text-xs text-gray-400">
                Store Manager
              </p>
            </div>

            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#F8F1FB] text-sm font-semibold text-[#B570D4]">
              A
            </div>
          </div>
        </header>

        <main className="p-6 lg:p-8">
          {children}
        </main>
      </div>
    </div>
  );
}