<template>
  <div class="min-h-full bg-gray-50">
    <!-- Fixed Header below navigation -->
    <div class="fixed top-20 left-0 right-0 z-40 bg-white border-b border-gray-200 shadow-sm">
      <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
        <div class="flex items-center justify-between">
          <h1 class="text-xl sm:text-3xl font-display font-bold text-gray-900">
            Geschichte bearbeiten
          </h1>
          <div class="space-x-3">
            <button
              class="inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 text-sm sm:text-base"
              @click="save"
            >
              Speichern
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Fixed Toolbar below header -->
    <div
      class="fixed left-0 right-0 z-30 bg-white border-b border-gray-200 shadow-sm"
      style="top: 9.5rem;"
    >
      <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-wrap items-center gap-1 sm:gap-2 py-1.5 sm:py-2">
          <!-- Formatierung -->
          <div class="flex items-center gap-1 border-r pr-2 mr-2">
            <button
              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
              @click="format('bold')"
            >
              <strong>B</strong>
            </button>
            <button
              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
              @click="format('italic')"
            >
              <em>I</em>
            </button>
            <button
              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
              @click="formatHeader(1)"
            >
              H1
            </button>
            <button
              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
              @click="formatHeader(2)"
            >
              H2
            </button>
            <button
              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
              @click="formatHeader(3)"
            >
              H3
            </button>
          </div>
          
          <!-- Listen -->
          <div class="flex items-center gap-1 border-r pr-2 mr-2">
            <button
              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
              @click="format('insertUnorderedList')"
            >
              •
            </button>
            <button
              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
              @click="format('insertOrderedList')"
            >
              1.
            </button>
          </div>
          
          <!-- Schnellzugriff für Geschichts-Abschnitte -->
          <div class="flex items-center gap-1 border-r pr-2 mr-2">
            <button
              class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs sm:text-sm"
              @click="insertHistoryTemplate('generic')"
            >
              Neuer Abschnitt
            </button>
            <button
              class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-blue-100 hover:bg-blue-200 text-blue-700 text-xs sm:text-sm"
              @click="insertHistoryTemplate('founding')"
            >
              Gründung
            </button>
            <button
              class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-green-100 hover:bg-green-200 text-green-700 text-xs sm:text-sm"
              @click="insertHistoryTemplate('milestone')"
            >
              Meilenstein
            </button>
            <button
              class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-yellow-100 hover:bg-yellow-200 text-yellow-700 text-xs sm:text-sm"
              @click="insertHistoryTemplate('achievement')"
            >
              Erfolg
            </button>
            <button
              class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-red-100 hover:bg-red-200 text-red-700 text-xs sm:text-sm"
              @click="deleteCurrentSection()"
            >
              Abschnitt löschen
            </button>
          </div>
          
          <!-- Weitere Tools -->
          <div class="flex items-center gap-1">
            <button
              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
              @click="createLink()"
            >
              Link
            </button>
            <button
              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
              @click="removeFormat()"
            >
              Clear
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Content with top padding -->
    <div class="pt-36 sm:pt-44 pb-16">
      <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4">
          <div
            ref="editor"
            class="min-h-[320px] p-3 sm:p-4 outline-none prose max-w-none text-sm sm:text-base"
            contenteditable
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

definePageMeta({
  middleware: 'auth',
})

useHead({ title: 'CMS: Geschichte' })

const editor = ref(null)
const initialHtml = ref('')

async function load() {
  const data = await $fetch('/api/config')
  initialHtml.value = data?.seiten?.geschichte || ''
  if (editor.value) editor.value.innerHTML = initialHtml.value
}

async function save() {
  const html = editor.value?.innerHTML || ''
  const current = await $fetch('/api/config')
  const updated = { ...current, seiten: { ...(current.seiten || {}), geschichte: html } }
  try {
    await $fetch('/api/config', { method: 'PUT', body: updated })
    try { window.showSuccessModal && window.showSuccessModal('Erfolg', 'Inhalt erfolgreich gespeichert!') } catch (_e) {
      // Modal nicht verfügbar, ignorieren
    }
  } catch (error) {
    try { window.showErrorModal && window.showErrorModal('Fehler', error?.data?.message || 'Speichern fehlgeschlagen') } catch (_e) {
      // Modal nicht verfügbar, ignorieren
    }
  }
}

function format(cmd) {
  document.execCommand(cmd, false, null)
}

function formatHeader(level) {
  document.execCommand('formatBlock', false, 'H' + level)
}

function createLink() {
  const url = prompt('URL eingeben:')
  if (!url) return
  document.execCommand('createLink', false, url)
}

