"use client";

import { useRef, useState, useMemo, ReactNode } from 'react';
import { motion } from 'motion/react';
import { useTranslation } from '@/lib/i18n/context';

interface ChipOption {
  value: string;
  label: string;
  variant?: 'default' | 'diet';
}

interface ToggleChipBarProps {
  options: ChipOption[];
  selected: string[];
  onToggle: (value: string) => void;
  searchable?: boolean;
  leadingSlot?: ReactNode;
}

// Horizontale, scrollbare Filter-Chips (Vorfilter: Umkreis, Ernaehrungsform, Kueche, Preis).
//
// i18n-Schritt 6: Such-Platzhalter ("Küche suchen...") und "Keine Treffer"
// waren bisher hartcodiert Deutsch, unabhaengig von der gewaehlten Sprache.
// Jetzt ueber t.filters.* uebersetzt. Hinweis: Diese Komponente wird auch im
// (bewusst unuebersetzten) Admin-Sponsoring-Formular genutzt - dort greift
// automatisch dieselbe globale Sprachauswahl wie im Rest der App. Das ist ein
// akzeptierter Trade-off (siehe Ruecksprache Product Owner: Admin-Bereich
// bleibt inhaltlich Deutsch, wird aber i.d.R. nur vom Betreiber selbst mit
// DE-Einstellung genutzt).
export function ToggleChipBar({ options, selected, onToggle, searchable = false, leadingSlot }: ToggleChipBarProps) {
  const { t } = useTranslation();
  const scrollRef = useRef<HTMLDivElement>(null);
  const isDragging = useRef(false);
  const startX = useRef(0);
  const startScroll = useRef(0);
  const [search, setSearch] = useState('');

  function onMouseDown(e: React.MouseEvent) {
    if (!scrollRef.current) return;
    isDragging.current = true;
    startX.current = e.pageX;
    startScroll.current = scrollRef.current.scrollLeft;
  }

  function onMouseMove(e: React.MouseEvent) {
    if (!isDragging.current || !scrollRef.current) return;
    const dx = e.pageX - startX.current;
    scrollRef.current.scrollLeft = startScroll.current - dx;
  }

  function stopDragging() {
    isDragging.current = false;
  }

  const filtered = searchable && search
    ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
    : options;

  const sorted = useMemo(() => {
    const selectedOnes = filtered.filter((o) => selected.includes(o.value));
    const restOnes = filtered.filter((o) => !selected.includes(o.value));
    return [...selectedOnes, ...restOnes];
  }, [filtered, selected]);

  return (
    <div className="flex flex-col gap-2">
      {searchable && (
        <input
          placeholder={t.filters.cuisineSearchPlaceholder}
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="bg-neutral-800 text-neutral-100 placeholder-neutral-400 rounded-lg px-3 py-2 text-sm"
        />
      )}
      <div
        ref={scrollRef}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={stopDragging}
        onMouseLeave={stopDragging}
        className={`flex flex-wrap gap-2 px-1 py-2 max-h-32 overflow-y-auto ${
          searchable ? '' : 'flex-nowrap overflow-x-auto scrollbar-hide cursor-grab active:cursor-grabbing'
        }`}
      >
        {leadingSlot}
        {sorted.map((opt) => {
          const isActive = selected.includes(opt.value);
          const isDiet = opt.variant === 'diet';
          return (
            <motion.button
              key={opt.value}
              layout
              transition={{ type: 'spring', stiffness: 500, damping: 35 }}
              onClick={() => onToggle(opt.value)}
              className={`shrink-0 whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition-colors select-none
                ${isActive
                  ? isDiet
                    ? 'bg-yumder-teal text-black shadow-[0_0_12px_rgba(0,194,168,0.5)]'
                    : 'bg-yumder-pink text-white shadow-[0_0_12px_rgba(254,60,114,0.5)]'
                  : isDiet
                    ? 'bg-neutral-800 text-yumder-teal/80 border border-yumder-teal/30 hover:bg-neutral-700'
                    : 'bg-neutral-800 text-neutral-300 hover:bg-neutral-700'}`}
            >
              {opt.label}
            </motion.button>
          );
        })}
        {sorted.length === 0 && !leadingSlot && (
          <p className="text-neutral-500 text-sm px-1">{t.filters.noResults}</p>
        )}
      </div>
    </div>
  );
}