'use client';

import {useTranslations} from 'next-intl';
import {FaMapMarkedAlt} from 'react-icons/fa';

import CarteLeafletMultiMarker from '@/components/global/CarteLeafLetMultiMarker';
import type {FormationStage} from '@/types/stage';
import {resolveSessionLocation, resolveStageLocation} from '@/utils/stageAddress';

interface SessionsMapProps {
  stage: FormationStage;
  locale: string;
}

/**
 * Carte des sessions du stage, un marqueur par session à l'endroit choisi en Kasour.
 * Quand toutes les sessions se tiennent au lieu du stage, la carte du lieu suffit : rien de plus.
 */
export default function SessionsMap({stage, locale}: SessionsMapProps) {
  const t = useTranslations('Common');
  const lieux = stage.sessions
    .map(session => ({session, lieu: resolveSessionLocation(session, stage)}))
    .filter(({lieu}) => lieu.geoX && lieu.geoY);

  if (!lieux.some(({lieu}) => lieu.source === 'session')) return null;

  const centre = resolveStageLocation(stage);
  const positionMap = centre.geoX && centre.geoY ? [centre.geoX, centre.geoY] : [lieux[0].lieu.geoX, lieux[0].lieu.geoY];

  return (
    <div className="tk-section-card" data-testid="sessions-map">
      <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('sessions_map_title')}
        </h2>
      </div>
      <div className="tk-section-card-body">
        <div className="tk-map-container" style={{height: '24rem'}}>
          <CarteLeafletMultiMarker
            positionMap={positionMap}
            zoomMap={Math.max(6, (centre.geoZ || 10) - 2)}
            locale={locale}
            lieux={lieux.map(({session, lieu}) => ({
              idEvent: session.fssId ?? session.fssFod.fodNom,
              title: session.fssFod.fodNom,
              position: [lieu.geoX, lieu.geoY],
              ville: lieu.placeName ? `${lieu.placeName}, ${lieu.libelle}` : lieu.libelle,
              date: session.fssDateDebut,
            }))}
          />
        </div>
      </div>
    </div>
  );
}