function removeFormat() {
  document.execCommand('removeFormat', false, null)
}

function insertHistoryTemplate(type) {
  const editorElement = editor.value
  if (!editorElement) return
  
  let template = ''
  
  switch (type) {
    case 'generic':
      template = `
        <div class="bg-gray-50/30 p-6 rounded-xl shadow-lg border-l-4 border-primary-600">
          <h3 class="text-xl font-display font-bold text-gray-900 mb-3">Neuer Geschichts-Abschnitt</h3>
          <p class="text-gray-600 mb-3"><strong>Zeitraum:</strong> [Jahr oder Zeitraum]<br><strong>Ereignis:</strong> [Was ist passiert?]<br><strong>Bedeutung:</strong> [Warum war das wichtig?]</p>
          <p class="text-gray-600"><strong>Details:</strong> [Weitere Informationen hier eingeben...]</p>
        </div>
      `
      break
    case 'founding':
      template = `
        <div class="bg-blue-50/30 p-6 rounded-xl shadow-lg border-l-4 border-primary-600">
          <h3 class="text-xl font-display font-bold text-gray-900 mb-3">Gründung des Vereins</h3>
          <p class="text-gray-600 mb-3"><strong>Datum:</strong> [Gründungsdatum]<br><strong>Gründer:</strong> [Wer hat den Verein gegründet?]<br><strong>Zweck:</strong> [Was war das Ziel?]</p>
          <p class="text-gray-600"><strong>Gründungsgeschichte:</strong> [Wie kam es zur Gründung? Was waren die Umstände?]</p>
        </div>
      `
      break
    case 'milestone':
      template = `
        <div class="bg-green-50/30 p-6 rounded-xl shadow-lg border-l-4 border-primary-600">
          <h3 class="text-xl font-display font-bold text-gray-900 mb-3">Wichtiger Meilenstein</h3>
          <p class="text-gray-600 mb-3"><strong>Jahr:</strong> [Wann ist das passiert?]<br><strong>Ereignis:</strong> [Was war der Meilenstein?]<br><strong>Auswirkung:</strong> [Wie hat das den Verein verändert?]</p>
          <p class="text-gray-600"><strong>Hintergrund:</strong> [Was führte zu diesem Ereignis? Wie wurde es erreicht?]</p>
        </div>
      `
      break
    case 'achievement':
      template = `
        <div class="bg-yellow-50/30 p-6 rounded-xl shadow-lg border-l-4 border-primary-600">
          <h3 class="text-xl font-display font-bold text-gray-900 mb-3">Großer Erfolg</h3>
          <p class="text-gray-600 mb-3"><strong>Jahr:</strong> [Wann war der Erfolg?]<br><strong>Erfolg:</strong> [Was wurde erreicht?]<br><strong>Beteiligte:</strong> [Wer war daran beteiligt?]</p>
          <p class="text-gray-600"><strong>Details:</strong> [Wie wurde der Erfolg erreicht? Was war besonders bemerkenswert?]</p>
        </div>
      `
      break
  }
  
  // Editor fokussieren
  editorElement.focus()
  
  const selection = window.getSelection()
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0)
    
    // Prüfen ob der Cursor im Editor ist
    if (editorElement.contains(range.commonAncestorContainer) || editorElement === range.commonAncestorContainer) {
      // Aktuelles Element finden
      let currentElement = range.commonAncestorContainer
      
      // Falls es ein Text-Node ist, zum Parent-Element gehen
      if (currentElement.nodeType === Node.TEXT_NODE) {
        currentElement = currentElement.parentElement
      }
      
      // Zum Geschichts-Abschnitt navigieren (div mit border-l-4 border-primary-600)
      let sectionElement = currentElement
      while (sectionElement && sectionElement !== editorElement) {
        if (sectionElement.classList && 
            sectionElement.classList.contains('border-l-4') && 
            sectionElement.classList.contains('border-primary-600')) {
          break
        }
        sectionElement = sectionElement.parentElement
      }
      
      if (sectionElement && sectionElement !== editorElement && 
          sectionElement.classList.contains('border-l-4') && 
          sectionElement.classList.contains('border-primary-600')) {
        
        // Wir sind in einem Geschichts-Abschnitt - neuen Abschnitt danach einfügen
        const tempDiv = document.createElement('div')
        tempDiv.innerHTML = template
        
        // Suche nach dem ersten Element-Node (nicht Text-Node)
        let newSection = null
        for (let i = 0; i < tempDiv.childNodes.length; i++) {
          if (tempDiv.childNodes[i].nodeType === Node.ELEMENT_NODE) {
            newSection = tempDiv.childNodes[i]
            break
          }
        }
        
        if (newSection) {
          // Nach dem aktuellen Abschnitt einfügen
          if (sectionElement.nextSibling) {
            sectionElement.parentElement.insertBefore(newSection, sectionElement.nextSibling)
          } else {
            sectionElement.parentElement.appendChild(newSection)
          }
          
          // Cursor in das neue Element setzen
          const newRange = document.createRange()
          const titleElement = newSection.querySelector('h3')
          if (titleElement) {
            newRange.setStart(titleElement, 0)
            newRange.collapse(true)
            selection.removeAllRanges()
            selection.addRange(newRange)
          }
        } else {
          console.error('No valid element found in template');
        }
      } else {
        // Kein Geschichts-Abschnitt gefunden - suche nach dem nächsten Geschichts-Abschnitt
        let nextSection = null
        let walker = document.createTreeWalker(
          editorElement,
          NodeFilter.SHOW_ELEMENT,
          {
            acceptNode: function(node) {
              if (node.classList && 
                  node.classList.contains('border-l-4') && 
                  node.classList.contains('border-primary-600')) {
                return NodeFilter.FILTER_ACCEPT
              }
              return NodeFilter.FILTER_SKIP
            }
          }
        )
        
        // Finde den ersten Geschichts-Abschnitt nach dem aktuellen Element
        let node = walker.nextNode()
        while (node) {
          if (currentElement.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) {
            nextSection = node
            break
          }
          node = walker.nextNode()
        }
        
        const tempDiv = document.createElement('div')
        tempDiv.innerHTML = template
        
        // Suche nach dem ersten Element-Node (nicht Text-Node)
        let newSection = null
        for (let i = 0; i < tempDiv.childNodes.length; i++) {
          if (tempDiv.childNodes[i].nodeType === Node.ELEMENT_NODE) {
            newSection = tempDiv.childNodes[i]
            break
          }
        }
        
        if (newSection) {
          if (nextSection) {
            // Vor dem nächsten Geschichts-Abschnitt einfügen
            nextSection.parentElement.insertBefore(newSection, nextSection)
          } else {
            // Kein nächster Abschnitt gefunden - am Ende einfügen
            editorElement.appendChild(newSection)
          }
          
          // Cursor in das neue Element setzen
          const newRange = document.createRange()
          const titleElement = newSection.querySelector('h3')
          if (titleElement) {
            newRange.setStart(titleElement, 0)
            newRange.collapse(true)
            selection.removeAllRanges()
            selection.addRange(newRange)
          }
        } else {
          console.error('No valid element found in template');
        }
      }
    } else {
      // Cursor ist nicht im Editor - Template am Ende einfügen
      editorElement.innerHTML += template
    }
  } else {
    // Keine Auswahl - Template am Ende einfügen
    editorElement.innerHTML += template
  }
}

