<template>
  <div>
    <div class="flex justify-between items-center mb-6 gap-4 flex-wrap">
      <div>
        <h2 class="text-2xl sm:text-3xl font-display font-bold text-gray-900 mb-2">
          Mannschaften verwalten
        </h2>
        <div class="w-24 h-1 bg-primary-600" />
      </div>

      <div class="flex items-center gap-2 flex-wrap">
        <label class="text-sm font-medium text-gray-700">Saison</label>
        <select
          v-model="selectedSeason"
          class="px-3 py-2 border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-primary-500"
          :disabled="isLoading || isSaving || isCreatingSeason"
          @change="onSeasonChange"
        >
          <option
            v-for="season in seasons"
            :key="season"
            :value="season"
          >
            {{ formatSeasonLabel(season) }}
          </option>
        </select>

        <button
          class="flex items-center px-4 py-2 bg-white border border-primary-300 text-primary-700 hover:bg-primary-50 font-semibold rounded-lg transition-colors disabled:opacity-50"
          :disabled="isLoading || isSaving || isCreatingSeason"
          @click="createNextSeason"
        >
          <Loader2
            v-if="isCreatingSeason"
            :size="18"
            class="animate-spin mr-2"
          />
          <Plus
            v-else
            :size="18"
            class="mr-2"
          />
          Neue Saison anlegen
        </button>

        <button
          class="flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
          @click="openAddModal"
        >
          <Plus
            :size="20"
            class="mr-2"
          /> Mannschaft hinzufügen
        </button>
      </div>
    </div>

    <div
      v-if="isLoading"
      class="flex items-center justify-center py-12"
    >
      <Loader2
        :size="40"
        class="animate-spin text-primary-600"
      />
    </div>

    <div
      v-else
      class="bg-white rounded-xl shadow-lg overflow-hidden"
    >
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Mannschaft
              </th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Liga
              </th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Staffelleiter
              </th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Mannschaftsführer
              </th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Spieler
              </th>
              <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                Aktionen
              </th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr
              v-for="(mannschaft, index) in mannschaften"
              :key="index"
              class="hover:bg-gray-50"
            >
              <td class="px-4 py-3 text-sm font-medium text-gray-900">
                {{ mannschaft.mannschaft }}
              </td>
              <td class="px-4 py-3 text-sm text-gray-600">
                {{ mannschaft.liga }}
              </td>
              <td class="px-4 py-3 text-sm text-gray-600">
                {{ mannschaft.staffelleiter }}
              </td>
              <td class="px-4 py-3 text-sm text-gray-600">
                {{ mannschaft.mannschaftsfuehrer }}
              </td>
              <td class="px-4 py-3 text-sm text-gray-600">
                <div class="max-w-xs truncate">
                  {{ getSpielerListe(mannschaft).join(', ') || '-' }}
                </div>
              </td>
              <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium space-x-3">
                <button
                  class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed mr-1"
                  title="Nach oben"
                  :disabled="isSaving || index === 0"
                  @click="moveMannschaftUp(index)"
                >
                  <ChevronUp :size="18" />
                </button>
                <button
                  class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed mr-2"
                  title="Nach unten"
                  :disabled="isSaving || index === mannschaften.length - 1"
                  @click="moveMannschaftDown(index)"
                >
                  <ChevronDown :size="18" />
                </button>
                <button
                  class="text-gray-600 hover:text-gray-900"
                  title="Bearbeiten"
                  @click="openEditModal(mannschaft, index)"
                >
                  <Pencil :size="18" />
                </button>
                <button
                  class="text-red-600 hover:text-red-900"
                  title="Löschen"
                  @click="confirmDelete(mannschaft, index)"
                >
                  <Trash2 :size="18" />
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div
      v-if="!isLoading && mannschaften.length === 0"
      class="bg-white rounded-xl shadow-lg p-12 text-center"
    >
      <Users
        :size="48"
        class="text-gray-400 mx-auto mb-4"
      />
      <h3 class="text-lg font-medium text-gray-900 mb-2">
        Keine Mannschaften vorhanden
      </h3>
      <p class="text-gray-600 mb-6">
        Fügen Sie die erste Mannschaft hinzu.
      </p>
      <button
        class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
        @click="openAddModal"
      >
        Mannschaft hinzufügen
      </button>
    </div>

    <!-- Add/Edit Modal -->
    <div
      v-if="showModal"
      class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4"
      @click.self="closeModal"
    >
      <div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div class="p-6 border-b border-gray-200">
          <h2 class="text-2xl font-display font-bold text-gray-900">
            {{ isEditing ? 'Mannschaft bearbeiten' : 'Neue Mannschaft' }}
          </h2>
        </div>
        <form
          class="p-6 space-y-4"
          @submit.prevent="saveMannschaft"
        >
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Mannschaft *</label>
            <input
              v-model="formData.mannschaft"
              type="text"
              required
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
              :disabled="isSaving"
            >
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Spielplan-Team-IDs</label>
            <select
              :value="selectedSpielplanTeamIds"
              multiple
              size="4"
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
              :disabled="isSaving"
              @change="updateSpielplanTeamIds"
            >
              <option v-for="team in spielplanTeams" :key="team.id" :value="team.id">
                {{ team.label }}
              </option>
            </select>
            <p class="mt-1 text-xs text-gray-500">
              Nach dem myTischtennis-Import alle passenden Einträge auswählen (z. B. Liga und Pokal). Mit Strg bzw. Cmd lassen sich mehrere Einträge markieren.
            </p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Liga *</label>
            <input
              v-model="formData.liga"
              type="text"
              required
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
              :disabled="isSaving"
            >
          </div>
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Staffelleiter</label>
              <input
                v-model="formData.staffelleiter"
                type="text"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                :disabled="isSaving"
              >
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Telefon</label>
              <input
                v-model="formData.telefon"
                type="tel"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                :disabled="isSaving"
              >
            </div>
          </div>
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Heimspieltag</label>
              <input
                v-model="formData.heimspieltag"
                type="text"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                :disabled="isSaving"
              >
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Spielsystem</label>
              <input
                v-model="formData.spielsystem"
                type="text"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                :disabled="isSaving"
              >
            </div>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Mannschaftsführer</label>
            <input
              v-model="formData.mannschaftsfuehrer"
              type="text"
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
              :disabled="isSaving"
            >
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Spieler</label>
            <div class="space-y-2">
              <div
                v-if="formData.spielerListe.length === 0"
                class="text-sm text-gray-500"
              >
                Noch keine Spieler eingetragen.
              </div>
              <div
                v-for="(spieler, index) in formData.spielerListe"
                :key="spieler.id"
                class="px-3 py-2 border border-gray-200 rounded-lg bg-white"
              >
                <div class="flex flex-col lg:flex-row lg:items-center gap-2">
                  <input
                    v-model="spieler.name"
                    type="text"
                    class="flex-1 min-w-[14rem] px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                    placeholder="Spielername"
                    :disabled="isSaving"
                  >
                  <div class="flex items-center gap-1">
                    <button
                      type="button"
                      class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                      title="Nach oben"
                      :disabled="isSaving || index === 0"
                      @click="moveSpielerUp(index)"
                    >
                      <ChevronUp :size="18" />
                    </button>
                    <button
                      type="button"
                      class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                      title="Nach unten"
                      :disabled="isSaving || index === formData.spielerListe.length - 1"
                      @click="moveSpielerDown(index)"
                    >
                      <ChevronDown :size="18" />
                    </button>
                    <button
                      type="button"
                      class="p-2 border border-red-300 text-red-700 rounded-lg hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed"
                      title="Spieler entfernen"
                      :disabled="isSaving"
                      @click="removeSpieler(spieler.id)"
                    >
                      <Trash2 :size="18" />
                    </button>
                  </div>
                  <div class="flex items-center gap-2">
                    <select
                      v-model="moveTargetBySpielerId[spieler.id]"
                      class="min-w-[14rem] px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed"
                      :disabled="isSaving || !isEditing || mannschaftenSelectOptions.length <= 1"
                      title="Mannschaft auswählen"
                    >
                      <option
                        v-for="t in mannschaftenSelectOptions"
                        :key="t"
                        :value="t"
                      >
                        {{ t }}
                      </option>
                    </select>
                    <button
                      type="button"
                      class="inline-flex items-center justify-center px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                      :disabled="isSaving || !isEditing || mannschaftenSelectOptions.length <= 1 || !canMoveSpieler(spieler.id)"
                      title="In ausgewählte Mannschaft verschieben"
                      @click="moveSpielerToMannschaft(spieler.id)"
                    >
                      <ArrowRight :size="18" />
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="mt-3 flex items-center justify-between">
              <button
                type="button"
                class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold rounded-lg transition-colors"
                :disabled="isSaving"
                @click="addSpieler()"
              >
                <Plus
                  :size="18"
                  class="mr-2"
                /> Spieler hinzufügen
              </button>
              <p class="text-xs text-gray-500">
                Reihenfolge per ↑/↓ ändern.
              </p>
            </div>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Weitere Informationen (Link)</label>
            <input
              v-model="formData.weitere_informationen_link"
              type="url"
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
              placeholder="https://..."
              :disabled="isSaving"
            >
          </div>
          <div
            v-if="errorMessage"
            class="flex items-center p-3 rounded-md bg-red-50 text-red-700 text-sm"
          >
            <AlertCircle
              :size="20"
              class="mr-2"
            /> {{ errorMessage }}
          </div>
          <div class="flex justify-end space-x-4 pt-4">
            <button
              type="button"
              class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
              :disabled="isSaving"
              @click="closeModal"
            >
              Abbrechen
            </button>
            <button
              type="submit"
              class="px-6 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors flex items-center"
              :disabled="isSaving"
            >
              <Loader2
                v-if="isSaving"
                :size="20"
                class="animate-spin mr-2"
              /><span>{{ isSaving ? 'Speichert...' : 'Speichern' }}</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { Plus, Trash2, Loader2, AlertCircle, Pencil, Users, ChevronUp, ChevronDown, ArrowRight } from 'lucide-vue-next'

