/**
 * Trouve-KA — filtres de recherche en pastilles
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 */

"use client";

import { cn } from "@/lib/utils";

/** Filtres actifs de la page de résultats. */
export interface SearchFilters {
  category?: string;
  language?: string;
  quebecOnly: boolean;
  images?: boolean;
}

interface FilterPillsProps {
  filters: SearchFilters;
  onChange: (next: SearchFilters) => void;
}

interface Pill {
  label: string;
  active: boolean;
  next: SearchFilters;
}

export function FilterPills({ filters, onChange }: FilterPillsProps) {
  const allActive =
    !filters.category && !filters.language && !filters.quebecOnly && !filters.images;

  const pills: Pill[] = [
    { label: "Tout", active: allActive, next: { quebecOnly: false } },
    {
      label: "Images",
      active: Boolean(filters.images),
      next: { ...filters, images: !filters.images },
    },
    {
      label: "Actualités",
      active: filters.category === "news",
      next: {
        ...filters,
        category: filters.category === "news" ? undefined : "news",
      },
    },
    {
      label: "Gouvernement",
      active: filters.category === "government",
      next: {
        ...filters,
        category: filters.category === "government" ? undefined : "government",
      },
    },
    {
      label: "Français",
      active: filters.language === "fr",
      next: {
        ...filters,
        language: filters.language === "fr" ? undefined : "fr",
      },
    },
    {
      label: "English",
      active: filters.language === "en",
      next: {
        ...filters,
        language: filters.language === "en" ? undefined : "en",
      },
    },
    {
      label: "Québec seulement",
      active: filters.quebecOnly,
      next: { ...filters, quebecOnly: !filters.quebecOnly },
    },
  ];

  return (
    <div
      role="group"
      aria-label="Filtres de recherche"
      className="flex flex-wrap gap-2"
    >
      {pills.map((pill) => (
        <button
          key={pill.label}
          type="button"
          aria-pressed={pill.active}
          onClick={() => onChange(pill.next)}
          className={cn(
            "gk-mono whitespace-nowrap rounded-full border-[1.5px] border-ink px-3.5 py-1.5 text-[11px] font-bold uppercase tracking-[0.08em] shadow-[2px_2px_0_rgba(20,24,20,0.12)] transition-[background,color,transform,box-shadow] duration-150 hover:-translate-y-px hover:shadow-[3px_3px_0_rgba(20,24,20,0.2)] active:translate-y-0 active:shadow-none",
            pill.active
              ? "bg-ink text-lime"
              : "bg-surface text-ink-2 hover:bg-lime hover:text-ink",
          )}
        >
          {pill.label}
        </button>
      ))}
    </div>
  );
}