"use client";

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

import { LogOut, UtensilsCrossed } from "lucide-react";

import { Button } from "@/components/ui/button";
import { logout, getAuthUser } from "@/lib/auth";
import { operationsNavItems } from "@/navigation/operations/operations-sidebar-items";
import { useOpsVenueId } from "@/stores/operations/operations-store";
import { useOpsUnreadNotificationCount, useVenue } from "@/stores/platform/use-platform-selectors";
import { cn } from "@/lib/utils";
import { useRouter } from "next/navigation";

export function OperationsSidebar() {
  const pathname = usePathname();
  const router = useRouter();
  const venue = useVenue(useOpsVenueId());
  const unread = useOpsUnreadNotificationCount();
  const user = getAuthUser();

  const handleLogout = () => {
    logout();
    router.replace("/login");
  };

  return (
    <aside className="flex h-screen w-[220px] shrink-0 flex-col border-r bg-zinc-950 text-white md:w-[240px]">
      <div className="flex items-center gap-2.5 border-b border-white/10 px-4 py-4">
        <div className="flex size-9 items-center justify-center rounded-lg bg-amber-500/20 text-amber-400">
          <UtensilsCrossed className="size-4" />
        </div>
        <div className="min-w-0">
          <p className="truncate text-sm font-semibold">{venue?.name ?? "Venue"}</p>
          <p className="truncate text-[11px] text-white/45">{venue?.floorLabel ?? ""}</p>
        </div>
      </div>

      <nav className="flex-1 space-y-0.5 p-3">
        {operationsNavItems.map((item) => {
          const isActive =
            item.url === "/operations" ? pathname === "/operations" : pathname.startsWith(item.url);
          const badge = item.url === "/operations/notifications" && unread > 0 ? unread : null;
          return (
            <Link
              key={item.url}
              href={item.url}
              className={cn(
                "flex min-h-[44px] items-center gap-3 rounded-lg px-3 text-sm font-medium transition-colors",
                isActive ? "bg-white/12 text-white" : "text-white/55 hover:bg-white/6 hover:text-white/90",
              )}
            >
              <item.icon className="size-5 shrink-0" />
              <span className="flex-1">{item.title}</span>
              {badge != null && (
                <span className="rounded-full bg-amber-500 px-2 py-0.5 text-[10px] font-bold text-zinc-950">
                  {badge}
                </span>
              )}
            </Link>
          );
        })}
      </nav>

      <div className="border-t border-white/10 p-3">
        <p className="mb-2 truncate px-1 text-xs text-white/40">{user?.name ?? "Operations Staff"}</p>
        <Button
          variant="ghost"
          className="h-11 w-full justify-start gap-2 text-white/70 hover:bg-white/8 hover:text-white"
          onClick={handleLogout}
        >
          <LogOut className="size-4" />
          Sign out
        </Button>
      </div>
    </aside>
  );
}