const isLoading = ref(true)
const isSaving = ref(false)
const isCreatingSeason = ref(false)
const mannschaften = ref([])
const spielplanTeams = ref([])
const seasons = ref([])
const selectedSeason = ref('')
const showModal = ref(false)
const errorMessage = ref('')
const isEditing = ref(false)
const editingIndex = ref(-1)
const formData = ref({ mannschaft: '', spielplan_mannschaft_id: '', liga: '', staffelleiter: '', telefon: '', heimspieltag: '', spielsystem: '', mannschaftsfuehrer: '', spielerListe: [], weitere_informationen_link: '', letzte_aktualisierung: '' })
const moveTargetBySpielerId = ref({})
const initialMoveTargetBySpielerId = ref({})
const pendingSpielerNamesByTeamIndex = ref({})

function nowIsoDate() { return new Date().toISOString().split('T')[0] }
function newSpielerItem(name = '') { return { id: `${Date.now()}-${Math.random().toString(16).slice(2)}`, name } }
function parseSpielerString(s) { if (!s) return []; return String(s).split(';').map(x => x.trim()).filter(Boolean).map(name => newSpielerItem(name)) }
function serializeSpielerList(list) { return (list || []).map(s => (s?.name || '').trim()).filter(Boolean).join('; ') }
function serializeSpielerNames(names) { return (names || []).map(s => String(s || '').trim()).filter(Boolean).join('; ') }
const selectedSpielplanTeamIds = computed(() => String(formData.value.spielplan_mannschaft_id || '').split(',').map(id => id.trim()).filter(Boolean))
const updateSpielplanTeamIds = (event) => {
  formData.value.spielplan_mannschaft_id = Array.from(event.target.selectedOptions, option => option.value).join(',')
}

