'use client';

import Link from 'next/link';
import {useTranslations} from 'next-intl';
import {FaCompass} from 'react-icons/fa';

import './UniversSection.css';

export interface UniversListe {
  lieId: number;
  lieNom: string;
  lieDpr?: {dprId?: number; dprNom?: string} | null;
}

interface UniversSectionProps {
  listes: UniversListe[] | undefined;
  locale: string;
}

interface DomaineGroup {
  key: string;
  dprNom?: string;
  listes: UniversListe[];
}

/** Regroupe les listes par domaine, dans l'ordre de première apparition ; les listes sans domaine à la fin. */
function groupByDomaine(listes: UniversListe[]): DomaineGroup[] {
  const groups = new Map<string, DomaineGroup>();

  for (const liste of listes) {
    const key = liste.lieDpr?.dprId != null ? String(liste.lieDpr.dprId) : liste.lieDpr?.dprNom ?? '';
    const group = groups.get(key) ?? {key, dprNom: liste.lieDpr?.dprNom, listes: []};
    group.listes.push(liste);
    groups.set(key, group);
  }

  return Array.from(groups.values()).sort((a, b) => Number(a.key === '') - Number(b.key === ''));
}

/**
 * Bloc « univers » d'une fiche : ses listes de l'annuaire, hiérarchisées Domaine ⇒ Liste.
 * Chaque liste mène à l'annuaire pré-filtré sur cette liste.
 */
export default function UniversSection({listes, locale}: UniversSectionProps) {
  const t = useTranslations('Common');

  if (!listes || listes.length === 0) return null;

  return (
    <div className="tk-section-card" data-testid="univers-section">
      <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">
            <FaCompass />
          </span>
          {t('univers_title')}
        </h2>
      </div>
      <div className="tk-section-card-body tk-univers">
        {groupByDomaine(listes).map(group => (
          <div key={group.key} className="tk-univers-domaine">
            {group.dprNom && <h3 className="tk-univers-domaine-title">{group.dprNom}</h3>}
            <ul className="tk-univers-listes">
              {group.listes.map(liste => (
                <li key={liste.lieId}>
                  <Link href={`/${locale}/listes/${liste.lieId}`} className="tk-badge tk-badge-outline-green">
                    {liste.lieNom}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}