"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {

  Lock,
  WashingMachine,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { ROLE_LABELS } from "@/lib/constants";
import { getNavGroups } from "@/lib/config/navigation";
import { useAuthStore } from "@/lib/stores/auth-store";
import { useSidebarStore } from "@/lib/stores/sidebar-store";
import { StatusBadge } from "@/components/shared";
import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
import { toast } from "sonner";



export function MobileSidebar() {
  const pathname = usePathname();
  const { user } = useAuthStore();
  const { isMobileOpen, setMobileOpen } = useSidebarStore();
  const navGroups = getNavGroups(user?.role || "admin_laundry");

  return (
    <Sheet open={isMobileOpen} onOpenChange={setMobileOpen}>
      <SheetContent side="left" className="w-72 p-0">
        <SheetTitle className="sr-only">Menu Navigasi</SheetTitle>
        {/* Logo */}
        <div className="flex items-center gap-2 px-4 h-16 border-b border-sidebar-border">
          <div className="flex items-center justify-center size-8 rounded-lg bg-primary text-primary-foreground">
            <WashingMachine className="size-4" />
          </div>
          <span className="font-bold text-lg tracking-tight">CleanWash</span>
        </div>

        <nav className="flex-1 overflow-y-auto py-4 px-2 space-y-6">
          {navGroups.map((group) => (
            <div key={group.title}>
              <p className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                {group.title}
              </p>
              <div className="space-y-1">
                {group.items.map((item) => {
                  const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
                  const isLocked = item.locked;

                  return (
                    <Link
                      key={item.label}
                      href={isLocked ? "#" : item.href}
                      onClick={(e) => {
                        if (isLocked) {
                          e.preventDefault();
                          toast("Coming Soon", {
                            description: "Fitur ini akan tersedia di versi PRO. Hubungi sales untuk upgrade.",
                          });
                        } else {
                          setMobileOpen(false);
                        }
                      }}
                      className={cn(
                        "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
                        isActive && !isLocked
                          ? "bg-sidebar-accent text-sidebar-primary font-semibold"
                          : "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground",
                        isLocked && "opacity-50 cursor-not-allowed"
                      )}
                    >
                      {item.icon}
                      <span className="flex-1">{item.label}</span>
                      {isLocked && (
                        <StatusBadge variant="neutral" type="outline" icon={<Lock className="size-3" />} className="text-[10px]">
                          PRO
                        </StatusBadge>
                      )}
                    </Link>
                  );
                })}
              </div>
            </div>
          ))}
        </nav>
      </SheetContent>
    </Sheet>
  );
}