Spanglish/frontend/src/app/(public)/components/NextEventSection.tsx

'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { useLanguage } from '@/context/LanguageContext';
import { eventsApi, Event } from '@/lib/api';
import { formatPrice, formatDateLong, formatTime } from '@/lib/utils';
import { CalendarIcon, MapPinIcon, ClockIcon } from '@heroicons/react/24/outline';

interface NextEventSectionProps {
  initialEvent?: Event | null;
}

export default function NextEventSection({ initialEvent }: NextEventSectionProps) {
  const { t, locale } = useLanguage();
  const [nextEvent, setNextEvent] = useState<Event | null>(initialEvent ?? null);
  const [loading, setLoading] = useState(initialEvent === undefined);

  useEffect(() => {
    if (initialEvent !== undefined) {
      if (initialEvent) {
        const endTime = initialEvent.endDatetime || initialEvent.startDatetime;
        if (new Date(endTime).getTime() <= Date.now()) {
          setNextEvent(null);
          setLoading(true);
          eventsApi.getNextUpcoming()
            .then(({ event }) => setNextEvent(event))
            .catch(console.error)
            .finally(() => setLoading(false));
          return;
        }
      }
      return;
    }
    eventsApi.getNextUpcoming()
      .then(({ event }) => setNextEvent(event))
      .catch(console.error)
      .finally(() => setLoading(false));
  }, [initialEvent]);

  const formatDate = (dateStr: string) => formatDateLong(dateStr, locale as 'en' | 'es');
  const fmtTime = (dateStr: string) => formatTime(dateStr, locale as 'en' | 'es');

  const title = nextEvent
    ? (locale === 'es' && nextEvent.titleEs ? nextEvent.titleEs : nextEvent.title)
    : '';
  const description = nextEvent
    ? (locale === 'es'
        ? (nextEvent.shortDescriptionEs || nextEvent.descriptionEs || nextEvent.shortDescription || nextEvent.description)
        : (nextEvent.shortDescription || nextEvent.description))
    : '';

  if (loading) {
    return (
      <div className="text-center py-12">
        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full mx-auto" />
      </div>
    );
  }

  if (!nextEvent) {
    return (
      <div className="text-center py-12 text-gray-500">
        <CalendarIcon className="w-16 h-16 mx-auto mb-4 text-gray-300" />
        <p className="text-lg">{t('home.nextEvent.noEvents')}</p>
        <p className="mt-2">{t('home.nextEvent.stayTuned')}</p>
      </div>
    );
  }

  return (
    <Link href={`/events/${nextEvent.id}`} className="block group">
      <div className="bg-gray-50 border border-gray-200 rounded-2xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">
        <div className="flex flex-col md:flex-row">
          {/* Banner */}
          {nextEvent.bannerUrl ? (
            <div className="relative w-full md:w-2/5 flex-shrink-0">
              <img
                src={nextEvent.bannerUrl}
                alt={title}
                className="w-full h-48 md:h-full object-cover"
              />
            </div>
          ) : (
            <div className="w-full md:w-2/5 flex-shrink-0 h-48 md:h-auto bg-gradient-to-br from-primary-yellow/20 to-secondary-gray flex items-center justify-center">
              <CalendarIcon className="w-16 h-16 text-gray-300" />
            </div>
          )}

          {/* Info */}
          <div className="flex-1 p-5 md:p-8 flex flex-col justify-between">
            <div>
              <h3 className="text-xl md:text-2xl font-bold text-primary-dark group-hover:text-brand-navy transition-colors">
                {title}
              </h3>
              {description && (
                <p className="mt-2 text-sm md:text-base text-gray-600 line-clamp-2">
                  {description}
                </p>
              )}

              <div className="mt-4 md:mt-5 space-y-2">
                <div className="flex items-center gap-2.5 text-gray-700 text-sm">
                  <CalendarIcon className="w-4 h-4 text-primary-yellow flex-shrink-0" />
                  <span>{formatDate(nextEvent.startDatetime)}</span>
                </div>
                <div className="flex items-center gap-2.5 text-gray-700 text-sm">
                  <ClockIcon className="w-4 h-4 text-primary-yellow flex-shrink-0" />
                  <span>{fmtTime(nextEvent.startDatetime)}</span>
                </div>
                <div className="flex items-center gap-2.5 text-gray-700 text-sm">
                  <MapPinIcon className="w-4 h-4 text-primary-yellow flex-shrink-0" />
                  <span>{nextEvent.location}</span>
                </div>
              </div>
            </div>

            <div className="mt-5 md:mt-6 flex items-center justify-between gap-4">
              <div>
                <span className="text-2xl md:text-3xl font-bold text-primary-dark">
                  {nextEvent.price === 0
                    ? t('events.details.free')
                    : formatPrice(nextEvent.price, nextEvent.currency)}
                </span>
                {!nextEvent.externalBookingEnabled && nextEvent.availableSeats != null && (
                  <p className="text-xs text-gray-500 mt-0.5">
                    {nextEvent.availableSeats} {t('events.details.spotsLeft')}
                  </p>
                )}
              </div>
              <span className="inline-flex items-center bg-primary-yellow text-primary-dark font-semibold py-2.5 px-5 rounded-xl text-sm transition-all duration-200 group-hover:bg-yellow-400 flex-shrink-0">
                {t('common.moreInfo')}
              </span>
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
}