'use client';
import React from 'react';
import Link from 'next/link';
import {useTranslations} from 'next-intl';
import {FaMusic, FaUser} from 'react-icons/fa';
import type {InstrumentPratique} from '@/types/discipline';
import {artisteHref} from '@/utils/artisteHref';
import './PratiquantsDiscipline.css';

interface PratiquantsDisciplineProps {
  instruments: InstrumentPratique[];
  locale: string;
}

/**
 * Bloc « Artistes » de la fiche discipline (spec L310) : chaque instrument de la discipline et les
 * artistes solo qui le pratiquent aujourd'hui, avec leur photo, leur fiche et leurs groupes actifs.
 */
export default function PratiquantsDiscipline({instruments, locale}: PratiquantsDisciplineProps) {
  const t = useTranslations('DisciplineDetailsPage');
  if (instruments.length === 0) return null;

  return (
    <div className="tk-section-card" data-testid="pratiquants-discipline">
      <div className="tk-section-card-header">
        <h2 className="tk-section-card-title">
          <span className="tk-section-card-title-icon tk-section-card-title-icon-green">
            <FaMusic />
          </span>
          {t('artistes_title')}
        </h2>
        <p className="text-muted mb-0">{t('artistes_intro')}</p>
      </div>
      <div className="tk-section-card-body">
        {instruments.map((instrument) => (
          <section key={instrument.insId} className="tk-pratiquants__instrument">
            <h3 className="tk-pratiquants__titre">{instrument.insNom}</h3>
            {instrument.pratiquants.length === 0 ? (
              <p className="text-muted small mb-0">{t('no_pratiquants')}</p>
            ) : (
              <ul className="tk-pratiquants__liste">
                {instrument.pratiquants.map((pratiquant) => (
                  <li key={pratiquant.aenId} className="tk-pratiquant">
                    <Link href={artisteHref(locale, pratiquant.aenId, pratiquant.aenLibelle)} className="tk-pratiquant__lien">
                      {pratiquant.photoUrl ? (
                        <img src={pratiquant.photoUrl} alt={pratiquant.aenLibelle} className="tk-pratiquant__photo" loading="lazy" />
                      ) : (
                        <span className="tk-pratiquant__placeholder" aria-hidden="true"><FaUser /></span>
                      )}
                      <span className="tk-pratiquant__nom">{pratiquant.aenLibelle}</span>
                    </Link>
                    {pratiquant.groupes.length > 0 && (
                      <p className="tk-pratiquant__groupes">
                        {t('plays_in')}{' '}
                        {pratiquant.groupes.map((groupe, index) => (
                          <React.Fragment key={groupe.fmuId}>
                            {index > 0 && ', '}
                            <Link href={`/${locale}/groupes/${groupe.fmuId}`}>{groupe.aenLibelle ?? `#${groupe.fmuId}`}</Link>
                          </React.Fragment>
                        ))}
                      </p>
                    )}
                  </li>
                ))}
              </ul>
            )}
          </section>
        ))}
      </div>
    </div>
  );
}