'use client';

import React, {useMemo} from 'react';
import {useTranslations} from 'next-intl';
import Link from 'next/link';
import dynamic from 'next/dynamic';

import './MapSection.css';

const CarteLeafletMultiMarker = dynamic(
  () => import('@/components/global/CarteLeafLetMultiMarker'),
  {ssr: false}
);

interface MapSectionProps {
  locale: string;
}

const nearbyEvents = [
  {id: 1, titleKey: 'map_event1_title', timeKey: 'map_event1_time', location: 'Landerneau', tone: 'orange'},
  {id: 2, titleKey: 'map_event2_title', timeKey: 'map_event2_time', location: 'Morlaix', tone: 'blue'},
  {id: 3, titleKey: 'map_event3_title', timeKey: 'map_event3_time', location: 'Brest', tone: 'olive'},
];

const mockLieuxData = [
  {idEvent: 1, titleKey: 'map_lieu1_title', position: [-4.2518, 48.4505], ville: 'Landerneau', type: 'Fest-noz'},
  {idEvent: 2, titleKey: 'map_lieu2_title', position: [-3.8280, 48.5778], ville: 'Morlaix', type: 'Concert'},
  {idEvent: 3, titleKey: 'map_lieu3_title', position: [-4.4860, 48.3905], ville: 'Brest', type: 'Stage'},
  {idEvent: 4, titleKey: 'map_lieu4_title', position: [-4.0861, 48.1113], ville: 'Quimper', type: 'Fest-noz'},
];

export default function MapSection({locale}: MapSectionProps) {
  const t = useTranslations('HomePage');

  const lieux = useMemo(() => mockLieuxData.map((lieu) => ({
    ...lieu,
    title: t(lieu.titleKey),
  })), [t]);

  return (
    <section className="tk-mapsec py-5">
      <div className="container">
        <div className="row g-3 g-md-4 align-items-stretch">
          <div className="col-12 col-lg-7">
            <div className="tk-mapsec__map">
              <CarteLeafletMultiMarker
                positionMap={[-3.5, 48.2]}
                zoomMap={8}
                lieux={lieux}
                locale={locale}
              />
            </div>
          </div>

          <div className="col-12 col-lg-5">
            <div className="tk-mapsec__panel">
              <h3 className="tk-mapsec__title">{t('map_title')}</h3>
              <p className="tk-mapsec__subtitle">{t('map_subtitle')}</p>
              <div className="tk-mapsec__list">
                {nearbyEvents.map((event) => (
                  <div className="tk-mapsec__row" key={event.id}>
                    <span className={`tk-mapsec__dot tk-mapsec__dot--${event.tone}`} />
                    <span className="tk-mapsec__row-info">
                      <span className="tk-mapsec__row-title">{t(event.titleKey)}</span>
                      <span className="tk-mapsec__row-meta">{t(event.timeKey)} · {event.location}</span>
                    </span>
                    <span className="tk-mapsec__row-arrow" aria-hidden="true">→</span>
                  </div>
                ))}
              </div>
              <Link href={`/${locale}/evenements`} className="btn btn-outline-primary w-100 mt-3 fw-bold">
                {t('map_see_map')}
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}