async function fetchCsvText(url) {
  const attempt = async () => { const r = await fetch(`${url}${url.includes('?') ? '&' : '?'}_t=${Date.now()}`, { cache: 'no-store' }); if (!r.ok) throw new Error(`HTTP ${r.status}`); return await r.text() }
  try { return await attempt() } catch { await new Promise(r => setTimeout(r, 150)); return await attempt() }
}

function getMannschaftenFilenameForSeason(seasonSlug = '') {
  const season = String(seasonSlug || '').trim()
  return season ? `mannschaften_${season}.csv` : 'mannschaften.csv'
}

function formatSeasonLabel(seasonSlug) {
  const match = String(seasonSlug || '').match(/^(\d{2})--(\d{2})$/)
  return match ? `20${match[1]}/${match[2]}` : String(seasonSlug || '')
}

function getNextSeasonSlug(seasonSlug) {
  const match = String(seasonSlug || '').match(/^(\d{2})--(\d{2})$/)
  if (!match) return ''
  const start = Number(match[1])
  const nextStart = (start + 1) % 100
  const nextEnd = (nextStart + 1) % 100
  return `${String(nextStart).padStart(2, '0')}--${String(nextEnd).padStart(2, '0')}`
}

async function loadSeasons() {
  try {
    const res = await fetch('/api/mannschaften/seasons')
    const result = await res.json()
    if (!result?.success || !Array.isArray(result.seasons) || result.seasons.length === 0) {
      seasons.value = [result?.currentSeason || '']
      selectedSeason.value = seasons.value[0] || ''
      return
    }

    seasons.value = result.seasons
    if (!selectedSeason.value || !seasons.value.includes(selectedSeason.value)) {
      selectedSeason.value = result.defaultSeason || seasons.value[0]
    }
  } catch {
    if (!seasons.value.length) seasons.value = ['']
    if (!selectedSeason.value) selectedSeason.value = seasons.value[0] || ''
  }
}

