shinkan-jinkendo/frontend/src/components/planning/TrainingPlanningFrameworkImportModal.jsx

import React, { useEffect, useMemo, useState } from 'react'
import FrameworkProgramsFilterBlock from './FrameworkProgramsFilterBlock'
import {
  EMPTY_FRAMEWORK_IMPORT_FILTERS,
  filterFrameworkPrograms,
  frameworkProgramOptionLabel,
  frameworkSessionDurationLabel,
} from '../../utils/frameworkProgramListHelpers'
import { formatDurationDisplay } from '../../utils/trainingDurationUtils'

/**
 * Modal: geplante Einheiten aus einem Trainingsrahmenprogramm (Blueprint-Slots) erzeugen.
 */
export default function TrainingPlanningFrameworkImportModal({
  open,
  frameworkProgramsList,
  catalogFocusAreas = [],
  catalogTrainingTypes = [],
  catalogTargetGroups = [],
  fwImportProgramId,
  onProgramChange,
  fwImportLoading,
  fwImportDetail,
  fwImportSelectedSlots,
  onToggleSlot,
  fwImportSlotDates,
  onSlotDateChange,
  fwImportStartDate,
  onFwImportStartDateChange,
  fwImportIntervalDays,
  onFwImportIntervalDaysChange,
  fwImportSubmitting,
  onApplyDateSuggestions,
  onSubmit,
  onClose,
}) {
  const [filters, setFilters] = useState(() => ({ ...EMPTY_FRAMEWORK_IMPORT_FILTERS }))
  const [filterPanelOpen, setFilterPanelOpen] = useState(true)

  useEffect(() => {
    if (!open) {
      setFilters({ ...EMPTY_FRAMEWORK_IMPORT_FILTERS })
      setFilterPanelOpen(true)
    }
  }, [open])

  const filteredPrograms = useMemo(
    () => filterFrameworkPrograms(frameworkProgramsList, filters),
    [frameworkProgramsList, filters]
  )

  const matchCount = filteredPrograms.length

  useEffect(() => {
    if (!fwImportProgramId) return
    const stillVisible = filteredPrograms.some((p) => String(p.id) === String(fwImportProgramId))
    if (!stillVisible) onProgramChange('')
  }, [filteredPrograms, fwImportProgramId, onProgramChange])

  const selectedProgramSummary = useMemo(() => {
    if (!fwImportProgramId) return null
    return (frameworkProgramsList || []).find((p) => String(p.id) === String(fwImportProgramId))
  }, [frameworkProgramsList, fwImportProgramId])

  if (!open) return null

  return (
    <div
      className="fw-import-modal-backdrop"
      data-testid="planning-framework-import-modal"
    >
      <div className="fw-import-modal-panel">
        <h2 className="fw-import-modal-panel__title">Sessions aus Rahmen übernehmen</h2>
        <p className="fw-import-modal-panel__lead">
          Wähle ein Trainingsrahmenprogramm und eine oder mehrere Sessions. Pro Session entsteht eine{' '}
          <strong>eigene geplante Einheit</strong> in der aktuellen Gruppe (Kopie des Ablaufs).
        </p>

        <FrameworkProgramsFilterBlock
          programs={frameworkProgramsList}
          filters={filters}
          onFiltersChange={setFilters}
          panelOpen={filterPanelOpen}
          onPanelOpenChange={setFilterPanelOpen}
          catalogFocusAreas={catalogFocusAreas}
          catalogTrainingTypes={catalogTrainingTypes}
          catalogTargetGroups={catalogTargetGroups}
          disabled={fwImportSubmitting}
          durationRadioName="fw-duration-mode"
        />

        <div className="form-row fw-import-program-select">
          <label className="form-label">
            Rahmenprogramm
            <span className="fw-import-program-select__count">
              {' '}
              ({matchCount} {matchCount === 1 ? 'Treffer' : 'Treffer'})
            </span>
          </label>
          <select
            className="form-input"
            value={fwImportProgramId}
            onChange={(e) => onProgramChange(e.target.value)}
            disabled={fwImportLoading || fwImportSubmitting || matchCount === 0}
          >
            <option value="">
              {matchCount === 0 ? 'Kein Rahmenprogramm passt zum Filter' : 'Bitte wählen…'}
            </option>
            {filteredPrograms.map((fp) => (
              <option key={fp.id} value={String(fp.id)}>
                {frameworkProgramOptionLabel(fp)}
              </option>
            ))}
          </select>
          {selectedProgramSummary ? (
            <p className="form-sub" style={{ marginTop: '6px' }}>
              Session-Dauer: <strong>{frameworkSessionDurationLabel(selectedProgramSummary)}</strong>
              {selectedProgramSummary.goal_titles_agg ? (
                <>
                  {' '}
                  · Ziele: {selectedProgramSummary.goal_titles_agg}
                </>
              ) : null}
            </p>
          ) : null}
        </div>

        {fwImportLoading ? (
          <p className="fw-import-muted">Laden der Sessions…</p>
        ) : fwImportDetail?.slots?.length ? (
          <>
            <fieldset className="fw-import-sessions">
              <legend className="form-label">Sessions (mit Ablauf)</legend>
              <ul className="fw-import-sessions__list">
                {[...fwImportDetail.slots]
                  .sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0))
                  .map((slot) => {
                    const hasBp = !!slot.blueprint_training_unit_id
                    const checked = fwImportSelectedSlots.has(slot.id)
                    const label =
                      (slot.title || '').trim() || `Session ${(slot.sort_order ?? 0) + 1}`
                    const slotDur =
                      slot.planned_duration_min != null
                        ? formatDurationDisplay(slot.planned_duration_min)
                        : null
                    return (
                      <li key={slot.id} className="fw-import-sessions__item">
                        <label
                          className={
                            'fw-import-sessions__label' + (hasBp ? '' : ' fw-import-sessions__label--disabled')
                          }
                        >
                          <input
                            type="checkbox"
                            className="fw-import-sessions__check"
                            checked={checked}
                            disabled={!hasBp || fwImportSubmitting}
                            onChange={() => onToggleSlot(slot)}
                          />
                          <span className="fw-import-sessions__body">
                            <span className="fw-import-sessions__title-row">
                              <strong>{label}</strong>
                              {slotDur ? (
                                <span className="fw-import-sessions__dur">{slotDur}</span>
                              ) : (
                                <span className="fw-import-sessions__dur fw-import-sessions__dur--muted">
                                  Dauer offen
                                </span>
                              )}
                            </span>
                            {!hasBp ? (
                              <span className="fw-import-sessions__warn">
                                Ohne Session-Ablauf — Übernahme nicht möglich.
                              </span>
                            ) : null}
                            {hasBp && checked ? (
                              <span className="fw-import-sessions__date">
                                <span className="form-label">Termin (Datum)</span>
                                <input
                                  type="date"
                                  className="form-input"
                                  value={fwImportSlotDates[String(slot.id)] || ''}
                                  onChange={(e) => onSlotDateChange(String(slot.id), e.target.value)}
                                  disabled={fwImportSubmitting}
                                />
                              </span>
                            ) : null}
                          </span>
                        </label>
                      </li>
                    )
                  })}
              </ul>
            </fieldset>

            <div className="fw-import-dates-panel responsive-grid-3">
              <div className="form-row">
                <label className="form-label">Startdatum (Vorschlag)</label>
                <input
                  type="date"
                  className="form-input"
                  value={fwImportStartDate}
                  onChange={(e) => onFwImportStartDateChange(e.target.value)}
                  disabled={fwImportSubmitting}
                />
              </div>
              <div className="form-row">
                <label className="form-label">Abstand (Tage)</label>
                <input
                  type="number"
                  min={0}
                  className="form-input"
                  value={fwImportIntervalDays}
                  onChange={(e) => onFwImportIntervalDaysChange(parseInt(e.target.value, 10) || 0)}
                  disabled={fwImportSubmitting}
                />
              </div>
              <div className="form-row fw-import-dates-panel__action">
                <button
                  type="button"
                  className="btn btn-secondary"
                  disabled={fwImportSubmitting}
                  onClick={onApplyDateSuggestions}
                >
                  Datumsvorschläge setzen
                </button>
              </div>
            </div>
          </>
        ) : fwImportProgramId ? (
          <p className="fw-import-muted">Keine Sessions in diesem Programm.</p>
        ) : null}

        <div className="fw-import-modal-panel__footer">
          <button
            type="button"
            className="btn btn-primary"
            disabled={fwImportSubmitting || !fwImportDetail}
            onClick={onSubmit}
          >
            {fwImportSubmitting ? 'Übernehmen…' : 'In Planung übernehmen'}
          </button>
          <button type="button" className="btn btn-secondary" disabled={fwImportSubmitting} onClick={onClose}>
            Abbrechen
          </button>
        </div>
      </div>
    </div>
  )
}