CC-Manager/web/src/components/MemberList.tsx

import { Link } from 'react-router-dom';
import { ApiError, api } from '../lib/api';
import { REASON_LABEL, rueckkehrArt } from '../lib/format';
import type { Character, CharacterMember } from '../lib/types';

/**
 * Wer einen CC nutzt. Bei einem Gruppen-CC kann ein Einzelner ausfallen,
 * ohne die übrigen zu berühren - dann steht er hier, bis er zurückkehrt.
 */
export default function MemberList({
  character,
  currentPlayerId,
  canEdit,
  onChanged,
  onError,
}: {
  character: Character;
  currentPlayerId: number;
  canEdit: boolean;
  onChanged: () => void;
  onError: (message: string) => void;
}) {
  const alle = character.members ?? [];
  const aktiv = alle.filter((m) => !m.leftAt);
  // Wer ausgefallen ist, kann zurückkehren - wer gegangen ist, nicht.
  const ruhend = alle.filter((m) => m.leftAt && m.inactiveReason);
  const ehemalig = alle.filter((m) => m.leftAt && !m.inactiveReason);

  if (aktiv.length <= 1 && ruhend.length === 0 && ehemalig.length === 0) return null;

  const austragen = async (playerId: number, name: string) => {
    if (!window.confirm(`"${name}" aus "${character.name}" austragen?`)) return;
    try {
      await api(`/api/characters/${character.id}/members/${playerId}`, { method: 'DELETE' });
      onChanged();
    } catch (err) {
      onError(err instanceof ApiError ? err.message : 'Austragen fehlgeschlagen');
    }
  };

  const zurueckholen = async (mitglied: CharacterMember) => {
    const art = rueckkehrArt(mitglied.inactiveReason);
    const name = mitglied.player.displayName;

    let reason: string | undefined;
    if (art === 'admin') {
      const eingabe = window.prompt(
        `"${name}" ist im Rollenspiel gestorben. Womit kehrt er zurück?`,
      );
      if (!eingabe?.trim()) return;
      reason = eingabe.trim();
    }

    let useKind: string | undefined;
    if (art === 'bezahlt') {
      const kulanz = window.confirm(
        `Die Rückkehr von "${name}" kostet ein Guthaben.\n\nOK = Kulanz-Redesign, Abbrechen = bezahltes Redesign.`,
      );
      useKind = kulanz ? 'REDESIGN_KULANZ' : 'REDESIGN_PAID';
    }

    try {
      await api(`/api/characters/${character.id}/members/${mitglied.playerId}/reactivate`, {
        method: 'POST',
        body: { ...(useKind ? { useKind } : {}), ...(reason ? { reason } : {}) },
      });
      onChanged();
    } catch (err) {
      onError(err instanceof ApiError ? err.message : 'Rückkehr fehlgeschlagen');
    }
  };

  return (
    <div className="member-list">
      {aktiv.map((mitglied) => (
        <span key={mitglied.id} className="member-chip">
          {mitglied.playerId === currentPlayerId ? (
            <strong>{mitglied.player.displayName}</strong>
          ) : (
            <Link to={`/players/${mitglied.playerId}`}>{mitglied.player.displayName}</Link>
          )}
          {canEdit && aktiv.length > 1 && (
            <button
              type="button"
              className="member-remove"
              title="Austragen"
              onClick={() => void austragen(mitglied.playerId, mitglied.player.displayName)}
            >
              ✕
            </button>
          )}
        </span>
      ))}

      {ruhend.map((mitglied) => (
        <span key={mitglied.id} className="member-chip is-inactive">
          <span className="muted">{mitglied.player.displayName}</span>
          <span
            className={`badge ${
              rueckkehrArt(mitglied.inactiveReason) === 'gratis'
                ? 'badge-free'
                : rueckkehrArt(mitglied.inactiveReason) === 'admin'
                  ? 'badge-dead'
                  : 'badge-paid'
            }`}
            title={mitglied.inactiveNote ?? undefined}
          >
            {mitglied.inactiveReason ? REASON_LABEL[mitglied.inactiveReason] : 'Inaktiv'}
          </span>
          {canEdit && (
            <button
              type="button"
              className="btn btn-tiny btn-ghost"
              onClick={() => void zurueckholen(mitglied)}
            >
              Zurückholen
            </button>
          )}
        </span>
      ))}

      {ehemalig.length > 0 && (
        <span className="muted small">
          früher:{' '}
          {ehemalig
            .map((m) =>
              m.successor ? `${m.player.displayName} (jetzt ${m.successor.name})` : m.player.displayName,
            )
            .join(', ')}
        </span>
      )}
    </div>
  );
}