import React, { useCallback, useEffect, useState } from 'react'
import { Link, useNavigate, useParams, useLocation } from 'react-router-dom'
import api from '../utils/api'
import ExercisePickerModal from '../components/ExercisePickerModal'
import ExercisePeekModal from '../components/ExercisePeekModal'

/** Unter dieser Breite: 2 Tabs (Stammdaten | Plan); darüber: alles untereinander */
const FRAMEWORK_DESKTOP_MIN_PX = 900

const DND_FW_EX = 'application/x-shinkan-framework-exercise'
const DND_FW_SLOT = 'application/x-shinkan-framework-slot'

function reorderArray(arr, from, to) {
  if (from === to || from < 0 || from >= arr.length) return [...arr]
  const next = [...arr]
  const [it] = next.splice(from, 1)
  const t = Math.max(0, Math.min(to, next.length))
  next.splice(t, 0, it)
  return next
}

function emptyGoal() {
  return { title: '', notes: '' }
}

function emptyExercise() {
  return { exercise_id: '', exercise_variant_id: '', exercise_title: '', variants: [] }
}

function emptySlot() {
  return { title: '', notes: '', training_unit_id: '', exercises: [] }
}

/** Native-Tooltip für Ziel-Chips (Hover); kurz halten für OS-Tooltip-Limits */
function goalHoverText(g) {
  const t = (g.title || '').trim() || 'Ohne Titel'
  const n = (g.notes || '').trim()
  if (!n) return t
  const combined = `${t} — ${n}`
  return combined.length > 280 ? `${combined.slice(0, 277)}…` : combined
}

function defaultForm() {
  return {
    title: '',
    description: '',
    plan_mode: 'library',
    group_id: '',
    planned_period_start: '',
    planned_period_end: '',
    visibility: 'private',
    club_id: '',
    goals: [emptyGoal()],
    slots: [],
  }
}

function serverFrameworkToForm(fw) {
  const goalsIn = Array.isArray(fw.goals) && fw.goals.length ? fw.goals : [emptyGoal()]
  return {
    title: fw.title || '',
    description: fw.description || '',
    plan_mode: fw.plan_mode || 'library',
    group_id: fw.group_id != null ? String(fw.group_id) : '',
    planned_period_start: fw.planned_period_start || '',
    planned_period_end: fw.planned_period_end || '',
    visibility: fw.visibility || 'private',
    club_id: fw.club_id != null ? String(fw.club_id) : '',
    goals: goalsIn.map((g) => ({
      title: g.title || '',
      notes: g.notes || '',
    })),
    slots: (fw.slots || []).map((s) => ({
      title: s.title || '',
      notes: s.notes || '',
      training_unit_id: s.training_unit_id != null ? String(s.training_unit_id) : '',
      exercises: (s.exercises || []).map((ex) => ({
        exercise_id: ex.exercise_id,
        exercise_variant_id: ex.exercise_variant_id != null ? String(ex.exercise_variant_id) : '',
        exercise_title: ex.exercise_title || '',
        variants: [],
      })),
    })),
  }
}

async function enrichSlotExercisesWithVariants(formSlots) {
  const ids = new Set()
  for (const s of formSlots || []) {
    for (const it of s.exercises || []) {
      if (it.exercise_id) ids.add(Number(it.exercise_id))
    }
  }
  const cache = new Map()
  await Promise.all(
    [...ids].map(async (id) => {
      try {
        const ex = await api.getExercise(id)
        cache.set(id, {
          title: ex.title || '',
          variants: Array.isArray(ex.variants) ? ex.variants : [],
        })
      } catch {
        cache.set(id, { title: '', variants: [] })
      }
    })
  )
  return (formSlots || []).map((s) => ({
    ...s,
    exercises: (s.exercises || []).map((it) => {
      if (!it.exercise_id) return it
      const c = cache.get(Number(it.exercise_id))
      if (!c) return it
      return {
        ...it,
        exercise_title: it.exercise_title || c.title,
        variants: it.variants?.length ? it.variants : c.variants,
      }
    }),
  }))
}

function buildApiPayload(form) {
  const goals = (form.goals || [])
    .map((g, i) => ({
      sort_order: i,
      title: (g.title || '').trim(),
      notes: (g.notes || '').trim() || null,
    }))
    .filter((g) => g.title)
  if (goals.length === 0) {
    throw new Error('Mindestens ein Entwicklungsziel mit Titel ist erforderlich.')
  }

  const slots = (form.slots || []).map((s, si) => {
    const tu =
      form.plan_mode === 'concrete' && s.training_unit_id
        ? parseInt(s.training_unit_id, 10)
        : null
    const exercises = (s.exercises || [])
      .map((ex, j) => {
        if (!ex.exercise_id) return null
        const vid = ex.exercise_variant_id
        return {
          exercise_id: parseInt(ex.exercise_id, 10),
          exercise_variant_id:
            vid !== '' && vid != null && !Number.isNaN(Number(vid)) ? parseInt(vid, 10) : null,
          order_index: j,
        }
      })
      .filter(Boolean)
    return {
      sort_order: si,
      title: (s.title || '').trim() || null,
      notes: (s.notes || '').trim() || null,
      training_unit_id: tu,
      exercises,
    }
  })

  const groupId =
    form.plan_mode === 'library'
      ? null
      : form.group_id && !Number.isNaN(parseInt(form.group_id, 10))
        ? parseInt(form.group_id, 10)
        : null

  const clubId =
    form.club_id && !Number.isNaN(parseInt(form.club_id, 10))
      ? parseInt(form.club_id, 10)
      : null

  return {
    title: (form.title || '').trim(),
    description: (form.description || '').trim() || null,
    plan_mode: form.plan_mode,
    group_id: groupId,
    planned_period_start: form.planned_period_start || null,
    planned_period_end: form.planned_period_end || null,
    visibility: form.visibility || 'private',
    club_id: clubId,
    goals,
    slots,
  }
}

