'use client';

import React, {useEffect, useState} from 'react';
import {useTranslations} from 'next-intl';
import Link from 'next/link';
import {Spinner} from 'react-bootstrap';

import type {Evenement} from '@/types/stage';
import {getUpcomingEvents} from '@/services/evenementService';
import {pillToneForType, formatEventDateParts, cleanEventTitle} from '@/utils/eventDisplay';

import './UpcomingEventsSection.css';
import {evenementHref} from '@/utils/evenementHref';

interface UpcomingEventsSectionProps {
  locale: string;
  /** Accueil de domaine (spec L77) : ne garde que les événements du domaine. */
  domaineId?: number;
  /** Lien « voir tout » ; par défaut l'agenda complet. */
  seeAllHref?: string;
  title?: string;
}

const MAX_EVENTS = 6;

export default function UpcomingEventsSection({locale, domaineId, seeAllHref, title}: UpcomingEventsSectionProps) {
  const t = useTranslations('HomePage');
  const [events, setEvents] = useState<Evenement[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getUpcomingEvents({itemsPerPage: MAX_EVENTS, ...(domaineId ? {domaine: domaineId} : {})})
      .then((fetched) => setEvents(fetched ?? []))
      .catch(() => setEvents([]))
      .finally(() => setLoading(false));
  }, [domaineId]);

  return (
    <section className="tk-upcoming py-5">
      <div className="container">
        <div className="tk-section-head" data-ghost="Da zont">
          <h2>{title ?? t('upcoming_title')}</h2>
          {!loading && events.length > 0 && (
            <span className="tk-section-head__count">{events.length}</span>
          )}
          <span className="tk-section-head__spacer" />
          <Link href={seeAllHref ?? `/${locale}/evenements`} className="tk-section-link">
            {t('upcoming_see_all')} →
          </Link>
        </div>

        {loading ? (
          <div className="text-center py-5">
            <Spinner animation="border" role="status" />
          </div>
        ) : events.length === 0 ? (
          <p className="tk-upcoming__empty">{t('upcoming_empty')}</p>
        ) : (
          <div className="row g-3 g-md-4 mt-1">
            {events.map((event) => {
              const date = formatEventDateParts(event.eveDate, locale);
              const tone = pillToneForType(event.eveTev?.tevLibelle);
              const orgs = (event.aenOrganisateurs ?? [])
                .map((o) => o.aenLibelle)
                .filter(Boolean)
                .slice(0, 2)
                .join(', ');
              return (
                <div className="col-12 col-md-6 col-lg-4" key={event.eveId}>
                  <Link href={evenementHref(locale, event.eveId, `${event.eveTev?.tevLibelle ?? ''} ${event.eveVil?.vilNom ?? ''}`)} className="tk-evt">
                    <span className="tk-date-chip">
                      <span className="tk-date-chip__dow d-block">{date.dow}</span>
                      <span className="tk-date-chip__day d-block">{date.day}</span>
                      <span className="tk-date-chip__month d-block">{date.month}</span>
                    </span>
                    <span className="tk-evt__body">
                      <span className={`tk-pill${tone === 'neutral' ? '' : ` tk-pill--${tone}`}`}>
                        {event.eveTev?.tevLibelle}
                      </span>
                      <span className="tk-evt__title d-block">
                        {cleanEventTitle(event.eveLibelle) || `${event.eveTev?.tevLibelle ?? ''} — ${event.eveVil?.vilNom ?? ''}`}
                      </span>
                      <span className="tk-evt__meta d-block">
                        {event.eveVil?.vilNom}
                        {event.eveHeure ? ` · ${event.eveHeure}` : ''}
                      </span>
                      {orgs && <span className="tk-evt__orgs d-block">{orgs}</span>}
                    </span>
                  </Link>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </section>
  );
}