function deleteCurrentSection() {
  const editorElement = editor.value
  if (!editorElement) return
  
  // Editor fokussieren
  editorElement.focus()
  
  const selection = window.getSelection()
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0)
    
    // Prüfen ob der Cursor im Editor ist
    if (editorElement.contains(range.commonAncestorContainer) || editorElement === range.commonAncestorContainer) {
      // Aktuelles Element finden
      let currentElement = range.commonAncestorContainer
      
      // Falls es ein Text-Node ist, zum Parent-Element gehen
      if (currentElement.nodeType === Node.TEXT_NODE) {
        currentElement = currentElement.parentElement
      }
      
      // Zum Geschichts-Abschnitt navigieren (div mit border-l-4 border-primary-600)
      let sectionElement = currentElement
      while (sectionElement && !(sectionElement.classList.contains('border-l-4') && sectionElement.classList.contains('border-primary-600'))) {
        sectionElement = sectionElement.parentElement
      }
      
      if (sectionElement && sectionElement.classList.contains('border-l-4') && sectionElement.classList.contains('border-primary-600')) {
        // Geschichts-Abschnitt gefunden - löschen
        sectionElement.remove()
        
        // Cursor in das nächste Element setzen
        const nextElement = editorElement.querySelector('.border-l-4.border-primary-600')
        if (nextElement) {
          const titleElement = nextElement.querySelector('h3')
          if (titleElement) {
            const newRange = document.createRange()
            newRange.setStart(titleElement, 0)
            newRange.collapse(true)
            selection.removeAllRanges()
            selection.addRange(newRange)
          }
        }
      }
    }
  }
}

onMounted(load)
</script>
