import { Link, useLocation } from "react-router-dom";
import {
  LayoutDashboard,
  Database,
  MessageSquare,
  Users,
  ShieldCheck,
  BarChart3,
  FileText,
} from "lucide-react";

const menus = [
  {
    label: "Dashboard",
    path: "/admin",
    icon: LayoutDashboard,
  },
  {
    label: "Data SPPG",
    path: "/admin/sppg",
    icon: Database,
  },
  {
    label: "Pengaduan",
    path: "/admin/pengaduan",
    icon: MessageSquare,
  },
  {
    label: "Manajemen User",
    path: "/admin/users",
    icon: Users,
  },
  {
    label: "Audit Log",
    path: "/admin/audit-log",
    icon: ShieldCheck,
  },
  {
    label: "Statistik",
    path: "/statistik",
    icon: BarChart3,
  },
  {
    label: "Laporan",
    path: "/laporan",
    icon: FileText,
  },
];

const isActive = (pathname, path) => {
  if (path === "/admin") {
    return pathname === "/admin";
  }

  return pathname === path || pathname.startsWith(`${path}/`);
};

export default function AdminSidebar() {
  const location = useLocation();

  return (
    <aside className="hidden lg:block w-64 border-r border-border bg-card min-h-[calc(100vh-4rem)] sticky top-16">
      <div className="p-4 border-b border-border">
        <p className="text-sm text-muted-foreground">Panel</p>
        <h2 className="font-bold text-lg">Admin</h2>
      </div>

      <nav className="p-3 space-y-1">
        {menus.map((menu) => {
          const Icon = menu.icon;
          const active = isActive(location.pathname, menu.path);

          return (
            <Link
              key={menu.path}
              to={menu.path}
              className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition ${
                active
                  ? "bg-primary/10 text-primary"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground"
              }`}
            >
              <Icon className="w-4 h-4" />
              {menu.label}
            </Link>
          );
        })}
      </nav>
    </aside>
  );
}