const mannschaftenSelectOptions = computed(() => {
  const current = (formData.value.mannschaft || '').trim()
  const names = mannschaften.value.map(m => (m?.mannschaft || '').trim()).filter(Boolean)
  return [...new Set([current, ...names])].filter(Boolean)
})

function resetSpielerDraftState() { moveTargetBySpielerId.value = {}; initialMoveTargetBySpielerId.value = {}; pendingSpielerNamesByTeamIndex.value = {} }
function getPendingSpielerNamesForTeamIndex(teamIndex) {
  if (pendingSpielerNamesByTeamIndex.value[teamIndex]) return pendingSpielerNamesByTeamIndex.value[teamIndex]
  const existing = mannschaften.value[teamIndex]; const list = existing ? getSpielerListe(existing) : []
  pendingSpielerNamesByTeamIndex.value[teamIndex] = [...list]; return pendingSpielerNamesByTeamIndex.value[teamIndex]
}

const loadMannschaften = async () => {
  isLoading.value = true
  try {
    const params = new URLSearchParams()
    if (selectedSeason.value) params.set('season', selectedSeason.value)
    const csv = await fetchCsvText(`/api/mannschaften${params.toString() ? `?${params.toString()}` : ''}`)
    const lines = csv.split('\n').filter(line => line.trim() !== '')
    if (lines.length < 2) { mannschaften.value = []; return }
    mannschaften.value = lines.slice(1).map(line => {
      const values = []; let current = ''; let inQuotes = false
      for (let i = 0; i < line.length; i++) { const char = line[i]; if (char === '"') { inQuotes = !inQuotes } else if (char === ',' && !inQuotes) { values.push(current.trim()); current = '' } else { current += char } }
      values.push(current.trim())
      if (values.length < 10) return null
      return { mannschaft: values[0]?.trim() || '', liga: values[1]?.trim() || '', staffelleiter: values[2]?.trim() || '', telefon: values[3]?.trim() || '', heimspieltag: values[4]?.trim() || '', spielsystem: values[5]?.trim() || '', mannschaftsfuehrer: values[6]?.trim() || '', spieler: values[7]?.trim() || '', weitere_informationen_link: values[8]?.trim() || '', letzte_aktualisierung: values[9]?.trim() || '', spielplan_mannschaft_id: values[10]?.trim() || '' }
    }).filter(m => m !== null && m.mannschaft !== '')
  } catch (error) { console.error('Fehler beim Laden:', error); errorMessage.value = 'Fehler beim Laden der Mannschaften'; throw error } finally { isLoading.value = false }
}

const loadSpielplanTeams = async () => {
  try {
    const response = await fetch('/api/spielplan', { cache: 'no-store' })
    const result = await response.json()
    if (!result.success || !Array.isArray(result.data)) return
    const teams = new Map()
    for (const row of result.data) {
      for (const side of ['Heim', 'Gast']) {
        const isHarheimer = String(row[`${side}VereinNr`] || '') === '43030' || String(row[`${side}VereinName`] || '') === 'Harheimer TC'
        const id = String(row[`${side}MannschaftId`] || '').trim()
        if (!isHarheimer || !id || teams.has(id)) continue
        const label = [row[`${side}Mannschaft`], row[`${side}MannschaftAltersklasse`], row.Liga || row.Staffel, row[`${side}MannschaftNr`] ? `Nr. ${row[`${side}MannschaftNr`]}` : ''].filter(Boolean).join(' · ')
        teams.set(id, { id, label: `${label} [${id}]` })
      }
    }
    spielplanTeams.value = [...teams.values()].sort((a, b) => a.label.localeCompare(b.label, 'de'))
  } catch (error) {
    console.error('Spielplan-Teams konnten nicht geladen werden:', error)
  }
}

