const ACTOR_TYPE_LABELS = {
  human: 'Mensch',
  agent: 'Agent',
  working_group: 'Arbeitsgruppe',
  external_system: 'Externes System',
}

export function ActorSelect({
  actors = [],
  defaultSelected = [],
  label = 'Zugewiesene Actors',
  loading = false,
  error = null,
  usedFallback = false,
  onRetry,
}) {
  if (loading) {
    return <p className="muted actor-select-hint">Actors werden geladen …</p>
  }

  if (error && !actors.length) {
    return (
      <div className="actor-select actor-select--error">
        <p className="error">{error}</p>
        {onRetry && (
          <button type="button" className="btn btn-secondary" onClick={onRetry}>
            Erneut laden
          </button>
        )}
      </div>
    )
  }

  if (!actors.length) {
    return (
      <p className="muted actor-select-hint">
        Kein Actor verfügbar — bitte TenantContext prüfen.
      </p>
    )
  }

  return (
    <fieldset className="actor-select">
      <legend>{label}</legend>
      {actors.map((actor) => (
        <label key={actor.id} className="checkbox-label">
          <input
            type="checkbox"
            name={`actor_${actor.id}`}
            defaultChecked={defaultSelected.includes(actor.id)}
          />
          {actor.name}
          {actor.actor_type && (
            <span className="muted">
              {' '}
              ({ACTOR_TYPE_LABELS[actor.actor_type] || actor.actor_type})
            </span>
          )}
        </label>
      ))}
      {usedFallback && (
        <p className="muted actor-select-hint">
          Actor Directory nicht erreichbar — Fallback auf aktuellen Actor.
        </p>
      )}
    </fieldset>
  )
}