"use client";

import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { cn } from "@/lib/utils";

export function AdminScopeBar({ scopes }: { scopes: string[] }) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const hideBar = pathname === "/metadata" || pathname === "/admin/audit-log";
  const selectedScopeRaw = (searchParams.get("scope") ?? "").trim().toUpperCase();
  const activeScope = scopes.includes(selectedScopeRaw) ? selectedScopeRaw : "";

  if (hideBar) {
    return null;
  }

  function handleScopeChange(value: string) {
    const nextScope = value.trim().toUpperCase();
    const params = new URLSearchParams(searchParams.toString());
    const targetPath = pathname || "/dashboard";

    if (nextScope) {
      params.set("scope", nextScope);
    } else {
      params.delete("scope");
    }

    if (targetPath.startsWith("/dashboard")) {
      params.delete("country");
      params.delete("month");
    }

    const query = params.toString();
    const target = query ? `${targetPath}?${query}` : targetPath;
    router.replace(target, { scroll: false });
  }

  return (
    <div className="sticky top-0 z-30 rounded-[24px] border border-[#d7e4f2] bg-[linear-gradient(180deg,rgba(255,255,255,0.98)_0%,rgba(243,248,255,0.97)_100%)] px-4 py-2.5 shadow-[0_18px_36px_-28px_rgba(38,99,172,0.38)] backdrop-blur-sm">
      <div className="flex min-w-0 flex-wrap items-center gap-2.5">
        <div className="inline-flex shrink-0 items-center gap-2 rounded-full border border-[#f4d3b0] bg-[#fff7ef] px-3 py-1.5">
          <span className="h-2 w-2 rounded-full bg-[#F7993A] shadow-[0_0_10px_rgba(247,153,58,0.75)]" />
          <p className="caption text-[10px] uppercase tracking-[0.22em] text-[#a85f12]">Admin</p>
        </div>
        <div className="flex flex-wrap gap-1.5">
          <button
            type="button"
            onClick={() => handleScopeChange("")}
            className={cn(
              "rounded-full border px-3 py-1 text-xs font-semibold transition",
              !activeScope
                ? "border-[#2663AC] bg-[#2663AC] text-white shadow-[0_6px_14px_-10px_rgba(38,99,172,0.7)]"
                : "border-[#d7e4f2] bg-white text-slate-600 hover:border-[#2663AC]/40 hover:text-[#2663AC]",
            )}
          >
            All
          </button>
          {scopes.map((scope) => (
            <button
              key={scope}
              type="button"
              onClick={() => handleScopeChange(scope)}
              className={cn(
                "rounded-full border px-3 py-1 text-xs font-semibold transition",
                activeScope === scope
                  ? "border-[#2663AC] bg-[#2663AC] text-white shadow-[0_6px_14px_-10px_rgba(38,99,172,0.7)]"
                  : "border-[#d7e4f2] bg-white text-slate-600 hover:border-[#2663AC]/40 hover:text-[#2663AC]",
              )}
            >
              {scope}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}