'use client';

import React, {useEffect, useState} from 'react';
import {useTranslations} from 'next-intl';
import Link from 'next/link';
import {Spinner} from 'react-bootstrap';

import type {Article} from '@/types/article';
import {getAllArticlesPublished} from '@/services/articleService';
import {readingTimeMinutes} from '@/utils/articleDisplay';

import './MagSection.css';

interface MagSectionProps {
  locale: string;
}

const MAX_ARTICLES = 3;

export {readingTimeMinutes};

export default function MagSection({locale}: MagSectionProps) {
  const t = useTranslations('HomePage');
  const [articles, setArticles] = useState<Article[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getAllArticlesPublished()
      .then((all) => setArticles((all ?? []).slice(0, MAX_ARTICLES)))
      .catch(() => setArticles([]))
      .finally(() => setLoading(false));
  }, []);

  const localeMap: Record<string, string> = {fr: 'fr-FR', en: 'en-GB', de: 'de-DE', bzh: 'br'};

  return (
    <section className="tk-magsec py-5">
      <div className="container">
        <div className="tk-section-head" data-ghost="Kazetenn">
          <h2>{t('mag_title')}</h2>
          <span className="tk-section-head__spacer" />
          <Link href={`/${locale}/articles`} className="tk-section-link">
            {t('mag_see_all')} →
          </Link>
        </div>

        {loading ? (
          <div className="text-center py-5">
            <Spinner animation="border" role="status" />
          </div>
        ) : articles.length === 0 ? (
          <p className="tk-magsec__empty">{t('mag_empty')}</p>
        ) : (
          <div className="row g-3 g-md-4 mt-1">
            {articles.map((article) => (
              <div className="col-12 col-md-4" key={article.id}>
                <Link href={`/${locale}/articles/${article.slug}`} className="tk-magsec__card">
                  <span className="tk-magsec__image">
                    {article.image ? (
                      <img src={article.image} alt="" loading="lazy" />
                    ) : (
                      <span className="tk-magsec__image-placeholder" aria-hidden="true" />
                    )}
                  </span>
                  <span className="tk-magsec__body">
                    <span className="tk-magsec__title">{article.title}</span>
                    <span className="tk-magsec__meta">
                      {new Date(article.createdAt).toLocaleDateString(localeMap[locale] ?? 'fr-FR', {
                        day: 'numeric',
                        month: 'short',
                        year: 'numeric',
                      })}
                      {' · '}
                      {readingTimeMinutes(article.body)} min
                    </span>
                  </span>
                </Link>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}