export default function TrainingFrameworkProgramEditPage() {
  const { id: idParam } = useParams()
  const location = useLocation()
  const navigate = useNavigate()
  /** Route `…/framework-programs/new` hat kein dynamisches `:id` — useParams ist dann leer. */
  const isNew = /\/framework-programs\/new\/?$/.test(location.pathname)

  const [loading, setLoading] = useState(!isNew)
  const [saving, setSaving] = useState(false)
  const [form, setForm] = useState(defaultForm())
  const [groups, setGroups] = useState([])
  const [clubs, setClubs] = useState([])
  const [units, setUnits] = useState([])
  const [pickerSlotIdx, setPickerSlotIdx] = useState(null)
  const [peekId, setPeekId] = useState(null)
  const [editingGoalIdx, setEditingGoalIdx] = useState(null)
  const [goalMenuGi, setGoalMenuGi] = useState(null)
  const [exerciseMenu, setExerciseMenu] = useState(null)
  /** Nur schmal: Stammdaten | Plan (Ziele übereinander, darunter Slots) — Desktop: alles sichtbar */
  const [frameworkTab, setFrameworkTab] = useState('meta')
  const [desktopLayout, setDesktopLayout] = useState(
    typeof window !== 'undefined'
      ? window.matchMedia(`(min-width: ${FRAMEWORK_DESKTOP_MIN_PX}px)`).matches
      : false
  )

  useEffect(() => {
    const mq = window.matchMedia(`(min-width: ${FRAMEWORK_DESKTOP_MIN_PX}px)`)
    const apply = () => setDesktopLayout(!!mq.matches)
    apply()
    mq.addEventListener('change', apply)
    return () => mq.removeEventListener('change', apply)
  }, [])

  useEffect(() => {
    const onPointerDown = (e) => {
      const t = e.target
      if (t.closest?.('.framework-popmenu-anchor')) return
      setExerciseMenu(null)
      setGoalMenuGi(null)
    }
    document.addEventListener('pointerdown', onPointerDown, true)
    return () => document.removeEventListener('pointerdown', onPointerDown, true)
  }, [])

  const loadMeta = useCallback(async () => {
    try {
      const [gr, cl] = await Promise.all([
        api.listTrainingGroups({ status: 'active' }),
        api.listClubs(),
      ])
      setGroups(Array.isArray(gr) ? gr : [])
      setClubs(Array.isArray(cl) ? cl : [])
    } catch {
      setGroups([])
      setClubs([])
    }
  }, [])

  useEffect(() => {
    loadMeta()
  }, [loadMeta])

  useEffect(() => {
    if (form.plan_mode !== 'concrete' || !form.group_id) {
      setUnits([])
      return
    }
    let cancelled = false
    ;(async () => {
      try {
        const today = new Date()
        const start = new Date(today)
        start.setFullYear(start.getFullYear() - 1)
        const end = new Date(today)
        end.setFullYear(end.getFullYear() + 1)
        const u = await api.listTrainingUnits({
          group_id: parseInt(form.group_id, 10),
          start_date: start.toISOString().slice(0, 10),
          end_date: end.toISOString().slice(0, 10),
        })
        if (!cancelled) setUnits(Array.isArray(u) ? u : [])
      } catch {
        if (!cancelled) setUnits([])
      }
    })()
    return () => {
      cancelled = true
    }
  }, [form.plan_mode, form.group_id])

  useEffect(() => {
    if (isNew) {
      setForm(defaultForm())
      setLoading(false)
      return
    }
    const fid = parseInt(idParam, 10)
    if (Number.isNaN(fid)) {
      navigate('/planning/framework-programs', { replace: true })
      return
    }
    setLoading(true)
    let cancelled = false
    ;(async () => {
      try {
        const fw = await api.getTrainingFrameworkProgram(fid)
        if (cancelled) return
        let next = serverFrameworkToForm(fw)
        next = { ...next, slots: await enrichSlotExercisesWithVariants(next.slots) }
        setForm(next)
      } catch (e) {
        alert(e.message || 'Laden fehlgeschlagen')
        navigate('/planning/framework-programs')
      } finally {
        if (!cancelled) setLoading(false)
      }
    })()
    return () => {
      cancelled = true
    }
  }, [isNew, idParam, navigate, location.pathname])

  const updateField = (key, val) => {
    setForm((prev) => {
      const n = { ...prev, [key]: val }
      if (key === 'plan_mode' && val === 'library') {
        n.group_id = ''
      }
      return n
    })
  }

  const moveGoal = (idx, dir) => {
    setEditingGoalIdx(null)
    setGoalMenuGi(null)
    setForm((prev) => {
      const j = idx + dir
      if (j < 0 || j >= prev.goals.length) return prev
      const g = [...prev.goals]
      ;[g[idx], g[j]] = [g[j], g[idx]]
      return { ...prev, goals: g }
    })
  }

  const addGoal = () => {
    let newIdx = 0
    setForm((prev) => {
      const goals = [...prev.goals, emptyGoal()]
      newIdx = goals.length - 1
      return { ...prev, goals }
    })
    setEditingGoalIdx(newIdx)
    setGoalMenuGi(null)
  }

  const removeGoal = (idx) => {
    setForm((prev) => {
      const g = prev.goals.filter((_, i) => i !== idx)
      return { ...prev, goals: g.length ? g : [emptyGoal()] }
    })
    setEditingGoalIdx(null)
    setGoalMenuGi(null)
  }

  const moveSlot = (idx, dir) => {
    setForm((prev) => {
      const j = idx + dir
      if (j < 0 || j >= prev.slots.length) return prev
      const sl = [...prev.slots]
      ;[sl[idx], sl[j]] = [sl[j], sl[idx]]
      return { ...prev, slots: sl }
    })
  }

  const addSlot = () => setForm((prev) => ({ ...prev, slots: [...prev.slots, emptySlot()] }))
  const removeSlot = (idx) =>
    setForm((prev) => ({ ...prev, slots: prev.slots.filter((_, i) => i !== idx) }))

  const slotField = (sIdx, key, val) => {
    setForm((prev) => ({
      ...prev,
      slots: prev.slots.map((s, i) => (i === sIdx ? { ...s, [key]: val } : s)),
    }))
  }

  const addExerciseToSlot = (sIdx) => {
    setForm((prev) => ({
      ...prev,
      slots: prev.slots.map((s, i) =>
        i === sIdx ? { ...s, exercises: [...(s.exercises || []), emptyExercise()] } : s
      ),
    }))
  }

  const moveExercise = (sIdx, eIdx, dir) => {
    setForm((prev) => ({
      ...prev,
      slots: prev.slots.map((s, i) => {
        if (i !== sIdx) return s
        const j = eIdx + dir
        const ex = [...(s.exercises || [])]
        if (j < 0 || j >= ex.length) return s
        ;[ex[eIdx], ex[j]] = [ex[j], ex[eIdx]]
        return { ...s, exercises: ex }
      }),
    }))
  }

  const removeExercise = (sIdx, eIdx) => {
    setForm((prev) => ({
      ...prev,
      slots: prev.slots.map((s, i) => {
        if (i !== sIdx) return s
        return { ...s, exercises: (s.exercises || []).filter((_, ei) => ei !== eIdx) }
      }),
    }))
  }

  const setExerciseChoice = async (sIdx, eIdx, exercise) => {
    const vid = ''
    let variants = Array.isArray(exercise.variants) ? exercise.variants : []
    let title = exercise.title || ''
    if (!variants.length) {
      try {
        const full = await api.getExercise(exercise.id)
        variants = Array.isArray(full.variants) ? full.variants : []
        title = full.title || title
      } catch {
        variants = []
      }
    }
    setForm((prev) => ({
      ...prev,
      slots: prev.slots.map((s, i) => {
        if (i !== sIdx) return s
        const exRows = [...(s.exercises || [])]
        const row = exRows[eIdx] || emptyExercise()
        exRows[eIdx] = {
          ...row,
          exercise_id: exercise.id,
          exercise_variant_id: vid,
          exercise_title: title,
          variants,
        }
        return { ...s, exercises: exRows }
      }),
    }))
  }

  const exerciseField = (sIdx, eIdx, key, val) => {
    setForm((prev) => ({
      ...prev,
      slots: prev.slots.map((s, i) => {
        if (i !== sIdx) return s
        return {
          ...s,
          exercises: (s.exercises || []).map((ex, ei) =>
            ei === eIdx ? { ...ex, [key]: val } : ex
          ),
        }
      }),
    }))
  }

  const handleSave = async () => {
    if (!(form.title || '').trim()) {
      alert('Titel ist Pflichtfeld.')
      return
    }
    let payload
    try {
      payload = buildApiPayload(form)
    } catch (e) {
      alert(e.message || 'Validierung')
      return
    }
    if (!payload.title) {
      alert('Titel ist Pflichtfeld.')
      return
    }
    setSaving(true)
    try {
      if (isNew) {
        const created = await api.createTrainingFrameworkProgram(payload)
        navigate(`/planning/framework-programs/${created.id}`, { replace: true })
      } else {
        const fid = parseInt(idParam, 10)
        await api.updateTrainingFrameworkProgram(fid, payload)
        const refreshed = await api.getTrainingFrameworkProgram(fid)
        let next = serverFrameworkToForm(refreshed)
        next = { ...next, slots: await enrichSlotExercisesWithVariants(next.slots) }
        setForm(next)
      }
    } catch (e) {
      alert(e.message || 'Speichern fehlgeschlagen')
    } finally {
      setSaving(false)
    }
  }

  async function handleDelete() {
    if (isNew) return
    const fid = parseInt(idParam, 10)
    if (!confirm('Dieses Rahmenprogramm wirklich löschen?')) return
    try {
      await api.deleteTrainingFrameworkProgram(fid)
      navigate('/planning/framework-programs')
    } catch (e) {
      alert(e.message || 'Löschen fehlgeschlagen')
    }
  }

  const insertExerciseBefore = (fromS, fromE, toS, toE) => {
    setForm((prev) => {
      const slots = prev.slots.map((s) => ({ ...s, exercises: [...(s.exercises || [])] }))
      if (fromS < 0 || fromS >= slots.length || toS < 0 || toS >= slots.length) return prev
      const fromList = slots[fromS].exercises
      if (fromE < 0 || fromE >= fromList.length) return prev
      const [moved] = fromList.splice(fromE, 1)
      let insertAt = toE
      if (fromS === toS && fromE < toE) insertAt -= 1
      insertAt = Math.max(0, Math.min(insertAt, slots[toS].exercises.length))
      slots[toS].exercises.splice(insertAt, 0, moved)
      return { ...prev, slots }
    })
  }

  const appendExerciseToSlot = (fromS, fromE, toS) => {
    setForm((prev) => {
      const slots = prev.slots.map((s) => ({ ...s, exercises: [...(s.exercises || [])] }))
      if (fromS < 0 || fromS >= slots.length || toS < 0 || toS >= slots.length) return prev
      const fromList = slots[fromS].exercises
      if (fromE < 0 || fromE >= fromList.length) return prev
      const [moved] = fromList.splice(fromE, 1)
      slots[toS].exercises.push(moved)
      return { ...prev, slots }
    })
  }

  const onExerciseDragStart = (e, fromS, fromE) => {
    e.dataTransfer.effectAllowed = 'move'
    e.dataTransfer.setData(DND_FW_EX, JSON.stringify({ fromS, fromE }))
    setExerciseMenu(null)
  }

  const onExerciseDragOver = (e) => {
    e.preventDefault()
    e.dataTransfer.dropEffect = 'move'
  }

  const onSlotDragStart = (e, slotIdx) => {
    e.stopPropagation()
    e.dataTransfer.effectAllowed = 'move'
    e.dataTransfer.setData(DND_FW_SLOT, JSON.stringify({ slotIdx }))
  }

  const onSlotColumnDragOver = (e) => {
    e.preventDefault()
    e.dataTransfer.dropEffect = 'move'
  }

  const onSlotColumnDrop = (e, targetSi) => {
    e.preventDefault()
    const slotRaw = e.dataTransfer.getData(DND_FW_SLOT)
    if (slotRaw) {
      const { slotIdx } = JSON.parse(slotRaw)
      if (slotIdx !== targetSi) {
        setForm((prev) => ({ ...prev, slots: reorderArray([...prev.slots], slotIdx, targetSi) }))
      }
      return
    }
    const exRaw = e.dataTransfer.getData(DND_FW_EX)
    if (exRaw) {
      const { fromS, fromE } = JSON.parse(exRaw)
      appendExerciseToSlot(fromS, fromE, targetSi)
    }
  }

  const panelActive = (key) => {
    if (desktopLayout) return true
    if (key === 'meta') return frameworkTab === 'meta'
    if (key === 'plan') return frameworkTab === 'plan'
    return false
  }

  /** Schmale Ansicht: Sichtbarkeit per Inline (falls globales CSS nicht greift / altes Bundle) */
  const panelVisibilityStyle = (key) =>
    desktopLayout ? undefined : { display: panelActive(key) ? 'block' : 'none' }

  if (loading) {
    return (
      <div className="app-page" style={{ padding: '2rem 0', textAlign: 'center' }}>
        <div className="spinner" />
        <p>Laden…</p>
      </div>
    )
  }

  return (
    <div className="app-page">
      <div className="framework-edit">
        <p style={{ marginBottom: '0.75rem' }}>
          <Link to="/planning/framework-programs" style={{ color: 'var(--accent-dark)' }}>
            ← Alle Rahmenprogramme
          </Link>
        </p>

        <h1 style={{ marginBottom: '0.75rem' }}>{isNew ? 'Neues Rahmenprogramm' : 'Rahmenprogramm bearbeiten'}</h1>

        <div className="card" style={{ marginBottom: '1rem', background: 'var(--surface2)', borderStyle: 'dashed' }}>
          <p style={{ fontSize: '0.88rem', color: 'var(--text2)', lineHeight: 1.55, margin: 0 }}>
            <strong style={{ color: 'var(--text1)' }}>Stand dieser Funktion:</strong> Der Rahmen speichert Ziele, Slots
            und pro Slot eine <strong>Übungsliste</strong> (Stückliste). Eine <strong>volle Einheiten‑Struktur</strong> wie
            in der Trainingsplanung (Abschnitte, Notizen, Mikrovorlage pro Slot) ist im Konzept optional (
            <strong>CURR‑010</strong>: <code>training_plan_template_id</code> pro Slot) — in der DB derzeit{' '}
            <strong>noch nicht</strong> umgesetzt.{' '}
            <strong>Übernahme</strong> in konkrete Trainingseinheiten mit Referenz auf den Rahmen (Kopie, editierbar){' '}
            ist <strong>Stufe 3 / Lineage</strong> vorgesehen. Die Slot‑Spalten unten sind die geplanten
            Session‑Positionen <strong>ohne feste Termine</strong> am Rahmen.
          </p>
        </div>

        <div
          className="framework-edit__tabbar"
          role="tablist"
          aria-label="Bereiche"
          style={
            desktopLayout
              ? { display: 'none' }
              : {
                  display: 'flex',
                  gap: 6,
                  marginBottom: 14,
                  padding: '6px 0 12px',
                  borderBottom: '2px solid var(--accent)',
                  flexWrap: 'nowrap',
                  overflowX: 'auto',
                  position: 'sticky',
                  top: 0,
                  zIndex: 6,
                  background: 'var(--bg)',
                }
          }
        >
          {[
            { id: 'meta', label: 'Stammdaten' },
            { id: 'plan', label: 'Plan (Ziele & Sessions)' },
          ].map((t) => (
            <button
              key={t.id}
              type="button"
              role="tab"
              aria-selected={frameworkTab === t.id}
              className={'framework-edit__tab' + (frameworkTab === t.id ? ' framework-edit__tab--active' : '')}
              onClick={() => setFrameworkTab(t.id)}
            >
              {t.label}
            </button>
          ))}
        </div>

        <div
          className={
            'framework-edit__panel framework-edit__panel--meta card' +
            (panelActive('meta') ? ' framework-edit__panel--active' : '')
          }
          style={{ marginBottom: '1rem', ...(panelVisibilityStyle('meta') || {}) }}
        >
          <h3 className="card-title">Stammdaten</h3>
          <div className="form-row">
            <label className="form-label">Titel *</label>
            <input
              className="form-input"
              value={form.title}
              onChange={(e) => updateField('title', e.target.value)}
              placeholder="z. B. Vorbereitung Gürtelprüfung — 8 Wochen"
            />
          </div>
          <div className="form-row">
            <label className="form-label">Beschreibung</label>
            <textarea
              className="form-input"
              rows={3}
              value={form.description}
              onChange={(e) => updateField('description', e.target.value)}
            />
          </div>
          <div className="form-row">
            <label className="form-label">Modus</label>
            <select
              className="form-input"
              value={form.plan_mode}
              onChange={(e) => updateField('plan_mode', e.target.value)}
            >
              <option value="library">Bibliothek (zeitlos, ohne Gruppe)</option>
              <option value="concrete">Konkret (optional Gruppe & Verknüpfung zu Einheiten)</option>
            </select>
            <p style={{ fontSize: '0.85rem', color: 'var(--text2)', marginTop: '0.35rem' }}>
              Bibliothek: keine Trainingsgruppe und keine Slot‑Zuordnung zu Terminen. Konkret: optional Gruppe wählen und
              Slots mit geplanten Trainingseinheiten verknüpfen.
            </p>
          </div>

          {form.plan_mode === 'concrete' && (
            <div className="form-row">
              <label className="form-label">Trainingsgruppe (optional)</label>
              <select
                className="form-input"
                value={form.group_id}
                onChange={(e) => updateField('group_id', e.target.value)}
              >
                <option value="">— keine —</option>
                {groups.map((g) => (
                  <option key={g.id} value={String(g.id)}>
                    {g.name} ({g.club_name || 'Verein'})
                  </option>
                ))}
              </select>
            </div>
          )}

          <div className="responsive-grid-2" style={{ marginBottom: '16px' }}>
            <div>
              <label className="form-label">Zeitraum von</label>
              <input
                type="date"
                className="form-input"
                value={form.planned_period_start}
                onChange={(e) => updateField('planned_period_start', e.target.value)}
              />
            </div>
            <div>
              <label className="form-label">Zeitraum bis</label>
              <input
                type="date"
                className="form-input"
                value={form.planned_period_end}
                onChange={(e) => updateField('planned_period_end', e.target.value)}
              />
            </div>
          </div>

          <div className="responsive-grid-2" style={{ marginBottom: '16px' }}>
            <div>
              <label className="form-label">Sichtbarkeit</label>
              <select
                className="form-input"
                value={form.visibility}
                onChange={(e) => updateField('visibility', e.target.value)}
              >
                <option value="private">Privat</option>
                <option value="club">Verein</option>
                <option value="official">Offiziell</option>
              </select>
            </div>
            <div>
              <label className="form-label">Verein (optional)</label>
              <select
                className="form-input"
                value={form.club_id}
                onChange={(e) => updateField('club_id', e.target.value)}
              >
                <option value="">— keiner —</option>
                {clubs.map((c) => (
                  <option key={c.id} value={String(c.id)}>
                    {c.name}
                  </option>
                ))}
              </select>
            </div>
          </div>
        </div>

        <div
          className={
            'framework-edit__panel framework-edit__panel--plan' +
            (panelActive('plan') ? ' framework-edit__panel--active' : '')
          }
          style={{ marginBottom: '1rem', ...(panelVisibilityStyle('plan') || {}) }}
        >
          <div className="framework-edit__plan-stack">
            <div className="card framework-plan-goals">
              <div
                style={{
                  display: 'flex',
                  flexWrap: 'wrap',
                  gap: '8px',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  marginBottom: '0.6rem',
                }}
              >
                <h3 className="card-title" style={{ marginBottom: 0 }}>
                  Entwicklungsziele
                </h3>
                <button type="button" className="btn btn-secondary framework-ctrl framework-ctrl--xs" onClick={addGoal}>
                  + Ziel
                </button>
              </div>
              <p className="framework-goal-chips__hint">
                Ziele als Tags — Tippen zum Bearbeiten; am Desktop zeigt der <strong>Titel</strong>-Tooltip die Notizen mit. Am
                Handy: <strong>⋯</strong> oder Bearbeiten.
              </p>
              <div className="framework-goal-chips">
                {(form.goals || []).map((g, gi) => (
                  <div key={gi} className="framework-popmenu-anchor framework-goal-chip-wrap">
                    <button
                      type="button"
                      className={
                        'framework-goal-chip' + (editingGoalIdx === gi ? ' framework-goal-chip--active' : '')
                      }
                      title={goalHoverText(g)}
                      onClick={() => {
                        setEditingGoalIdx(gi)
                        setGoalMenuGi(null)
                      }}
                    >
                      <span className="framework-goal-chip__text">
                        {(g.title || '').trim() || `Ziel ${gi + 1}`}
                      </span>
                    </button>
                    <button
                      type="button"
                      className="framework-goal-chip__kebab"
                      aria-label="Ziel-Menü"
                      aria-expanded={goalMenuGi === gi}
                      onClick={(e) => {
                        e.stopPropagation()
                        setGoalMenuGi((prev) => (prev === gi ? null : gi))
                      }}
                    >
                      ⋮
                    </button>
                    {goalMenuGi === gi ? (
                      <ul className="framework-popmenu" role="menu">
                        <li>
                          <button
                            type="button"
                            role="menuitem"
                            className="framework-popmenu__item"
                            onClick={() => {
                              setEditingGoalIdx(gi)
                              setGoalMenuGi(null)
                            }}
                          >
                            Bearbeiten
                          </button>
                        </li>
                        <li>
                          <button
                            type="button"
                            role="menuitem"
                            className="framework-popmenu__item"
                            onClick={() => {
                              moveGoal(gi, -1)
                              setGoalMenuGi(null)
                            }}
                          >
                            Nach vorn in der Liste
                          </button>
                        </li>
                        <li>
                          <button
                            type="button"
                            role="menuitem"
                            className="framework-popmenu__item"
                            onClick={() => {
                              moveGoal(gi, 1)
                              setGoalMenuGi(null)
                            }}
                          >
                            Nach hinten in der Liste
                          </button>
                        </li>
                        <li>
                          <button
                            type="button"
                            role="menuitem"
                            className="framework-popmenu__item framework-popmenu__item--danger"
                            onClick={() => removeGoal(gi)}
                          >
                            Entfernen
                          </button>
                        </li>
                      </ul>
                    ) : null}
                  </div>
                ))}
              </div>
              {editingGoalIdx != null && form.goals[editingGoalIdx] != null ? (
                <div className="framework-goal-editor">
                  <div className="form-row">
                    <label className="form-label">Titel *</label>
                    <input
                      className="form-input"
                      value={form.goals[editingGoalIdx].title}
                      onChange={(e) =>
                        setForm((prev) => ({
                          ...prev,
                          goals: prev.goals.map((x, i) =>
                            i === editingGoalIdx ? { ...x, title: e.target.value } : x
                          ),
                        }))
                      }
                    />
                  </div>
                  <div className="form-row" style={{ marginBottom: 10 }}>
                    <label className="form-label">Notizen</label>
                    <textarea
                      className="form-input"
                      rows={2}
                      value={form.goals[editingGoalIdx].notes}
                      onChange={(e) =>
                        setForm((prev) => ({
                          ...prev,
                          goals: prev.goals.map((x, i) =>
                            i === editingGoalIdx ? { ...x, notes: e.target.value } : x
                          ),
                        }))
                      }
                    />
                  </div>
                  <button
                    type="button"
                    className="btn btn-secondary framework-ctrl framework-ctrl--xs"
                    onClick={() => setEditingGoalIdx(null)}
                  >
                    Fertig
                  </button>
                </div>
              ) : null}
            </div>

            <div className="card framework-plan-slots" style={{ marginBottom: '1.5rem' }}>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
                <h3 className="card-title" style={{ marginBottom: 0 }}>
                  Session‑Slots & Übungen
                </h3>
                <button type="button" className="btn btn-secondary framework-ctrl framework-ctrl--xs" onClick={addSlot}>
                  + Slot
                </button>
              </div>

              {form.slots.length === 0 ? (
                <p style={{ color: 'var(--text2)', fontSize: '0.9rem' }}>
                  Noch keine Slots — mit <strong>+ Slot</strong> legst du Spalten an (z. B. „Woche 1“) und ordnest Übungen
                  zu. Bei mehreren Spalten erscheint eine horizontale Scroll-Leiste.
                </p>
              ) : (
                <p
                  className="framework-slots-hint"
                  style={{ fontSize: '0.8rem', color: 'var(--text3)', marginBottom: '10px', lineHeight: 1.45 }}
                >
                  Sessions nebeneinander — nach rechts scrollen bzw. wischen. Reihenfolge mit Griff (⋮⋮ / ☰)
                  per Drag & Drop möglich (Browser-abhängig bei Touch); zusätzlich Pfeile und Menüs nutzbar.
                </p>
              )}

              <div className="framework-slots-board-outer">
                <div className="framework-slots-board">
                  {form.slots.map((slot, si) => (
                    <div
                      key={si}
                      className="card framework-slot-card"
                      onDragOver={onSlotColumnDragOver}
                      onDrop={(e) => onSlotColumnDrop(e, si)}
                    >
                      <div className="framework-slot-card__head">
                        <span
                          role="button"
                          tabIndex={0}
                          className="framework-slot-card__drag-handle"
                          draggable
                          onDragStart={(e) => onSlotDragStart(e, si)}
                          aria-label="Slot ziehen: Reihenfolge ändern"
                          title="Slot ziehen (Reihenfolge)"
                        >
                          ⋮⋮
                        </span>
                        <div className="framework-slot-card__head-main">
                          <span className="framework-slot-card__slot-label">Session {si + 1}</span>
                          <input
                            className="form-input framework-slot-card__title-input"
                            value={slot.title}
                            onChange={(e) => slotField(si, 'title', e.target.value)}
                            placeholder={`z. B. Woche ${si + 1}`}
                          />
                        </div>
                        <div className="framework-slot-card__slot-actions">
                          <button
                            type="button"
                            className="btn btn-secondary framework-ctrl framework-ctrl--xs"
                            onClick={() => moveSlot(si, -1)}
                            aria-label="Slot nach links / oben"
                          >
                            ↑
                          </button>
                          <button
                            type="button"
                            className="btn btn-secondary framework-ctrl framework-ctrl--xs"
                            onClick={() => moveSlot(si, 1)}
                            aria-label="Slot nach rechts / unten"
                          >
                            ↓
                          </button>
                          <button
                            type="button"
                            className="btn btn-secondary framework-ctrl framework-ctrl--xs"
                            onClick={() => removeSlot(si)}
                          >
                            ×
                          </button>
                        </div>
                      </div>

                      <details className="framework-slot-details">
                        <summary className="framework-slot-details__summary">Notizen &amp; Einheit</summary>
                        <div className="form-row">
                          <label className="form-label">Notizen</label>
                          <textarea
                            className="form-input"
                            rows={2}
                            value={slot.notes}
                            onChange={(e) => slotField(si, 'notes', e.target.value)}
                          />
                        </div>
                        {form.plan_mode === 'concrete' && (
                          <div className="form-row">
                            <label className="form-label">Trainingseinheit (optional)</label>
                            <select
                              className="form-input"
                              value={slot.training_unit_id}
                              onChange={(e) => slotField(si, 'training_unit_id', e.target.value)}
                              disabled={!form.group_id}
                            >
                              <option value="">— keine —</option>
                              {units.map((u) => (
                                <option key={u.id} value={String(u.id)}>
                                  {u.planned_date}
                                  {u.planned_time_start ? ` ${String(u.planned_time_start).slice(0, 5)}` : ''}
                                  {u.planned_focus ? ` · ${u.planned_focus}` : ''}
                                </option>
                              ))}
                            </select>
                            {!form.group_id ? (
                              <p style={{ fontSize: '0.82rem', color: 'var(--text2)', marginTop: '0.35rem' }}>
                                Wähle in den Stammdaten eine Trainingsgruppe, um geplante Einheiten zu laden.
                              </p>
                            ) : null}
                          </div>
                        )}
                      </details>

                      <div className="framework-slot-card__exercises">
                        <div className="framework-slot-card__exercises-head">
                          <span className="framework-slot-card__exercises-title">Übungen</span>
                          <button
                            type="button"
                            className="btn btn-secondary framework-ctrl framework-ctrl--xs"
                            onClick={() => addExerciseToSlot(si)}
                          >
                            + Übung
                          </button>
                        </div>
                        {(slot.exercises || []).length === 0 ? (
                          <p className="framework-slot-card__empty-hint">
                            Noch keine Übung — <strong>+ Übung</strong> oder Übung mit dem Griff ☰ hierher ziehen.
                          </p>
                        ) : null}
                        {(slot.exercises || []).map((ex, ei) => (
                          <div
                            key={ei}
                            className="framework-ex-row"
                            onDragOver={onExerciseDragOver}
                            onDrop={(e) => {
                              e.preventDefault()
                              e.stopPropagation()
                              const raw = e.dataTransfer.getData(DND_FW_EX)
                              if (!raw) return
                              const { fromS, fromE } = JSON.parse(raw)
                              if (fromS === si && fromE === ei) return
                              insertExerciseBefore(fromS, fromE, si, ei)
                            }}
                          >
                            <span
                              className="framework-ex-row__grip"
                              draggable
                              onDragStart={(e) => {
                                e.stopPropagation()
                                onExerciseDragStart(e, si, ei)
                              }}
                              aria-hidden
                            >
                              ☰
                            </span>
                            <div className="framework-ex-row__body">
                              <div className="framework-ex-row__title-line">
                                {ex.exercise_id ? (
                                  <strong className="framework-ex-row__title">
                                    {ex.exercise_title || `Übung #${ex.exercise_id}`}
                                  </strong>
                                ) : (
                                  <span className="framework-ex-row__title framework-ex-row__title--muted">
                                    Keine Übung gewählt
                                  </span>
                                )}
                                {ex.exercise_id ? (
                                  <span className="framework-ex-row__id">#{ex.exercise_id}</span>
                                ) : null}
                              </div>
                              <div className="framework-ex-row__row2">
                                {ex.exercise_id && (ex.variants || []).length > 0 ? (
                                  <select
                                    className="form-input framework-ex-row__variant-select"
                                    value={ex.exercise_variant_id}
                                    onChange={(e) => exerciseField(si, ei, 'exercise_variant_id', e.target.value)}
                                  >
                                    <option value="">Variante</option>
                                    {(ex.variants || []).map((v) => (
                                      <option key={v.id} value={String(v.id)}>
                                        {v.variant_name || v.name || `V ${v.id}`}
                                      </option>
                                    ))}
                                  </select>
                                ) : (
                                  <span className="framework-ex-row__variant-spacer" aria-hidden />
                                )}
                                <div className="framework-popmenu-anchor framework-ex-row__menu-anchor">
                                  <button
                                    type="button"
                                    className="framework-ex-row__kebab"
                                    aria-label="Übung-Aktionen"
                                    aria-haspopup="menu"
                                    aria-expanded={
                                      exerciseMenu?.slotIdx === si && exerciseMenu?.exIdx === ei ? 'true' : 'false'
                                    }
                                    onClick={(e) => {
                                      e.stopPropagation()
                                      setExerciseMenu((prev) =>
                                        prev?.slotIdx === si && prev?.exIdx === ei
                                          ? null
                                          : { slotIdx: si, exIdx: ei }
                                      )
                                    }}
                                  >
                                    ⋮
                                  </button>
                                  {exerciseMenu?.slotIdx === si && exerciseMenu?.exIdx === ei ? (
                                    <ul className="framework-popmenu framework-popmenu--align-end" role="menu">
                                      <li>
                                        <button
                                          type="button"
                                          role="menuitem"
                                          className="framework-popmenu__item"
                                          onClick={() => {
                                            setPickerSlotIdx({ slotIdx: si, exerciseIdx: ei })
                                            setExerciseMenu(null)
                                          }}
                                        >
                                          Übung wählen…
                                        </button>
                                      </li>
                                      {ex.exercise_id ? (
                                        <li>
                                          <button
                                            type="button"
                                            role="menuitem"
                                            className="framework-popmenu__item"
                                            onClick={() => {
                                              setPeekId(Number(ex.exercise_id))
                                              setExerciseMenu(null)
                                            }}
                                          >
                                            Vorschau
                                          </button>
                                        </li>
                                      ) : null}
                                      <li>
                                        <button
                                          type="button"
                                          role="menuitem"
                                          className="framework-popmenu__item"
                                          onClick={() => {
                                            moveExercise(si, ei, -1)
                                            setExerciseMenu(null)
                                          }}
                                        >
                                          Nach oben in diesem Slot
                                        </button>
                                      </li>
                                      <li>
                                        <button
                                          type="button"
                                          role="menuitem"
                                          className="framework-popmenu__item"
                                          onClick={() => {
                                            moveExercise(si, ei, 1)
                                            setExerciseMenu(null)
                                          }}
                                        >
                                          Nach unten in diesem Slot
                                        </button>
                                      </li>
                                      <li>
                                        <button
                                          type="button"
                                          role="menuitem"
                                          className="framework-popmenu__item framework-popmenu__item--danger"
                                          onClick={() => {
                                            removeExercise(si, ei)
                                            setExerciseMenu(null)
                                          }}
                                        >
                                          Entfernen
                                        </button>
                                      </li>
                                    </ul>
                                  ) : null}
                                </div>
                              </div>
                            </div>
                          </div>
                        ))}
                        <div
                          className="framework-slot-card__append-drop"
                          onDragOver={onExerciseDragOver}
                          onDrop={(e) => {
                            e.preventDefault()
                            e.stopPropagation()
                            const raw = e.dataTransfer.getData(DND_FW_EX)
                            if (!raw) return
                            const { fromS, fromE } = JSON.parse(raw)
                            appendExerciseToSlot(fromS, fromE, si)
                          }}
                        >
                          Ans Ende ziehen
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', alignItems: 'center' }}>
          <button type="button" className="btn btn-primary" disabled={saving} onClick={handleSave}>
            {saving ? 'Speichern…' : isNew ? 'Anlegen' : 'Speichern'}
          </button>
          <Link to="/planning/framework-programs" className="btn btn-secondary" style={{ textDecoration: 'none' }}>
            Abbrechen
          </Link>
          {!isNew ? (
            <button type="button" className="btn btn-secondary" onClick={handleDelete}>
              Löschen
            </button>
          ) : null}
        </div>
      </div>

      <ExercisePickerModal
        open={pickerSlotIdx != null}
        onClose={() => setPickerSlotIdx(null)}
        onSelectExercise={(exercise) => {
          if (!pickerSlotIdx) return
          setExerciseChoice(pickerSlotIdx.slotIdx, pickerSlotIdx.exerciseIdx, exercise)
          setPickerSlotIdx(null)
        }}
      />

      <ExercisePeekModal open={peekId != null} exerciseId={peekId || 0} onClose={() => setPeekId(null)} />
    </div>
  )
}