'use client';
import React from 'react';
import Link from 'next/link';
import {useTranslations} from 'next-intl';
import {Card} from 'react-bootstrap';
import {FaBullhorn, FaCar, FaCommentDots} from 'react-icons/fa';
import type {ProfilAnnonce, ProfilCommentaire, ProfilCovoiturage, ProfilEvenementRef} from '@/types/profil';
import {evenementHref} from '@/utils/evenementHref';

interface ProfilActiviteProps {
  locale: string;
  commentaires: ProfilCommentaire[];
  annonces: ProfilAnnonce[];
  covoiturages: ProfilCovoiturage[];
}

function LienEvenement({locale, evenement}: {locale: string; evenement: ProfilEvenementRef | null}) {
  if (!evenement) return null;
  return (
    <Link href={evenementHref(locale, evenement.eveId, evenement.libelle)} className="tk-profile-link">
      {evenement.libelle}
    </Link>
  );
}

function formatDate(locale: string, date: string | null): string {
  return date ? new Date(date).toLocaleDateString(locale) : '';
}

/**
 * Activité d'un profil (spec L183-L185) : ses derniers commentaires, ses petites annonces et ses
 * demandes / propositions de covoiturage, chaque bloc disant quand il est vide.
 */
export default function ProfilActivite({locale, commentaires, annonces, covoiturages}: ProfilActiviteProps) {
  const t = useTranslations('ProfilePage');

  return (
    <div className="tk-profil-activite d-flex flex-column gap-3" data-testid="profil-activite">
      <Card>
        <Card.Header><h5 className="mb-0"><FaCommentDots className="me-2" aria-hidden="true" />{t('activity_comments')}</h5></Card.Header>
        <Card.Body>
          {commentaires.length === 0 ? (
            <p className="tk-text-muted mb-0">{t('activity_no_comments')}</p>
          ) : (
            <ul className="list-unstyled mb-0 d-flex flex-column gap-3">
              {commentaires.map((commentaire) => (
                <li key={commentaire.id}>
                  <p className="mb-1">{commentaire.texte}</p>
                  <small className="tk-text-muted">
                    {formatDate(locale, commentaire.date)}
                    {commentaire.evenement && ' · '}
                    <LienEvenement locale={locale} evenement={commentaire.evenement} />
                  </small>
                </li>
              ))}
            </ul>
          )}
        </Card.Body>
      </Card>

      <Card>
        <Card.Header><h5 className="mb-0"><FaBullhorn className="me-2" aria-hidden="true" />{t('activity_ads')}</h5></Card.Header>
        <Card.Body>
          {annonces.length === 0 ? (
            <p className="tk-text-muted mb-0">{t('activity_no_ads')}</p>
          ) : (
            <>
              <ul className="list-unstyled mb-3 d-flex flex-column gap-3">
                {annonces.map((annonce) => (
                  <li key={annonce.id}>
                    <strong>{annonce.titre}</strong>
                    {annonce.texte && <p className="mb-1">{annonce.texte}</p>}
                    <small className="tk-text-muted">{formatDate(locale, annonce.date)}</small>
                  </li>
                ))}
              </ul>
              <Link href={`/${locale}/petites-annonces`} className="tk-profile-link">{t('activity_ads_link')}</Link>
            </>
          )}
        </Card.Body>
      </Card>

      <Card>
        <Card.Header><h5 className="mb-0"><FaCar className="me-2" aria-hidden="true" />{t('activity_carpools')}</h5></Card.Header>
        <Card.Body>
          {covoiturages.length === 0 ? (
            <p className="tk-text-muted mb-0">{t('activity_no_carpools')}</p>
          ) : (
            <ul className="list-unstyled mb-0 d-flex flex-column gap-3">
              {covoiturages.map((covoiturage) => (
                <li key={covoiturage.id}>
                  <p className="mb-1">
                    <span>{t(covoiturage.propose ? 'carpool_offer' : 'carpool_request', {nombre: covoiturage.nombre, ville: covoiturage.ville})}</span>
                    {covoiturage.heure && <span> · {covoiturage.heure}</span>}
                  </p>
                  <small className="tk-text-muted">
                    <LienEvenement locale={locale} evenement={covoiturage.evenement} />
                    {covoiturage.evenement?.date && ` · ${formatDate(locale, covoiturage.evenement.date)}`}
                  </small>
                </li>
              ))}
            </ul>
          )}
        </Card.Body>
      </Card>
    </div>
  );
}