import React from 'react';
import type {Metadata} from 'next';
import {Col, Container, Row} from 'react-bootstrap';
import {FaExternalLinkAlt, FaHandHoldingHeart} from 'react-icons/fa';
import initTranslations from '@/i18n';
import {getSoutiens} from '@/services/soutienService';
import {documentTitle} from '@/utils/documentTitle';
import './soutiens.css';

export const dynamic = 'force-dynamic';

type RouteProps = {params: Promise<{locale: string}>};

export async function generateMetadata({params}: RouteProps): Promise<Metadata> {
  const {locale} = await params;
  const {messages} = await initTranslations({locale});
  return {title: documentTitle(messages?.SoutiensPage?.title ?? 'Nos soutiens')};
}

/** Page des soutiens de l'association (spec L6) : tous les soutiens actifs, logo, description, lien. */
export default async function Page({params}: RouteProps) {
  const {locale} = await params;
  const {messages} = await initTranslations({locale});
  const t = (messages?.SoutiensPage ?? {}) as Record<string, string>;
  const soutiens = await getSoutiens();

  return (
    <section className="tk-section tk-bg-light tk-soutiens-page">
      <Container>
        <Row className="justify-content-center">
          <Col lg={9}>
            <div className="tk-section-head mb-4" data-ghost="Skoazell">
              <div>
                <h1 className="tk-proposition__title">
                  <FaHandHoldingHeart className="me-2" aria-hidden="true" />
                  {t.title ?? 'Nos soutiens'}
                </h1>
                <p className="tk-proposition__lead">{t.intro}</p>
              </div>
            </div>
            {soutiens.length === 0 ? (
              <p className="text-muted">{t.empty ?? 'Aucun soutien référencé pour le moment.'}</p>
            ) : (
              <ul className="tk-soutiens-list list-unstyled">
                {soutiens.map((soutien) => (
                  <li key={soutien.souId} className="tk-soutien-card">
                    <div className="tk-soutien-card__logo">
                      {soutien.logoUrl ? (
                        <img src={soutien.logoUrl} alt={soutien.souNom} loading="lazy" />
                      ) : (
                        <FaHandHoldingHeart aria-hidden="true" />
                      )}
                    </div>
                    <div className="tk-soutien-card__body">
                      <h2 className="tk-soutien-card__nom">{soutien.souNom}</h2>
                      {soutien.souDescription && <p className="tk-soutien-card__description">{soutien.souDescription}</p>}
                      {soutien.souUrl && (
                        <a href={soutien.souUrl} className="tk-soutien-card__lien" target="_blank" rel="noopener noreferrer">
                          {t.visit_site ?? 'Visiter le site'}
                          <FaExternalLinkAlt className="ms-1" aria-hidden="true" />
                        </a>
                      )}
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </Col>
        </Row>
      </Container>
    </section>
  );
}