"use client";

import { useRouter, usePathname, useSearchParams } from "next/navigation";
import {
  LOG_CATEGORIES,
  LOG_CATEGORY_LABELS,
  LOG_CATEGORY_COLORS,
  LOG_RANGES,
  LOG_RANGE_LABELS,
  type LogCategory,
  type LogRange,
} from "@/lib/logConstants";

export function LogFilters({
  category,
  range,
  counts,
  total,
  capped,
}: {
  category: LogCategory | "all";
  range: LogRange;
  counts: Record<LogCategory, number>;
  total: number;
  capped: boolean;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  function apply(next: { cat?: string; range?: string }) {
    const params = new URLSearchParams(searchParams.toString());
    if (next.cat !== undefined) {
      if (next.cat === "all") params.delete("cat");
      else params.set("cat", next.cat);
    }
    if (next.range !== undefined) params.set("range", next.range);
    params.delete("page");
    router.push(`${pathname}?${params.toString()}`);
  }

  const totalAll = (Object.values(counts) as number[]).reduce((a, b) => a + b, 0);

  return (
    <div className="mb-6 flex flex-col gap-4 border-b border-white/10 pb-5">
      <div className="flex flex-wrap gap-2">
        <Pill active={category === "all"} onClick={() => apply({ cat: "all" })} label="Alle" count={totalAll} />
        {LOG_CATEGORIES.map((c) => (
          <Pill
            key={c}
            active={category === c}
            onClick={() => apply({ cat: c })}
            label={LOG_CATEGORY_LABELS[c]}
            count={counts[c]}
            color={LOG_CATEGORY_COLORS[c]}
          />
        ))}
      </div>

      <div className="flex flex-wrap items-center gap-2">
        <span className="text-[0.65rem] uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mr-1">Zeitraum</span>
        {LOG_RANGES.map((r) => (
          <button
            key={r}
            type="button"
            onClick={() => apply({ range: r })}
            className={`text-xs rounded-full px-3 py-1.5 border transition-colors ${
              range === r
                ? "border-white bg-white/10 text-[var(--rk-ink)]"
                : "border-white/15 text-[var(--rk-ink-muted)] hover:border-white/40"
            }`}
          >
            {LOG_RANGE_LABELS[r]}
          </button>
        ))}
        <span className="ml-auto text-xs text-[var(--rk-ink-muted)] tabular-nums">
          {total} {total === 1 ? "Eintrag" : "Einträge"}
        </span>
      </div>

      {capped && (
        <p className="text-[0.7rem] text-amber-400/90">
          Hinweis: In diesem Zeitraum gibt es sehr viele Einträge — es werden die neuesten pro Quelle angezeigt. Für
          ältere einen kürzeren Zeitraum wählen.
        </p>
      )}
    </div>
  );
}

function Pill({
  active,
  onClick,
  label,
  count,
  color,
}: {
  active: boolean;
  onClick: () => void;
  label: string;
  count: number;
  color?: string;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={`text-xs rounded-full px-3 py-1.5 border transition-colors inline-flex items-center gap-1.5 ${
        active ? "border-white bg-white/10 text-[var(--rk-ink)]" : "border-white/15 text-[var(--rk-ink-muted)] hover:border-white/40"
      }`}
    >
      {color && <span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ background: color }} />}
      {label}
      <span className="tabular-nums text-[var(--rk-ink-muted)]">{count}</span>
    </button>
  );
}