"use client";

import { cn } from "@/lib/utils";
import {
  DASHBOARD_USER_LANGUAGE_VALUES,
  DASHBOARD_USER_ROLE_VALUES,
  DASHBOARD_USER_STATUS_VALUES,
} from "./users-types";
import { X } from "lucide-react";
import { useTranslations } from "next-intl";
import { useRouter, useSearchParams } from "next/navigation";

interface UsersActiveFilterBadgesProps {
  className?: string;
}

function asArray(value: string | null): string[] {
  if (!value) {
    return [];
  }

  return value
    .split(",")
    .map((item) => item.trim())
    .filter(Boolean);
}

export function UsersActiveFilterBadges({ className }: UsersActiveFilterBadgesProps) {
  const t = useTranslations("dashboard.users.filters");
  const router = useRouter();
  const searchParams = useSearchParams();

  const statusList = asArray(searchParams.get("status"));
  const roleList = asArray(searchParams.get("role"));
  const languageList = asArray(searchParams.get("language"));
  const joinedAt = searchParams.get("joinedAt");

  const hasFilters = Boolean(statusList.length || roleList.length || languageList.length || joinedAt);

  if (!hasFilters) {
    return null;
  }

  const removeSingleValue = (key: string, value: string) => {
    const params = new URLSearchParams(searchParams);
    const nextValues = asArray(params.get(key)).filter((item) => item !== value);

    if (nextValues.length) {
      params.set(key, nextValues.join(","));
    } else {
      params.delete(key);
    }

    params.set("page", "1");
    router.push(`?${params.toString()}`, { scroll: false });
  };

  return (
    <div className={cn("flex flex-wrap items-center gap-2", className)}>
      {statusList.map((status) => (
        <button
          key={`status-${status}`}
          type="button"
          className="inline-flex h-10 items-center gap-2 rounded-xl border border-border bg-muted px-3 text-sm"
          onClick={() => removeSingleValue("status", status)}
        >
          <span>
            {DASHBOARD_USER_STATUS_VALUES.includes(
              status as (typeof DASHBOARD_USER_STATUS_VALUES)[number]
            )
              ? t(`statuses.${status}`)
              : status}
          </span>
          <X className="h-4 w-4" />
        </button>
      ))}

      {roleList.map((role) => (
        <button
          key={`role-${role}`}
          type="button"
          className="inline-flex h-10 items-center gap-2 rounded-xl border border-border bg-muted px-3 text-sm"
          onClick={() => removeSingleValue("role", role)}
        >
          <span>
            {DASHBOARD_USER_ROLE_VALUES.includes(
              role as (typeof DASHBOARD_USER_ROLE_VALUES)[number]
            )
              ? t(`roles.${role}`)
              : role}
          </span>
          <X className="h-4 w-4" />
        </button>
      ))}

      {languageList.map((language) => (
        <button
          key={`language-${language}`}
          type="button"
          className="inline-flex h-10 items-center gap-2 rounded-xl border border-border bg-muted px-3 text-sm"
          onClick={() => removeSingleValue("language", language)}
        >
          <span>
            {DASHBOARD_USER_LANGUAGE_VALUES.includes(
              language as (typeof DASHBOARD_USER_LANGUAGE_VALUES)[number]
            )
              ? t(`languages.${language}`)
              : language}
          </span>
          <X className="h-4 w-4" />
        </button>
      ))}

      {joinedAt ? (
        <button
          type="button"
          className="inline-flex h-10 items-center gap-2 rounded-xl border border-border bg-muted px-3 text-sm"
          onClick={() => {
            const params = new URLSearchParams(searchParams);
            params.delete("joinedAt");
            params.set("page", "1");
            router.push(`?${params.toString()}`, { scroll: false });
          }}
        >
          <span>
            {t("joinedAt")}: {joinedAt}
          </span>
          <X className="h-4 w-4" />
        </button>
      ) : null}
    </div>
  );
}