export const dynamic = 'force-dynamic';
export const revalidate = 0;

import Link from 'next/link';
import type {Metadata} from 'next';
import {notFound} from 'next/navigation';
import {Col, Container, Row} from 'react-bootstrap';
import {FaArrowLeft, FaArrowRight} from 'react-icons/fa';

import ArticleCard from '@/components/Articles/ArticleCard';
import initTranslations from '@/i18n';
import {getArticleCategorieBySlug, getArticlesByCategorie} from '@/services/articleService';
import {documentTitle} from '@/utils/documentTitle';

type RouteProps = {
  params: Promise<{locale: string; slug: string}>;
  searchParams?: Promise<{page?: string}>;
};

export async function generateMetadata({params}: RouteProps): Promise<Metadata> {
  const {slug} = await params;
  const categorie = await getArticleCategorieBySlug(slug);

  return {title: documentTitle(categorie?.nom)};
}

/** Rubrique du Mag (spec L70) : ses articles publiés, du plus récent au plus ancien, paginés. */
export default async function Page({params, searchParams}: RouteProps) {
  const {locale, slug} = await params;
  const pageDemandee = Number((await searchParams)?.page ?? 1);
  const page = Number.isInteger(pageDemandee) && pageDemandee > 0 ? pageDemandee : 1;

  const categorie = await getArticleCategorieBySlug(slug);
  if (!categorie) {
    notFound();
  }

  const {messages} = await initTranslations({locale});
  const t = (messages?.ArticlesPage ?? {}) as Record<string, string>;
  const resultat = await getArticlesByCategorie(categorie.id, page);
  const nbPages = Math.max(1, Math.ceil(resultat.total / resultat.itemsPerPage));
  const pageOf = (t.page_of || 'Page {page} sur {total}').replace('{page}', String(page)).replace('{total}', String(nbPages));
  const hrefPage = (n: number) => `/${locale}/articles/categorie/${categorie.slug}?page=${n}`;

  return (
    <section className="tk-magpage">
      <Container>
        <div className="tk-section-head" data-ghost={categorie.nom}>
          <div>
            <Link href={`/${locale}/articles`} className="tk-section-link">
              <FaArrowLeft className="me-1" aria-hidden="true" />
              {t.back_to_mag || 'Retour au Mag'}
            </Link>
            <h1 className="tk-magpage__title">{categorie.nom}</h1>
            {categorie.description && <p className="tk-magpage__subtitle tk-magpage__categorie-description">{categorie.description}</p>}
          </div>
        </div>

        {resultat.articles.length === 0 ? (
          <div className="tk-empty-state">
            <div className="tk-empty-state-icon">📰</div>
            <h3 className="tk-empty-state-title">{t.category_empty || 'Aucun article dans cette rubrique pour le moment'}</h3>
          </div>
        ) : (
          <>
            <Row className="g-3 g-md-4 mt-1">
              {resultat.articles.map((article) => (
                <Col key={article.id} xs={12} md={6} lg={4}>
                  <ArticleCard article={article} locale={locale} />
                </Col>
              ))}
            </Row>
            {nbPages > 1 && (
              <nav className="tk-magpage__pagination" aria-label="pagination">
                {page > 1 ? (
                  <Link href={hrefPage(page - 1)} className="tk-btn tk-btn-outline">
                    <FaArrowLeft className="me-2" aria-hidden="true" />
                    {t.pagination_prev || 'Articles plus récents'}
                  </Link>
                ) : <span />}
                <span className="tk-magpage__pagination-page">{pageOf}</span>
                {page < nbPages ? (
                  <Link href={hrefPage(page + 1)} className="tk-btn tk-btn-outline">
                    {t.pagination_next || 'Articles plus anciens'}
                    <FaArrowRight className="ms-2" aria-hidden="true" />
                  </Link>
                ) : <span />}
              </nav>
            )}
          </>
        )}
      </Container>
    </section>
  );
}