const onSeasonChange = async () => {
  await loadMannschaften().catch(() => {})
}

const getSpielerListe = (m) => { if (!m.spieler) return []; return m.spieler.split(';').map(s => s.trim()).filter(s => s !== '') }
const openAddModal = () => { formData.value = { mannschaft: '', spielplan_mannschaft_id: '', liga: '', staffelleiter: '', telefon: '', heimspieltag: '', spielsystem: '', mannschaftsfuehrer: '', spielerListe: [], weitere_informationen_link: '', letzte_aktualisierung: nowIsoDate() }; showModal.value = true; errorMessage.value = ''; isEditing.value = false; editingIndex.value = -1; resetSpielerDraftState() }
const closeModal = () => { showModal.value = false; errorMessage.value = ''; isEditing.value = false; editingIndex.value = -1; resetSpielerDraftState() }
const openEditModal = (mannschaft, index) => {
  formData.value = { mannschaft: mannschaft.mannschaft || '', spielplan_mannschaft_id: mannschaft.spielplan_mannschaft_id || '', liga: mannschaft.liga || '', staffelleiter: mannschaft.staffelleiter || '', telefon: mannschaft.telefon || '', heimspieltag: mannschaft.heimspieltag || '', spielsystem: mannschaft.spielsystem || '', mannschaftsfuehrer: mannschaft.mannschaftsfuehrer || '', spielerListe: parseSpielerString(mannschaft.spieler || ''), weitere_informationen_link: mannschaft.weitere_informationen_link || '', letzte_aktualisierung: mannschaft.letzte_aktualisierung || nowIsoDate() }
  isEditing.value = true; editingIndex.value = index; showModal.value = true; errorMessage.value = ''; resetSpielerDraftState()
  const currentTeam = (formData.value.mannschaft || '').trim()
  for (const s of formData.value.spielerListe) {
    moveTargetBySpielerId.value[s.id] = currentTeam
    initialMoveTargetBySpielerId.value[s.id] = currentTeam
  }
}
const addSpieler = () => {
  const item = newSpielerItem('')
  const currentTeam = (formData.value.mannschaft || '').trim()
  formData.value.spielerListe.push(item)
  moveTargetBySpielerId.value[item.id] = currentTeam
  initialMoveTargetBySpielerId.value[item.id] = currentTeam
}
const removeSpieler = (id) => {
  const idx = formData.value.spielerListe.findIndex(s => s.id === id)
  if (idx === -1) return
  formData.value.spielerListe.splice(idx, 1)
  delete moveTargetBySpielerId.value[id]
  delete initialMoveTargetBySpielerId.value[id]
}
const moveSpielerUp = (index) => { if (index <= 0) return; const arr = formData.value.spielerListe; const item = arr[index]; arr.splice(index, 1); arr.splice(index - 1, 0, item) }
const moveSpielerDown = (index) => { const arr = formData.value.spielerListe; if (index < 0 || index >= arr.length - 1) return; const item = arr[index]; arr.splice(index, 1); arr.splice(index + 1, 0, item) }
const canMoveSpieler = (id) => {
  const target = (moveTargetBySpielerId.value[id] || '').trim()
  const initialTarget = (initialMoveTargetBySpielerId.value[id] || '').trim()
  return Boolean(target) && Boolean(initialTarget) && target !== initialTarget
}

const moveSpielerToMannschaft = (spielerId) => {
  if (!isEditing.value || editingIndex.value < 0) return false
  const targetName = (moveTargetBySpielerId.value[spielerId] || '').trim(); if (!targetName) return false
  const targetIndex = mannschaften.value.findIndex((m, idx) => { if (idx === editingIndex.value) return false; return (m?.mannschaft || '').trim() === targetName })
  if (targetIndex === -1) { errorMessage.value = 'Ziel-Mannschaft nicht gefunden.'; return false }
  const idx = formData.value.spielerListe.findIndex(s => s.id === spielerId); if (idx === -1) return false
  const spielerName = (formData.value.spielerListe[idx]?.name || '').trim(); if (!spielerName) { errorMessage.value = 'Bitte zuerst einen Spielernamen eintragen.'; return false }
  formData.value.spielerListe.splice(idx, 1)
  const pendingList = getPendingSpielerNamesForTeamIndex(targetIndex); pendingList.push(spielerName)
  delete moveTargetBySpielerId.value[spielerId]
  delete initialMoveTargetBySpielerId.value[spielerId]
  return true
}

