"use client";

import React, { useState } from "react";
import {
  Search,
  X,
  RotateCcw,
  Calendar,
  Filter,
  SlidersHorizontal,
  ChevronDown,
  Layers,
  CalendarRange,
} from "lucide-react";
import { ReceiptCategory } from "@/lib/schema/receipt";
import { UseReceiptFiltersReturn, TemporalPeriod } from "@/lib/hooks/useReceiptFilters";
import { useI18n } from "@/lib/i18n/context";

const CATEGORIES: ReceiptCategory[] = [
  "Bewirtung",
  "Reisekosten & Hotel",
  "Tanken & KFZ",
  "Bürobedarf & IT",
  "Verpflegungsmehraufwand",
  "Material & Einkauf",
  "Sonstiges",
];

const CATEGORY_LABELS: Record<ReceiptCategory, { de: string; en: string }> = {
  "Bewirtung": { de: "Bewirtung", en: "Meals & Entertainment" },
  "Reisekosten & Hotel": { de: "Reisekosten & Hotel", en: "Travel & Lodging" },
  "Tanken & KFZ": { de: "Tanken & KFZ", en: "Fuel & Vehicle" },
  "Bürobedarf & IT": { de: "Bürobedarf & IT", en: "Office Supplies & IT" },
  "Verpflegungsmehraufwand": { de: "Verpflegungsmehraufwand", en: "Per Diem / Subsistence" },
  "Material & Einkauf": { de: "Material & Einkauf", en: "Supplies & Inventory" },
  "Sonstiges": { de: "Sonstiges", en: "Other / Misc" },
};

const TEMPORAL_PRESETS: Array<{ key: TemporalPeriod; labelDe: string; labelEn: string }> = [
  { key: "all", labelDe: "Alle", labelEn: "All" },
  { key: "month", labelDe: "Dieser Monat", labelEn: "This Month" },
  { key: "last_30_days", labelDe: "30 Tage", labelEn: "30 Days" },
  { key: "last_60_days", labelDe: "60 Tage", labelEn: "60 Days" },
  { key: "last_90_days", labelDe: "90 Tage", labelEn: "90 Days" },
  { key: "year", labelDe: "Dieses Jahr", labelEn: "This Year" },
];

const AMOUNT_PRESETS: Array<{ label: string; min: number | null; max: number | null }> = [
  { label: "< 50 €", min: 0, max: 50 },
  { label: "50 – 200 €", min: 50, max: 200 },
  { label: "> 200 €", min: 200, max: null },
];

export interface FilterChipsBarProps {
  filterHook: UseReceiptFiltersReturn;
  className?: string;
  showSearch?: boolean;
  showTemporalPresets?: boolean;
  showStatusFilters?: boolean;
  showCategoryFilters?: boolean;
  showAmountPresets?: boolean;
}

