'use client';

import Link from 'next/link';
import {useTranslations} from 'next-intl';
import {FaLayerGroup} from 'react-icons/fa';

import type {EnsembleEvenementEvenement} from '@/services/ensembleEvenementService';
import {evenementLibelle} from '@/utils/ficheTitle';
import {evenementHref} from '@/utils/evenementHref';
import {ensembleEvenementHref} from '@/utils/ensembleEvenementHref';

export interface EnsembleVoirAussi {
  eesId: number;
  eesLibelle: string;
  logoUrl: string | null;
  evenements: EnsembleEvenementEvenement[];
}

interface VoirAussiEnsemblesProps {
  ensembles: EnsembleVoirAussi[] | undefined;
  locale: string;
  /** L'événement de la fiche courante, exclu de la liste des frères. */
  currentEveId: number;
}

/** Bloc « Voir aussi » : les ensembles dont l'événement fait partie et leurs autres événements. */
export default function VoirAussiEnsembles({ensembles, locale, currentEveId}: VoirAussiEnsemblesProps) {
  const t = useTranslations('Common');

  if (!ensembles || ensembles.length === 0) return null;

  return (
    <div className="tk-section-card" data-testid="voir-aussi-section">
      <div className="tk-section-card-header">
        <h2 className="tk-section-card-title">
          <span className="tk-section-card-title-icon tk-section-card-title-icon-blue">
            <FaLayerGroup />
          </span>
          {t('voir_aussi_title')}
        </h2>
      </div>
      <div className="tk-section-card-body d-flex flex-column gap-4">
        {ensembles.map(ensemble => {
          const freres = ensemble.evenements.filter(eve => eve.eveId !== currentEveId);

          return (
            <div key={ensemble.eesId}>
              <Link href={ensembleEvenementHref(locale, ensemble.eesId, ensemble.eesLibelle)} className="d-inline-flex align-items-center gap-3">
                {ensemble.logoUrl && (
                  <img src={ensemble.logoUrl} alt={ensemble.eesLibelle} style={{maxHeight: '3rem', maxWidth: '8rem', objectFit: 'contain'}} />
                )}
                <span className="fw-semibold">{ensemble.eesLibelle}</span>
              </Link>
              {freres.length > 0 && (
                <ul className="mt-2 mb-0 ps-3">
                  {freres.map(eve => (
                    <li key={eve.eveId}>
                      <Link href={evenementHref(locale, eve.eveId, evenementLibelle(eve, ''))}>
                        {evenementLibelle(eve, new Intl.DateTimeFormat(locale, {dateStyle: 'long'}).format(new Date(eve.eveDate)))}
                      </Link>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}