const applySelectedSpielerTransfers = () => {
  if (!isEditing.value || editingIndex.value < 0) return true
  const pendingIds = formData.value.spielerListe
    .filter(spieler => canMoveSpieler(spieler.id))
    .map(spieler => spieler.id)

  return pendingIds.every(spielerId => moveSpielerToMannschaft(spielerId))
}

const saveMannschaft = async () => {
  isSaving.value = true; errorMessage.value = ''
  try {
    if (!applySelectedSpielerTransfers()) return
    const spielerString = serializeSpielerList(formData.value.spielerListe)
    const updated = { mannschaft: formData.value.mannschaft || '', spielplan_mannschaft_id: formData.value.spielplan_mannschaft_id || '', liga: formData.value.liga || '', staffelleiter: formData.value.staffelleiter || '', telefon: formData.value.telefon || '', heimspieltag: formData.value.heimspieltag || '', spielsystem: formData.value.spielsystem || '', mannschaftsfuehrer: formData.value.mannschaftsfuehrer || '', spieler: spielerString, weitere_informationen_link: formData.value.weitere_informationen_link || '', letzte_aktualisierung: formData.value.letzte_aktualisierung || nowIsoDate() }
    if (isEditing.value && editingIndex.value >= 0) { mannschaften.value[editingIndex.value] = { ...updated } } else { mannschaften.value.push({ ...updated }) }
    const touchedTeamIndexes = Object.keys(pendingSpielerNamesByTeamIndex.value)
    if (touchedTeamIndexes.length > 0) { const ts = nowIsoDate(); for (const idxStr of touchedTeamIndexes) { const idx = Number(idxStr); if (!Number.isFinite(idx)) continue; const existing = mannschaften.value[idx]; if (!existing) continue; mannschaften.value[idx] = { ...existing, spieler: serializeSpielerNames(pendingSpielerNamesByTeamIndex.value[idx]), letzte_aktualisierung: ts } } }
    await saveCSV(); closeModal(); await loadMannschaften()
    if (window.showSuccessModal) window.showSuccessModal('Erfolg', 'Mannschaft wurde erfolgreich gespeichert')
  } catch (error) { console.error('Fehler:', error); errorMessage.value = error?.data?.statusMessage || error?.statusMessage || error?.data?.message || 'Fehler beim Speichern.'; if (window.showErrorModal) window.showErrorModal('Fehler', errorMessage.value) } finally { isSaving.value = false }
}

const saveCSV = async () => {
  const header = 'Mannschaft,Liga,Staffelleiter,Telefon,Heimspieltag,Spielsystem,Mannschaftsführer,Spieler,Weitere Informationen Link,Letzte Aktualisierung,Spielplan Mannschaft ID'
  const rows = mannschaften.value.map(m => {
    const esc = (v) => { if (!v) return ''; const s = String(v); if (s.includes(',') || s.includes('"') || s.includes('\n')) return `"${s.replace(/"/g, '""')}"`; return s }
    return [esc(m.mannschaft), esc(m.liga), esc(m.staffelleiter), esc(m.telefon), esc(m.heimspieltag), esc(m.spielsystem), esc(m.mannschaftsfuehrer), esc(m.spieler), esc(m.weitere_informationen_link), esc(m.letzte_aktualisierung), esc(m.spielplan_mannschaft_id)].join(',')
  })
  await $fetch('/api/cms/save-csv', {
    method: 'POST',
    body: {
      filename: getMannschaftenFilenameForSeason(selectedSeason.value),
      content: [header, ...rows].join('\n')
    }
  })
  // Notify other parts of the app that mannschaften changed
  try {
    if (typeof window !== 'undefined') {
      window.dispatchEvent(new CustomEvent('mannschaften:changed'))
    }
  } catch (e) { /* no-op */ }
}

const moveMannschaft = async (index, delta) => {
  const to = index + delta
  if (index < 0 || to < 0 || to >= mannschaften.value.length) return
  isSaving.value = true
  try {
    const arr = mannschaften.value
    const item = arr[index]
    arr.splice(index, 1)
    arr.splice(to, 0, item)
    await saveCSV()
    await loadMannschaften().catch(() => {})
    if (window.showSuccessModal) window.showSuccessModal('Erfolg', 'Reihenfolge gespeichert')
  } catch (err) {
    console.error('Fehler beim Verschieben der Mannschaft:', err)
    if (window.showErrorModal) window.showErrorModal('Fehler', 'Reihenfolge konnte nicht gespeichert werden')
  } finally {
    isSaving.value = false
  }
}