export function FilterChipsBar({
  filterHook,
  className = "",
  showSearch = true,
  showTemporalPresets = true,
  showStatusFilters = true,
  showCategoryFilters = true,
  showAmountPresets = true,
}: FilterChipsBarProps) {
  const { language } = useI18n();
  const isDe = language === "de";

  const {
    activePeriod,
    setPeriod,
    customDateRange,
    setCustomDateRange,
    activeStatus,
    setStatus,
    activeCategory,
    setCategory,
    searchQuery,
    setSearchQuery,
    amountRange,
    setAmountRange,
    resetFilters,
    hasActiveFilters,
    activeFilterCount,
    statusCounts,
    categoryCounts,
    filteredReceipts,
  } = filterHook;

  const [isAmountPopoverOpen, setIsAmountPopoverOpen] = useState(false);
  const [customMin, setCustomMin] = useState<string>(amountRange.min?.toString() ?? "");
  const [customMax, setCustomMax] = useState<string>(amountRange.max?.toString() ?? "");

  const [isDatePopoverOpen, setIsDatePopoverOpen] = useState(false);
  const [customFrom, setCustomFrom] = useState<string>(customDateRange?.from ?? "");
  const [customTo, setCustomTo] = useState<string>(customDateRange?.to ?? "");

  const handleApplyCustomAmount = (e: React.FormEvent) => {
    e.preventDefault();
    const minVal = customMin.trim() ? parseFloat(customMin.replace(",", ".")) : null;
    const maxVal = customMax.trim() ? parseFloat(customMax.replace(",", ".")) : null;
    setAmountRange({
      min: minVal !== null && !isNaN(minVal) ? minVal : null,
      max: maxVal !== null && !isNaN(maxVal) ? maxVal : null,
    });
    setIsAmountPopoverOpen(false);
  };

  const handleApplyCustomDate = (e: React.FormEvent) => {
    e.preventDefault();
    if (!customFrom && !customTo) {
      setPeriod("all");
      setCustomDateRange({ from: null, to: null });
    } else {
      setCustomDateRange({
        from: customFrom || null,
        to: customTo || null,
      });
      setPeriod("custom");
    }
    setIsDatePopoverOpen(false);
  };

  const isAmountPresetActive = (min: number | null, max: number | null) => {
    return amountRange.min === min && amountRange.max === max;
  };

  return (
    <div
      data-testid="filter-chips-bar"
      className={`border border-[#E2E8F0] bg-white font-sans ${className}`}
    >
      {/* Top Search & Primary Filters Row */}
      <div className="p-3 border-b border-[#E2E8F0] flex flex-wrap items-center justify-between gap-3 bg-[#FAFCFF]">
        {/* Search Input */}
        {showSearch && (
          <div className="relative flex-1 min-w-[240px] max-w-md">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#94A3B8]" />
            <input
              type="text"
              data-testid="filter-search-input"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder={isDe ? "Belege durchsuchen (Händler, Betrag, Beleg-Nr., Datum)..." : "Search receipts (merchant, amount, receipt no., date)..."}
              className="w-full pl-9 pr-8 py-2 bg-white border border-[#E2E8F0] text-xs text-black placeholder:text-[#94A3B8] focus:border-black focus:outline-none transition-colors"
            />
            {searchQuery && (
              <button
                type="button"
                data-testid="filter-search-clear"
                onClick={() => setSearchQuery("")}
                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-[#94A3B8] hover:text-black p-0.5"
                title={isDe ? "Suche zurücksetzen" : "Clear search"}
              >
                <X className="w-3.5 h-3.5" />
              </button>
            )}
          </div>
        )}

        {/* Results Counter & Reset Button */}
        <div className="flex items-center gap-3">
          <div className="text-xs font-mono text-[#64748B]">
            <span className="font-semibold text-black">{filteredReceipts.length}</span>{" "}
            {isDe ? "von" : "of"}{" "}
            <span className="font-semibold text-black">{statusCounts.all}</span>{" "}
            {isDe ? "Belegen" : "receipts"}
          </div>

          {hasActiveFilters && (
            <button
              type="button"
              data-testid="filter-reset-all-btn"
              onClick={() => {
                resetFilters();
                setCustomMin("");
                setCustomMax("");
                setCustomFrom("");
                setCustomTo("");
              }}
              className="px-2.5 py-1 text-[11px] font-mono text-[#475569] hover:text-black border border-[#E2E8F0] hover:border-black bg-white transition-colors flex items-center gap-1.5"
            >
              <RotateCcw className="w-3 h-3" />
              <span>{isDe ? "Filter löschen" : "Reset Filters"}</span>
              {activeFilterCount > 0 && (
                <span className="ml-0.5 px-1 bg-black text-white text-[10px] rounded-full">
                  {activeFilterCount}
                </span>
              )}
            </button>
          )}
        </div>
      </div>

      {/* Secondary Controls Bar: Status Pills, Temporal Presets, Category Dropdown, Amount Filter */}
      <div className="p-3 space-y-3">
        {/* Status Filter Pills Row */}
        {showStatusFilters && (
          <div className="flex flex-wrap items-center gap-1.5">
            <span className="font-mono text-[10px] uppercase tracking-caps text-[#64748B] font-semibold mr-1">
              {isDe ? "Status:" : "Status:"}
            </span>

            {/* All */}
            <button
              type="button"
              data-testid="filter-status-all"
              onClick={() => setStatus("all")}
              className={`px-3 py-1 font-mono text-xs uppercase tracking-wider transition-colors border ${
                activeStatus === "all"
                  ? "bg-black text-white border-black font-semibold"
                  : "bg-white text-[#475569] border-[#E2E8F0] hover:border-black hover:text-black"
              }`}
            >
              <span>{isDe ? "Alle" : "All"}</span>
              <span className={`ml-1.5 text-[10px] ${activeStatus === "all" ? "text-slate-300" : "text-[#94A3B8]"}`}>
                ({statusCounts.all})
              </span>
            </button>

            {/* Scanned / Erfasst */}
            <button
              type="button"
              data-testid="filter-status-scanned"
              onClick={() => setStatus("scanned")}
              className={`px-3 py-1 font-mono text-xs uppercase tracking-wider transition-colors border ${
                activeStatus === "scanned"
                  ? "bg-black text-white border-black font-semibold"
                  : "bg-white text-[#475569] border-[#E2E8F0] hover:border-black hover:text-black"
              }`}
            >
              <span>{isDe ? "Erfasst" : "Captured"}</span>
              <span className={`ml-1.5 text-[10px] ${activeStatus === "scanned" ? "text-slate-300" : "text-[#94A3B8]"}`}>
                ({statusCounts.scanned})
              </span>
            </button>

            {/* Pending Review / Prüfung erforderlich */}
            <button
              type="button"
              data-testid="filter-status-pending"
              onClick={() => setStatus("pending")}
              className={`px-3 py-1 font-mono text-xs uppercase tracking-wider transition-colors border flex items-center gap-1.5 ${
                activeStatus === "pending" || activeStatus === "pending_review" || activeStatus === "pruefen"
                  ? "bg-amber-500 text-black border-amber-500 font-semibold"
                  : statusCounts.pending > 0
                  ? "bg-amber-50 text-amber-900 border-amber-200 hover:border-amber-400"
                  : "bg-white text-[#475569] border-[#E2E8F0] hover:border-black hover:text-black"
              }`}
            >
              <span>{isDe ? "Prüfung nötig" : "Needs Review"}</span>
              <span
                className={`text-[10px] font-bold px-1.5 py-0.2 rounded-full ${
                  activeStatus === "pending" || activeStatus === "pending_review" || activeStatus === "pruefen"
                    ? "bg-black text-white"
                    : statusCounts.pending > 0
                    ? "bg-amber-200 text-amber-950"
                    : "text-[#94A3B8]"
                }`}
              >
                {statusCounts.pending}
              </span>
            </button>

            {/* Confirmed / Bestätigt */}
            <button
              type="button"
              data-testid="filter-status-confirmed"
              onClick={() => setStatus("confirmed")}
              className={`px-3 py-1 font-mono text-xs uppercase tracking-wider transition-colors border flex items-center gap-1.5 ${
                activeStatus === "confirmed" || activeStatus === "bestaetigt"
                  ? "bg-emerald-600 text-white border-emerald-600 font-semibold"
                  : "bg-white text-[#475569] border-[#E2E8F0] hover:border-black hover:text-black"
              }`}
            >
              <span>{isDe ? "Geprüft" : "Verified"}</span>
              <span className={`text-[10px] ${activeStatus === "confirmed" || activeStatus === "bestaetigt" ? "text-emerald-100" : "text-[#94A3B8]"}`}>
                ({statusCounts.confirmed})
              </span>
            </button>
          </div>
        )}

        {/* Temporal Presets & Category & Amount Filters Row */}
        <div className="flex flex-wrap items-center gap-2 pt-1 border-t border-[#F1F5F9]">
          {/* Temporal Presets */}
          {showTemporalPresets && (
            <div className="flex flex-wrap items-center gap-1 relative">
              <span className="font-mono text-[10px] uppercase tracking-caps text-[#64748B] font-semibold mr-1 flex items-center gap-1">
                <Calendar className="w-3 h-3" />
                <span>{isDe ? "Zeitraum:" : "Period:"}</span>
              </span>
              {TEMPORAL_PRESETS.map((preset) => {
                const isActive = activePeriod === preset.key;
                return (
                  <button
                    key={preset.key}
                    type="button"
                    data-testid={`filter-period-${preset.key}`}
                    onClick={() => {
                      setPeriod(preset.key);
                      setCustomDateRange({ from: null, to: null });
                      setCustomFrom("");
                      setCustomTo("");
                    }}
                    className={`px-2.5 py-1 font-mono text-[10px] uppercase tracking-wider transition-colors border ${
                      isActive
                        ? "bg-black text-white border-black font-semibold"
                        : "bg-white text-[#475569] border-[#E2E8F0] hover:border-black hover:text-black"
                    }`}
                  >
                    {isDe ? preset.labelDe : preset.labelEn}
                  </button>
                );
              })}

              {/* Custom Date Range Popover Button */}
              <div className="relative">
                <button
                  type="button"
                  data-testid="filter-period-custom-btn"
                  onClick={() => setIsDatePopoverOpen(!isDatePopoverOpen)}
                  className={`px-2.5 py-1 font-mono text-[10px] uppercase tracking-wider transition-colors border flex items-center gap-1 ${
                    activePeriod === "custom"
                      ? "bg-black text-white border-black font-semibold"
                      : "bg-white text-[#475569] border-[#E2E8F0] hover:border-black hover:text-black"
                  }`}
                >
                  <CalendarRange className="w-3 h-3" />
                  <span>{isDe ? "Zeitraum wählen" : "Custom Range"}</span>
                  <ChevronDown className="w-2.5 h-2.5 opacity-60" />
                </button>

                {isDatePopoverOpen && (
                  <div className="absolute left-0 top-full mt-1.5 z-30 w-72 bg-white border border-black shadow-xl p-3 space-y-3 font-mono">
                    <div className="flex items-center justify-between border-b border-[#E2E8F0] pb-2">
                      <span className="text-xs font-bold text-black uppercase tracking-wider">
                        {isDe ? "Zeitraum festlegen" : "Set Date Range"}
                      </span>
                      <button
                        type="button"
                        onClick={() => setIsDatePopoverOpen(false)}
                        className="text-[#94A3B8] hover:text-black p-0.5"
                      >
                        <X className="w-3.5 h-3.5" />
                      </button>
                    </div>

                    <form onSubmit={handleApplyCustomDate} className="space-y-2.5">
                      <div>
                        <label className="block text-[10px] uppercase text-[#64748B] mb-1 font-medium">
                          {isDe ? "Von Datum (inkl.):" : "From Date (incl.):"}
                        </label>
                        <input
                          type="date"
                          value={customFrom}
                          onChange={(e) => setCustomFrom(e.target.value)}
                          className="w-full bg-[#F8FAFC] border border-[#E2E8F0] px-2 py-1 text-xs text-black focus:border-black focus:outline-none"
                        />
                      </div>
                      <div>
                        <label className="block text-[10px] uppercase text-[#64748B] mb-1 font-medium">
                          {isDe ? "Bis Datum (inkl.):" : "To Date (incl.):"}
                        </label>
                        <input
                          type="date"
                          value={customTo}
                          onChange={(e) => setCustomTo(e.target.value)}
                          className="w-full bg-[#F8FAFC] border border-[#E2E8F0] px-2 py-1 text-xs text-black focus:border-black focus:outline-none"
                        />
                      </div>

                      <div className="flex items-center justify-between pt-2 border-t border-[#E2E8F0]">
                        <button
                          type="button"
                          onClick={() => {
                            setCustomFrom("");
                            setCustomTo("");
                            setCustomDateRange({ from: null, to: null });
                            setPeriod("all");
                            setIsDatePopoverOpen(false);
                          }}
                          className="text-[10px] text-[#64748B] hover:text-black underline uppercase"
                        >
                          {isDe ? "Zurücksetzen" : "Reset"}
                        </button>
                        <button
                          type="submit"
                          className="px-3 py-1 bg-black text-white text-[11px] uppercase tracking-wider hover:bg-[#334155]"
                        >
                          {isDe ? "Anwenden" : "Apply"}
                        </button>
                      </div>
                    </form>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Category Dropdown */}
          {showCategoryFilters && (
            <div className="flex items-center gap-1 ml-auto sm:ml-2">
              <span className="font-mono text-[10px] uppercase tracking-caps text-[#64748B] font-semibold mr-1">
                {isDe ? "Kategorie:" : "Category:"}
              </span>
              <select
                data-testid="filter-category-select"
                value={activeCategory}
                onChange={(e) => setCategory(e.target.value)}
                className="bg-white border border-[#E2E8F0] px-2.5 py-1 font-mono text-[11px] text-black focus:border-black focus:outline-none transition-colors"
              >
                <option value="all">{isDe ? `Alle Kategorien (${statusCounts.all})` : `All Categories (${statusCounts.all})`}</option>
                {CATEGORIES.map((cat) => {
                  const count = categoryCounts[cat] || 0;
                  const label = isDe ? CATEGORY_LABELS[cat]?.de || cat : CATEGORY_LABELS[cat]?.en || cat;
                  return (
                    <option key={cat} value={cat}>
                      {label} ({count})
                    </option>
                  );
                })}
              </select>
            </div>
          )}

          {/* Amount Range Chips & Custom Input Popover */}
          {showAmountPresets && (
            <div className="flex flex-wrap items-center gap-1 sm:ml-2 relative">
              <span className="font-mono text-[10px] uppercase tracking-caps text-[#64748B] font-semibold mr-1">
                {isDe ? "Betrag:" : "Amount:"}
              </span>
              {AMOUNT_PRESETS.map((preset) => {
                const isActive = isAmountPresetActive(preset.min, preset.max);
                return (
                  <button
                    key={preset.label}
                    type="button"
                    data-testid={`filter-amount-${preset.label.replace(/\s+/g, "_")}`}
                    onClick={() => {
                      if (isActive) {
                        setAmountRange({ min: null, max: null });
                      } else {
                        setAmountRange({ min: preset.min, max: preset.max });
                      }
                    }}
                    className={`px-2 py-1 font-mono text-[10px] uppercase tracking-wider transition-colors border ${
                      isActive
                        ? "bg-black text-white border-black font-semibold"
                        : "bg-white text-[#475569] border-[#E2E8F0] hover:border-black hover:text-black"
                    }`}
                  >
                    {preset.label}
                  </button>
                );
              })}

              {/* Custom Amount Range Button */}
              <div className="relative">
                <button
                  type="button"
                  data-testid="filter-amount-custom-btn"
                  onClick={() => setIsAmountPopoverOpen(!isAmountPopoverOpen)}
                  className={`px-2 py-1 font-mono text-[10px] uppercase tracking-wider transition-colors border flex items-center gap-1 ${
                    (amountRange.min != null || amountRange.max != null) &&
                    !AMOUNT_PRESETS.some((p) => p.min === amountRange.min && p.max === amountRange.max)
                      ? "bg-black text-white border-black font-semibold"
                      : "bg-white text-[#475569] border-[#E2E8F0] hover:border-black hover:text-black"
                  }`}
                  title={isDe ? "Individuellen Betrag eingeben" : "Custom amount range"}
                >
                  <SlidersHorizontal className="w-2.5 h-2.5" />
                  <span>{isDe ? "Individuell" : "Custom"}</span>
                  <ChevronDown className="w-2.5 h-2.5 opacity-60" />
                </button>

                {isAmountPopoverOpen && (
                  <div className="absolute right-0 sm:left-0 top-full mt-1.5 z-30 w-64 bg-white border border-black shadow-xl p-3 space-y-3 font-mono">
                    <div className="flex items-center justify-between border-b border-[#E2E8F0] pb-2">
                      <span className="text-xs font-bold text-black uppercase tracking-wider">
                        {isDe ? "Betragsbereich (Brutto)" : "Amount Range (Gross)"}
                      </span>
                      <button
                        type="button"
                        onClick={() => setIsAmountPopoverOpen(false)}
                        className="text-[#94A3B8] hover:text-black p-0.5"
                      >
                        <X className="w-3.5 h-3.5" />
                      </button>
                    </div>

                    <form onSubmit={handleApplyCustomAmount} className="space-y-2.5">
                      <div className="flex items-center gap-2">
                        <div className="flex-1">
                          <label className="block text-[10px] uppercase text-[#64748B] mb-1">
                            Min (€)
                          </label>
                          <input
                            type="text"
                            inputMode="decimal"
                            value={customMin}
                            onChange={(e) => setCustomMin(e.target.value)}
                            placeholder="0.00"
                            className="w-full bg-[#F8FAFC] border border-[#E2E8F0] px-2 py-1 text-xs text-black focus:border-black focus:outline-none"
                          />
                        </div>
                        <span className="text-[#94A3B8] pt-4">—</span>
                        <div className="flex-1">
                          <label className="block text-[10px] uppercase text-[#64748B] mb-1">
                            Max (€)
                          </label>
                          <input
                            type="text"
                            inputMode="decimal"
                            value={customMax}
                            onChange={(e) => setCustomMax(e.target.value)}
                            placeholder="999.00"
                            className="w-full bg-[#F8FAFC] border border-[#E2E8F0] px-2 py-1 text-xs text-black focus:border-black focus:outline-none"
                          />
                        </div>
                      </div>

                      <div className="flex items-center justify-between pt-2 border-t border-[#E2E8F0]">
                        <button
                          type="button"
                          onClick={() => {
                            setCustomMin("");
                            setCustomMax("");
                            setAmountRange({ min: null, max: null });
                            setIsAmountPopoverOpen(false);
                          }}
                          className="text-[10px] text-[#64748B] hover:text-black underline uppercase"
                        >
                          {isDe ? "Zurücksetzen" : "Reset"}
                        </button>
                        <button
                          type="submit"
                          className="px-3 py-1 bg-black text-white text-[11px] uppercase tracking-wider hover:bg-[#334155]"
                        >
                          {isDe ? "Anwenden" : "Apply"}
                        </button>
                      </div>
                    </form>
                  </div>
                )}
              </div>
            </div>
          )}
        </div>

        {/* Active Filter Tags Bar (Only rendered when at least one filter is active) */}
        {hasActiveFilters && (
          <div
            data-testid="active-filter-pills"
            className="flex flex-wrap items-center gap-1.5 pt-2 border-t border-[#F1F5F9] font-mono text-[10px]"
          >
            <span className="text-[#64748B] uppercase tracking-caps font-semibold mr-1">
              {isDe ? "Aktive Filter:" : "Active Filters:"}
            </span>

            {searchQuery && (
              <span className="inline-flex items-center gap-1 bg-[#EEF4FC] border border-[#CBD5E1] px-2 py-0.5 text-black">
                <span>{isDe ? `Suche: "${searchQuery}"` : `Search: "${searchQuery}"`}</span>
                <button
                  type="button"
                  onClick={() => setSearchQuery("")}
                  className="hover:text-red-600"
                >
                  <X className="w-2.5 h-2.5" />
                </button>
              </span>
            )}

            {activeStatus !== "all" && (
              <span className="inline-flex items-center gap-1 bg-[#EEF4FC] border border-[#CBD5E1] px-2 py-0.5 text-black">
                <span>
                  Status:{" "}
                  {isDe
                    ? (activeStatus === "scanned"
                        ? "Erfasst"
                        : activeStatus === "pending" || activeStatus === "pending_review"
                        ? "Prüfung erforderlich"
                        : "Bestätigt")
                    : (activeStatus === "scanned"
                        ? "Captured"
                        : activeStatus === "pending" || activeStatus === "pending_review"
                        ? "Review Required"
                        : "Confirmed")}
                </span>
                <button
                  type="button"
                  onClick={() => setStatus("all")}
                  className="hover:text-red-600"
                >
                  <X className="w-2.5 h-2.5" />
                </button>
              </span>
            )}

            {activePeriod !== "all" && (
              <span className="inline-flex items-center gap-1 bg-[#EEF4FC] border border-[#CBD5E1] px-2 py-0.5 text-black">
                <span>
                  {isDe ? "Zeitraum:" : "Period:"}{" "}
                  {activePeriod === "custom"
                    ? `${customDateRange?.from || "—"} bis ${customDateRange?.to || "—"}`
                    : isDe
                    ? (TEMPORAL_PRESETS.find((p) => p.key === activePeriod)?.labelDe || activePeriod)
                    : (TEMPORAL_PRESETS.find((p) => p.key === activePeriod)?.labelEn || activePeriod)}
                </span>
                <button
                  type="button"
                  onClick={() => {
                    setPeriod("all");
                    setCustomDateRange({ from: null, to: null });
                    setCustomFrom("");
                    setCustomTo("");
                  }}
                  className="hover:text-red-600"
                >
                  <X className="w-2.5 h-2.5" />
                </button>
              </span>
            )}

            {activeCategory !== "all" && (
              <span className="inline-flex items-center gap-1 bg-[#EEF4FC] border border-[#CBD5E1] px-2 py-0.5 text-black">
                <span>
                  {isDe ? "Kategorie:" : "Category:"}{" "}
                  {isDe
                    ? (CATEGORY_LABELS[activeCategory as ReceiptCategory]?.de || activeCategory)
                    : (CATEGORY_LABELS[activeCategory as ReceiptCategory]?.en || activeCategory)}
                </span>
                <button
                  type="button"
                  onClick={() => setCategory("all")}
                  className="hover:text-red-600"
                >
                  <X className="w-2.5 h-2.5" />
                </button>
              </span>
            )}

            {(amountRange.min != null || amountRange.max != null) && (
              <span className="inline-flex items-center gap-1 bg-[#EEF4FC] border border-[#CBD5E1] px-2 py-0.5 text-black">
                <span>
                  {isDe ? "Betrag:" : "Amount:"} {amountRange.min != null ? `${amountRange.min} €` : "0 €"} –{" "}
                  {amountRange.max != null ? `${amountRange.max} €` : "∞"}
                </span>
                <button
                  type="button"
                  onClick={() => {
                    setAmountRange({ min: null, max: null });
                    setCustomMin("");
                    setCustomMax("");
                  }}
                  className="hover:text-red-600"
                >
                  <X className="w-2.5 h-2.5" />
                </button>
              </span>
            )}

            <button
              type="button"
              onClick={() => {
                resetFilters();
                setCustomMin("");
                setCustomMax("");
                setCustomFrom("");
                setCustomTo("");
              }}
              className="text-[#475569] underline hover:text-black ml-1 uppercase tracking-caps"
            >
              {isDe ? "Alle Filter löschen" : "Clear all filters"}
            </button>
          </div>
        )}
      </div>
    </div>
  );
}
