'use client';
import React from 'react';
import {useTranslations} from 'next-intl';
import {FaMapMarkedAlt} from 'react-icons/fa';
import CarteLeafletMultiMarker from '@/components/global/CarteLeafLetMultiMarker';
import type {EnsembleEvenementEvenement} from '@/services/ensembleEvenementService';

interface EnsembleEvenementCarteProps {
  evenements: EnsembleEvenementEvenement[] | undefined;
  locale: string;
}

/** Carte des événements localisés d'un ensemble (spec L249) : la place quand elle est géolocalisée, la ville sinon. */
export default function EnsembleEvenementCarte({evenements, locale}: EnsembleEvenementCarteProps) {
  const t = useTranslations('EnsembleEvenementsDetailsPage');
  const lieux = (evenements ?? [])
    .map((eve) => {
      const geoX = eve.evePla?.plaGeoX || eve.eveVil?.vilGeoX;
      const geoY = eve.evePla?.plaGeoY || eve.eveVil?.vilGeoY;
      if (!geoX || !geoY) return null;
      const type = eve.eveType?.tevLibelle ?? eve.eveTev?.tevLibelle ?? '';
      const date = typeof eve.eveDate === 'string' ? eve.eveDate : (eve.eveDate as unknown as {date?: string})?.date;
      return {
        idEvent: eve.eveId,
        title: eve.eveLibelle?.trim() || `${type} ${eve.eveVil?.vilNom ?? ''}`.trim(),
        position: [Number(geoX), Number(geoY)],
        ville: eve.evePla?.plaLibelle ? `${eve.evePla.plaLibelle}, ${eve.eveVil?.vilNom ?? ''}` : eve.eveVil?.vilNom ?? '',
        date: date ? String(date).slice(0, 10) : undefined,
        type,
      };
    })
    .filter((lieu): lieu is NonNullable<typeof lieu> => lieu !== null);
  if (lieux.length === 0) return null;

  return (
    <div className="tk-section-card" data-testid="ensemble-carte">
      <div className="tk-section-card-header">
        <h2 className="tk-section-card-title">
          <span className="tk-section-card-title-icon tk-section-card-title-icon-orange">
            <FaMapMarkedAlt />
          </span>
          {t('map_title')}
        </h2>
      </div>
      <div className="tk-section-card-body">
        <div className="tk-map-container" style={{height: '24rem'}}>
          <CarteLeafletMultiMarker positionMap={lieux[0].position} zoomMap={9} locale={locale} lieux={lieux} />
        </div>
      </div>
    </div>
  );
}