'use client';

import React, {useEffect, useState} from 'react';
import {useLocale, useTranslations} from 'next-intl';
import {useInView} from 'framer-motion';

import './KeyFiguresSection.css';

const figures = [
  {value: 30000, suffix: '+', labelKey: 'figures_events'},
  {value: 3500, suffix: '+', labelKey: 'figures_groups'},
  {value: 1200, suffix: '+', labelKey: 'figures_communes'},
  {value: 2001, suffix: '', labelKey: 'figures_since', plain: true},
];

function AnimatedCounter({
  target,
  suffix,
  isInView,
  plain,
  locale,
}: {
  target: number;
  suffix: string;
  isInView: boolean;
  plain?: boolean;
  locale: string;
}) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (!isInView) return;
    let current = 0;
    const step = Math.ceil(target / 40);
    const timer = setInterval(() => {
      current += step;
      if (current >= target) {
        setCount(target);
        clearInterval(timer);
      } else {
        setCount(current);
      }
    }, 30);
    return () => clearInterval(timer);
  }, [isInView, target]);

  const localeMap: Record<string, string> = {fr: 'fr-FR', en: 'en-GB', de: 'de-DE', bzh: 'br'};
  const formatted = plain ? String(count) : count.toLocaleString(localeMap[locale] ?? 'fr-FR');

  return <span>{formatted}{suffix}</span>;
}

export default function KeyFiguresSection() {
  const t = useTranslations('HomePage');
  const locale = useLocale();
  const ref = React.useRef(null);
  const isInView = useInView(ref, {once: true, margin: '-100px'});

  return (
    <section className="tk-figures" ref={ref}>
      <div className="container">
        <div className="row g-4 text-center">
          {figures.map((fig) => (
            <div className="col-6 col-md-3" key={fig.labelKey}>
              <div className="tk-figures__item">
                <span className="tk-figures__value">
                  <AnimatedCounter
                    target={fig.value}
                    suffix={fig.suffix}
                    isInView={isInView}
                    plain={fig.plain}
                    locale={locale}
                  />
                </span>
                <span className="tk-figures__label">
                  {t(fig.labelKey as 'figures_events')}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}