'use client';

import {
  Award,
  Baby,
  Briefcase,
  Cake,
  Gem,
  Gift,
  GraduationCap,
  Heart,
  MoreHorizontal,
  PartyPopper,
  Plane,
  Sparkles,
  TreePine,
  Users,
  type LucideIcon,
} from 'lucide-react';
import {
  BOOKING_EVENT_TYPES,
  type BookingEventType,
  type EventTypeId,
} from '@/domain/booking/event-types';
import { getEventTypeLabel } from '@/presentation/i18n/booking-events';
import type { Language } from '@/domain/language/entities';

const ICON_MAP: Record<BookingEventType['icon'], LucideIcon> = {
  cake: Cake,
  heart: Heart,
  gem: Gem,
  sparkles: Sparkles,
  baby: Baby,
  'graduation-cap': GraduationCap,
  briefcase: Briefcase,
  users: Users,
  'party-popper': PartyPopper,
  plane: Plane,
  award: Award,
  gift: Gift,
  'tree-pine': TreePine,
  'more-horizontal': MoreHorizontal,
};

interface EventTypePickerProps {
  language: Language;
  selected: EventTypeId | '';
  onSelect: (id: EventTypeId) => void;
  title: string;
  subtitle: string;
}

export default function EventTypePicker({
  language,
  selected,
  onSelect,
  title,
  subtitle,
}: EventTypePickerProps) {
  return (
    <div className="mb-8">
      <h3 className="font-serif text-xl tracking-tight text-[#101724] sm:text-2xl">{title}</h3>
      <p className="mt-1 mb-5 text-sm text-[#6B665F]">{subtitle}</p>

      <div className="grid grid-cols-2 gap-2.5 sm:grid-cols-3 sm:gap-3 lg:grid-cols-5">
        {BOOKING_EVENT_TYPES.map((event) => {
          const Icon = ICON_MAP[event.icon];
          const isActive = selected === event.id;

          return (
            <button
              key={event.id}
              type="button"
              onClick={() => onSelect(event.id)}
              className={`group relative min-h-[5.25rem] touch-manipulation overflow-hidden rounded-2xl border p-3 text-left transition-all active:scale-[0.98] sm:min-h-[5.5rem] sm:p-4 ${
                isActive
                  ? 'border-[#c99a2e] bg-gradient-to-br from-[#fff6dc] to-[#fffcf7] shadow-lg shadow-[#c99a2e]/15 ring-2 ring-[#c99a2e]/30'
                  : 'border-[#EDE6D9] bg-[#FFFCF7] hover:border-[#c99a2e]/50 hover:bg-white'
              }`}
            >
              <div
                className={`mb-3 flex h-10 w-10 items-center justify-center rounded-xl transition-colors ${
                  isActive
                    ? 'bg-gradient-to-br from-[#c99a2e] to-[#d4a73d] text-[#241806]'
                    : 'bg-[#F8F5F0] text-[#B38B4D] group-hover:bg-[#fff6dc]'
                }`}
              >
                <Icon className="h-5 w-5" aria-hidden />
              </div>
              <span className="block text-xs sm:text-sm font-semibold leading-snug text-[#101724] line-clamp-2">
                {getEventTypeLabel(language, event.id)}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}