'use client';
import React from 'react';
import {useTranslations} from 'next-intl';
import {FaMapMarkedAlt} from 'react-icons/fa';
import CarteLeafletMultiMarker from '@/components/global/CarteLeafLetMultiMarker';
import {acteurHref} from '@/utils/acteurHref';
import type {EpciActeursCarte} from '@/types/ville';

interface EpciActeursMapProps {
  locale: string;
  carte: EpciActeursCarte;
}

const ZOOM_PAR_DEFAUT = 10;

/**
 * Carte de l'EPCI et de ses acteurs actifs (spec L171) : un marqueur par acteur géolocalisé
 * (coordonnées propres, sinon celles de sa commune, résolues par l'API), ouvrant sa fiche.
 */
export default function EpciActeursMap({locale, carte}: EpciActeursMapProps) {
  const t = useTranslations('EpciDetailsPage');
  const lieux = carte.acteurs
    .filter((acteur) => acteur.geoX && acteur.geoY)
    .map((acteur) => ({
      idEvent: acteur.aenId,
      title: acteur.aenLibelle,
      position: [Number(acteur.geoX), Number(acteur.geoY)],
      ville: acteur.vilNom,
      href: acteurHref(locale, acteur),
    }));
  if (lieux.length === 0) return null;

  const centre = carte.centre ? [carte.centre.geoX, carte.centre.geoY] : lieux[0].position;
  const zoom = carte.centre?.zoom || ZOOM_PAR_DEFAUT;

  return (
    <div className="tk-section-card" data-testid="epci-acteurs-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-green">
            <FaMapMarkedAlt />
          </span>
          {t('map_title')}
        </h2>
      </div>
      <div className="tk-section-card-body">
        <div className="tk-map-container" style={{height: '24rem'}}>
          <CarteLeafletMultiMarker positionMap={centre} zoomMap={zoom} locale={locale} lieux={lieux} />
        </div>
      </div>
    </div>
  );
}