'use client';

import {useEffect, useState} from 'react';
import Link from 'next/link';
import {useTranslations} from 'next-intl';
import {FaBullhorn, FaCarSide, FaComments, FaUserCheck} from 'react-icons/fa';

import {getFilCommunautaire, type FilCommunautaire, type FilEvenement} from '@/services/communauteService';
import {evenementHref} from '@/utils/evenementHref';

import './CommunauteFeed.css';

interface CommunauteFeedProps {
  locale: string;
}

function LienEvenement({evenement, locale}: {evenement: FilEvenement | null; locale: string}) {
  if (!evenement) return null;

  return (
    <Link href={evenementHref(locale, evenement.eveId, evenement.libelle)} className="tk-feed-event">
      {evenement.libelle}
    </Link>
  );
}

/** Pied de page de l'agenda : ce qui bouge dans la communauté, avec le lien vers chaque événement. */
export default function CommunauteFeed({locale}: CommunauteFeedProps) {
  const t = useTranslations('AgendaPage');
  const [fil, setFil] = useState<FilCommunautaire | null>(null);

  useEffect(() => {
    let actif = true;
    getFilCommunautaire(6).then(resultat => {
      if (actif) setFil(resultat);
    });
    return () => {
      actif = false;
    };
  }, []);

  if (!fil) return null;

  const vide = fil.commentaires.length + fil.annonces.length + fil.covoiturages.length + fil.inscrits.length === 0;
  if (vide) return <div data-testid="communaute-feed-vide" hidden />;

  return (
    <section className="tk-feed" data-testid="communaute-feed">
      <div className="tk-section-head">
        <h2 className="tk-feed__title">{t('community_title')}</h2>
        <p className="tk-feed__subtitle">{t('community_subtitle')}</p>
      </div>
      <div className="tk-feed__grid">
        <div className="tk-feed__col">
          <h3 className="tk-feed__col-title"><FaComments aria-hidden="true" /> {t('latest_comments')}</h3>
          {fil.commentaires.length === 0 ? <p className="tk-feed__empty">{t('community_empty')}</p> : (
            <ul className="tk-feed__list">
              {fil.commentaires.map(c => (
                <li key={c.id}>
                  <span className="tk-feed__who">{c.auteur?.pseudo}</span>
                  <span className="tk-feed__text">{c.texte}</span>
                  <LienEvenement evenement={c.evenement} locale={locale} />
                </li>
              ))}
            </ul>
          )}
        </div>
        <div className="tk-feed__col">
          <h3 className="tk-feed__col-title"><FaBullhorn aria-hidden="true" /> {t('latest_annonces')}</h3>
          {fil.annonces.length === 0 ? <p className="tk-feed__empty">{t('community_empty')}</p> : (
            <ul className="tk-feed__list">
              {fil.annonces.map(a => (
                <li key={a.id}>
                  <span className="tk-feed__who">{a.auteur?.pseudo}</span>
                  <span className="tk-feed__text">{a.titre}</span>
                </li>
              ))}
            </ul>
          )}
        </div>
        <div className="tk-feed__col">
          <h3 className="tk-feed__col-title"><FaCarSide aria-hidden="true" /> {t('latest_carpools')}</h3>
          {fil.covoiturages.length === 0 ? <p className="tk-feed__empty">{t('community_empty')}</p> : (
            <ul className="tk-feed__list">
              {fil.covoiturages.map(c => (
                <li key={c.id}>
                  <span className="tk-feed__who">{c.auteur?.pseudo}</span>
                  <span className="tk-feed__text">
                    {c.propose ? t('carpool_offer') : t('carpool_request')} {c.nombre} {t('seats')} · {c.ville}
                  </span>
                  <LienEvenement evenement={c.evenement} locale={locale} />
                </li>
              ))}
            </ul>
          )}
        </div>
        <div className="tk-feed__col">
          <h3 className="tk-feed__col-title"><FaUserCheck aria-hidden="true" /> {t('latest_registrations')}</h3>
          {fil.inscrits.length === 0 ? <p className="tk-feed__empty">{t('community_empty')}</p> : (
            <ul className="tk-feed__list">
              {fil.inscrits.map(i => (
                <li key={i.id}>
                  <span className="tk-feed__who">{i.pseudo}</span>
                  <LienEvenement evenement={i.evenement} locale={locale} />
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </section>
  );
}