'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 {Place} from '@/types/ville';

interface VillePlacesMapProps {
  locale: string;
  ville: {vilNom: string; vilGeoX: number; vilGeoY: number; vilGeoZoom?: number | null};
  places: Place[];
}

/**
 * Carte de la commune avec un marqueur pour la ville et un par lieu géolocalisé en Kasour.
 * Sans lieu géolocalisé, la carte simple de la ville (dans l'en-tête) suffit : rien de plus.
 */
export default function VillePlacesMap({locale, ville, places}: VillePlacesMapProps) {
  const t = useTranslations('VilleDetailsPage');
  const geolocalisees = places.filter((place) => place.plaGeoX && place.plaGeoY);
  if (geolocalisees.length === 0) {
    return null;
  }

  const lieux = [
    {idEvent: 'ville', title: ville.vilNom, position: [ville.vilGeoX, ville.vilGeoY], ville: ville.vilNom},
    ...geolocalisees.map((place) => ({
      idEvent: place.plaId ?? place.plaLibelle,
      title: place.plaLibelle,
      position: [Number(place.plaGeoX), Number(place.plaGeoY)],
      ville: [place.plaAdresse1, place.plaAdresse2].filter(Boolean).join(', ') || ville.vilNom,
    })),
  ];

  return (
    <div className="tk-section-card" data-testid="ville-places-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-blue">
            <FaMapMarkedAlt />
          </span>
          {t('places_map_title')}
        </h2>
      </div>
      <div className="tk-section-card-body">
        <div className="tk-map-container" style={{height: '24rem'}}>
          <CarteLeafletMultiMarker positionMap={[ville.vilGeoX, ville.vilGeoY]} zoomMap={ville.vilGeoZoom || 12} locale={locale} lieux={lieux} />
        </div>
      </div>
    </div>
  );
}