import { ActionHubCard } from './ActionHubCard.jsx'
import { ActionForm } from './ActionForm.jsx'
import { EmptyState } from './EmptyState.jsx'

export function InitiativeActionsHub({
  initiativeId,
  actions,
  projects = [],
  roadmapItems = [],
  actionContextById,
  hideDone,
  onHideDoneChange,
  showForm,
  onToggleForm,
  editingActionId,
  onEditAction,
  onCancelEdit,
  onCreateAction,
  onUpdateAction,
  onQuickStatus,
  onCreateBlockerForAction,
  canManage,
  canManageBlocker,
  formBusy,
  actors,
  actorsLoading,
  actorsError,
  actorsUsedFallback,
  onReloadActors,
}) {
  return (
    <section className="card initiative-actions-hub">
      <div className="section-header">
        <div>
          <h2>Arbeitspakete</h2>
          <p className="section-lead muted">
            Committete operative Einheit — Aufgaben im Detail. Blocker, Nachweise und Reviews
            hängen am Arbeitspaket.
          </p>
        </div>
        <div className="section-actions">
          <label className="checkbox-label inline-filter">
            <input
              type="checkbox"
              checked={hideDone}
              onChange={(e) => onHideDoneChange(e.target.checked)}
            />
            Erledigte ausblenden
          </label>
          {canManage && (
            <button
              type="button"
              className="btn btn-primary btn-block-mobile"
              onClick={onToggleForm}
            >
              {showForm ? 'Abbrechen' : 'Arbeitspaket'}
            </button>
          )}
        </div>
      </div>

      {showForm && canManage && (
        <div className="inline-form-block">
          <ActionForm
            projects={projects}
            roadmapItems={roadmapItems}
            actors={actors}
            actorsLoading={actorsLoading}
            actorsError={actorsError}
            actorsUsedFallback={actorsUsedFallback}
            onReloadActors={onReloadActors}
            onSubmit={onCreateAction}
            onCancel={onToggleForm}
            busy={formBusy}
            submitLabel="Arbeitspaket anlegen"
          />
        </div>
      )}

      {actions.length === 0 && (
        <EmptyState message="Noch keine Arbeitspakete — lege operative Schritte an oder wandle Backlog um." />
      )}

      <div className="action-hub-grid">
        {actions.map((action) => (
          <ActionHubCard
            key={action.id}
            action={action}
            context={actionContextById[action.id]}
            editing={editingActionId === action.id}
            onEdit={() => onEditAction(action.id)}
            onCancelEdit={onCancelEdit}
            onSubmitEdit={(payload) => onUpdateAction(action.id, payload)}
            onQuickStatus={(status) => onQuickStatus(action, status)}
            onCreateBlocker={() => onCreateBlockerForAction(action.id)}
            canManage={canManage}
            canManageBlocker={canManageBlocker}
            formBusy={formBusy}
            actors={actors}
            actorsLoading={actorsLoading}
            actorsError={actorsError}
            actorsUsedFallback={actorsUsedFallback}
            onReloadActors={onReloadActors}
            initiativeId={initiativeId}
            projects={projects}
            roadmapItems={roadmapItems}
          />
        ))}
      </div>
    </section>
  )
}