"use client";

import { motion } from 'motion/react';
import { getCuisineLabel } from '@/lib/cuisine';
import { useTranslation } from '@/lib/i18n/context';

/**
 * Zeigt die aktiven Vorfilter einer Session (Ort, Umkreis, Kueche) kompakt an.
 *
 * UPDATE (Card-Redesign nach Mockup-Vorlage): Pillen sind jetzt SOLIDE
 * Farbflaechen statt der vorherigen 20%-transparenten Tints - Ort-Pille in
 * Yumder-Pink, Kueche-Pillen in Yumder-Teal, beide mit weissem/dunklem Text
 * + Schatten, exakt wie im vom Product Owner bereitgestellten HTML-Mockup.
 * Container nutzt jetzt die "glass-inner"-Optik (dezenter, kein starker
 * Rahmen/Schatten wie vorher) statt der aeusseren Glass-Card-Optik.
 */
interface ActiveFiltersProps {
  session: {
    city?: string;
    radius_km?: number;
    cuisine_tags?: string;
    diet_filter?: string;
  };
}

export function ActiveFilters({ session }: ActiveFiltersProps) {
  const { t, locale } = useTranslation();
  const tags: string[] = session.cuisine_tags ? JSON.parse(session.cuisine_tags) : [];

  const chips: { label: string; tone: 'location' | 'cuisine' }[] = [];
  if (session.city) {
    chips.push({ label: `${session.city}${session.radius_km ? ` · ${session.radius_km} km` : ''}`, tone: 'location' });
  }
  tags.forEach((tag) => chips.push({ label: getCuisineLabel(tag, locale), tone: 'cuisine' }));

  return (
    <div className="rounded-2xl border border-white/5 bg-neutral-800 p-4 text-sm">
      <p className="font-bold text-yumder-teal mb-3">{t.sessionInfo.activeFiltersTitle}</p>
      <div className="flex flex-wrap gap-2">
        {chips.length === 0 && (
          <span className="text-neutral-500">{t.sessionInfo.noFiltersActive}</span>
        )}
        {chips.map((chip, i) => (
          <motion.span
            key={chip.label + i}
            initial={{ opacity: 0, y: 4 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.25, delay: i * 0.04 }}
            className={`text-sm px-4 py-1.5 rounded-full font-bold shadow-md ${
              chip.tone === 'location'
                ? 'bg-yumder-pink text-white'
                : 'bg-yumder-teal text-white'
            }`}
          >
            {chip.label}
          </motion.span>
        ))}
      </div>
    </div>
  );
}