"use client";

import { cn } from "@/lib/utils";
import { X } from "lucide-react";
import { useTranslations } from "next-intl";
import { useRouter, useSearchParams } from "next/navigation";

interface ActiveFilterBadgesProps {
  className?: string;
}

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

  const status = searchParams.get("status");
  const publishDate = searchParams.get("publishDate");
  const releaseDate = searchParams.get("releaseDate");
  const views = searchParams.get("views");

  const hasActiveFilters = Boolean(
    status || publishDate || releaseDate || views
  );

  if (!hasActiveFilters) return null;

  const statusKeyMap: Record<string, "published" | "disabled" | "scheduled" | "draft"> = {
    published: "published",
    disabled: "disabled",
    scheduled: "scheduled",
    draft: "draft",
  };

  const viewsKeyMap: Record<string, "most" | "least"> = {
    most: "most",
    least: "least",
  };

  const removeFilter = (key: string) => {
    const params = new URLSearchParams(searchParams);
    params.delete(key);
    params.set("page", "1");
    router.push(`?${params.toString()}`, { scroll: false });
  };

  return (
    <div className={cn("flex items-center gap-2 flex-wrap", className)}>
      {status && (
        <div className="flex items-center gap-2 h-10 px-3 bg-muted border border-border rounded-[12px]">
          <span className="text-sm font-sans text-foreground">
            {statusKeyMap[status] ? t(`statuses.${statusKeyMap[status]}`) : status}
          </span>
          <button
            onClick={() => removeFilter("status")}
            className="text-muted-foreground hover:text-foreground transition-colors"
          >
            <X className="size-4" />
          </button>
        </div>
      )}

      {publishDate && (
        <div className="flex items-center gap-2 h-10 px-3 bg-muted border border-border rounded-[12px]">
          <span className="text-sm font-sans text-foreground">
            {t("publishDate")}: {publishDate}
          </span>
          <button
            onClick={() => removeFilter("publishDate")}
            className="text-muted-foreground hover:text-foreground transition-colors"
          >
            <X className="size-4" />
          </button>
        </div>
      )}

      {releaseDate && (
        <div className="flex items-center gap-2 h-10 px-3 bg-muted border border-border rounded-[12px]">
          <span className="text-sm font-sans text-foreground">
            {t("releaseDate")}: {releaseDate}
          </span>
          <button
            onClick={() => removeFilter("releaseDate")}
            className="text-muted-foreground hover:text-foreground transition-colors"
          >
            <X className="size-4" />
          </button>
        </div>
      )}

      {views && (
        <div className="flex items-center gap-2 h-10 px-3 bg-muted border border-border rounded-[12px]">
          <span className="text-sm font-sans text-foreground">
            {viewsKeyMap[views] ? t(`viewsOptions.${viewsKeyMap[views]}`) : views}
          </span>
          <button
            onClick={() => removeFilter("views")}
            className="text-muted-foreground hover:text-foreground transition-colors"
          >
            <X className="size-4" />
          </button>
        </div>
      )}
    </div>
  );
}