distribution_erp/src/components/momo/sidebar.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard, Package, ShoppingCart, Warehouse, TrendingUp,
  Building2, ClipboardList, Truck, Receipt, PackagePlus, Wallet,
} from "lucide-react";

interface MenuLink {
  href: string;
  label: string;
  icon: React.ComponentType<{ size?: number }>;
  roles: ("USER" | "ADMIN")[];
  group?: string;
}

const MENU: MenuLink[] = [
  { href: "/m/dashboard", label: "대시보드", icon: LayoutDashboard, roles: ["USER", "ADMIN"] },

  { href: "/m/items", label: "품목 검색", icon: Package, roles: ["USER"], group: "주문" },
  { href: "/m/orders/new", label: "출고 요청", icon: ShoppingCart, roles: ["USER"], group: "주문" },
  { href: "/m/orders", label: "내 출고 이력", icon: ClipboardList, roles: ["USER"], group: "주문" },

  { href: "/m/admin/items", label: "품목 관리", icon: Package, roles: ["ADMIN"], group: "마스터" },
  { href: "/m/admin/vendors", label: "매입처 관리", icon: Building2, roles: ["ADMIN"], group: "마스터" },
  { href: "/m/admin/warehouses", label: "창고 관리", icon: Warehouse, roles: ["ADMIN"], group: "마스터" },
  { href: "/m/admin/procurements", label: "매입 발주", icon: Truck, roles: ["ADMIN"], group: "매입" },
  { href: "/m/admin/inbounds", label: "입고 처리", icon: PackagePlus, roles: ["ADMIN"], group: "매입" },
  { href: "/m/admin/inventory", label: "재고 관리", icon: Warehouse, roles: ["ADMIN"], group: "매입" },

  { href: "/m/admin/orders", label: "출고 관리", icon: ClipboardList, roles: ["ADMIN"], group: "출고/정산" },
  { href: "/m/admin/payments", label: "입금 관리", icon: Wallet, roles: ["ADMIN"], group: "출고/정산" },
  { href: "/m/admin/invoices", label: "계산서 발행", icon: Receipt, roles: ["ADMIN"], group: "출고/정산" },

  { href: "/m/admin/statistics", label: "월간 매출", icon: TrendingUp, roles: ["ADMIN"], group: "통계" },
  { href: "/m/admin/statistics/daily", label: "일자별", icon: TrendingUp, roles: ["ADMIN"], group: "통계" },
  { href: "/m/admin/statistics/margin", label: "원가/마진", icon: TrendingUp, roles: ["ADMIN"], group: "통계" },
];

export function MomoSidebar({ role }: { role: "USER" | "ADMIN" }) {
  const pathname = usePathname();
  const items = MENU.filter((m) => m.roles.includes(role));

  const grouped: Record<string, MenuLink[]> = {};
  for (const m of items) {
    const g = m.group || "_top";
    (grouped[g] ||= []).push(m);
  }

  return (
    <aside className="w-60 shrink-0 bg-gradient-to-b from-[#0d3b24] to-[#1b5e3a] text-white flex flex-col">
      <Link href="/m/dashboard" className="px-6 h-16 flex items-center gap-2.5 border-b border-white/10 hover:bg-white/5 transition">
        <img src="/momo-icon.svg" alt="" className="w-8 h-8" />
        <div>
          <div className="text-[11px] tracking-widest text-emerald-200/80 leading-none">MOMO</div>
          <div className="text-sm font-bold leading-tight">유통관리</div>
        </div>
      </Link>

      <nav className="flex-1 py-4 px-2 space-y-2 overflow-y-auto">
        {Object.entries(grouped).map(([group, list]) => (
          <div key={group}>
            {group !== "_top" && (
              <div className="px-3 py-1.5 text-[10px] font-bold tracking-widest text-emerald-300/60 uppercase">
                {group}
              </div>
            )}
            <div className="space-y-0.5">
              {list.map((it) => {
                const Icon = it.icon;
                const active = pathname === it.href || pathname.startsWith(it.href + "/");
                return (
                  <Link
                    key={it.href}
                    href={it.href}
                    className={
                      "flex items-center gap-3 px-4 h-9 rounded-lg text-sm transition " +
                      (active
                        ? "bg-white/15 text-white font-semibold"
                        : "text-emerald-100/80 hover:bg-white/10 hover:text-white")
                    }
                  >
                    <Icon size={15} />
                    {it.label}
                  </Link>
                );
              })}
            </div>
          </div>
        ))}
      </nav>

      <div className="p-4 border-t border-white/10 text-[11px] text-emerald-200/60">© 2026 MOMO Distribution</div>
    </aside>
  );
}