const moveMannschaftUp = (index) => moveMannschaft(index, -1)
const moveMannschaftDown = (index) => moveMannschaft(index, 1)

const createNextSeason = async () => {
  const baseSeason = selectedSeason.value || seasons.value[0]
  const nextSeason = getNextSeasonSlug(baseSeason)
  if (!nextSeason) {
    errorMessage.value = 'Naechste Saison konnte nicht ermittelt werden.'
    return
  }

  if (seasons.value.includes(nextSeason)) {
    selectedSeason.value = nextSeason
    await loadMannschaften().catch(() => {})
    return
  }

  isCreatingSeason.value = true
  errorMessage.value = ''
  try {
    const header = 'Mannschaft,Liga,Staffelleiter,Telefon,Heimspieltag,Spielsystem,Mannschaftsführer,Spieler,Weitere Informationen Link,Letzte Aktualisierung,Spielplan Mannschaft ID'
    const rows = mannschaften.value.map(m => {
      const esc = (v) => { if (!v) return ''; const s = String(v); if (s.includes(',') || s.includes('"') || s.includes('\n')) return `"${s.replace(/"/g, '""')}"`; return s }
      return [esc(m.mannschaft), esc(m.liga), esc(m.staffelleiter), esc(m.telefon), esc(m.heimspieltag), esc(m.spielsystem), esc(m.mannschaftsfuehrer), esc(m.spieler), esc(m.weitere_informationen_link), esc(m.letzte_aktualisierung || nowIsoDate()), esc(m.spielplan_mannschaft_id)].join(',')
    })

    await $fetch('/api/cms/save-csv', {
      method: 'POST',
      body: {
        filename: getMannschaftenFilenameForSeason(nextSeason),
        content: [header, ...rows].join('\n')
      }
    })

    await loadSeasons()
    selectedSeason.value = nextSeason
    await loadMannschaften().catch(() => {})
    if (window.showSuccessModal) {
      window.showSuccessModal('Erfolg', `Neue Saison ${formatSeasonLabel(nextSeason)} wurde angelegt.`)
    }
  } catch (error) {
    console.error('Fehler beim Anlegen der Saison:', error)
    errorMessage.value = error?.data?.statusMessage || error?.statusMessage || 'Saison konnte nicht angelegt werden.'
    if (window.showErrorModal) window.showErrorModal('Fehler', errorMessage.value)
  } finally {
    isCreatingSeason.value = false
  }
}

const confirmDelete = (mannschaft, index) => {
  if (window.showConfirmModal) {
    window.showConfirmModal('Mannschaft löschen', `Möchten Sie die Mannschaft "${mannschaft.mannschaft}" wirklich löschen?`, async () => {
      try { mannschaften.value.splice(index, 1); await saveCSV(); await loadMannschaften(); window.showSuccessModal('Erfolg', 'Mannschaft wurde erfolgreich gelöscht') } catch (error) { console.error('Fehler:', error); window.showErrorModal('Fehler', 'Fehler beim Löschen der Mannschaft') }
    })
  } else { if (confirm(`Mannschaft "${mannschaft.mannschaft}" wirklich löschen?`)) { mannschaften.value.splice(index, 1); saveCSV(); loadMannschaften() } }
}

onMounted(async () => {
  await loadSeasons()
  await Promise.all([loadMannschaften().catch(() => {}), loadSpielplanTeams()])
})

// Expose load function to parent components
try { defineExpose({ loadMannschaften }) } catch (e) { /* noop if not supported in SSR context */ }

// Reload when tab/window becomes visible or window gains focus
const handleVisibilityOrFocus = () => {
  try {
    if (document.visibilityState === 'visible') {
      loadMannschaften().catch(() => {})
    }
  } catch (e) {
    // ignore
  }
}

if (typeof window !== 'undefined') {
  window.addEventListener('visibilitychange', handleVisibilityOrFocus)
  window.addEventListener('focus', handleVisibilityOrFocus)
}

onUnmounted(() => {
  if (typeof window !== 'undefined') {
    window.removeEventListener('visibilitychange', handleVisibilityOrFocus)
    window.removeEventListener('focus', handleVisibilityOrFocus)
  }
})
</script>
