<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">Spielpläne bearbeiten</h1>
          <div class="space-x-3">
            <button @click="showUploadModal = true" class="inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg bg-green-600 text-white hover:bg-green-700 text-sm sm:text-base">
              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
              </svg>
              CSV hochladen
            </button>
            <button @click="save" 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">Speichern</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Content with top padding -->
    <div class="pt-20 pb-16">
      <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- PDF Upload Section -->
        <div class="mb-8 bg-white rounded-xl shadow-lg p-6">
          <h2 class="text-xl font-semibold text-gray-900 mb-4">Spielplan PDF-Dateien</h2>
          <p class="text-sm text-gray-600 mb-6">Laden Sie die PDF-Dateien für die verschiedenen Spielpläne hoch:</p>
          
          <div class="grid gap-6 md:grid-cols-3">
            <!-- Gesamt PDF -->
            <div class="border border-gray-200 rounded-lg p-4">
              <h3 class="font-medium text-gray-900 mb-2">Gesamt</h3>
              <p class="text-sm text-gray-600 mb-3">Alle Mannschaften</p>
              <input 
                ref="gesamtPdfInput"
                type="file" 
                accept=".pdf"
                @change="handlePdfUpload('gesamt', $event)"
                class="hidden"
              />
              <button @click="triggerPdfInput('gesamt')" class="w-full px-3 py-2 text-sm bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg transition-colors">
                PDF hochladen
              </button>
              <div v-if="uploadedPdfs.gesamt" class="mt-2 text-xs text-green-600">
                ✓ {{ uploadedPdfs.gesamt }}
              </div>
            </div>

            <!-- Erwachsene PDF -->
            <div class="border border-gray-200 rounded-lg p-4">
              <h3 class="font-medium text-gray-900 mb-2">Erwachsene</h3>
              <p class="text-sm text-gray-600 mb-3">Erwachsenen-Mannschaften</p>
              <input 
                ref="erwachsenePdfInput"
                type="file" 
                accept=".pdf"
                @change="handlePdfUpload('erwachsene', $event)"
                class="hidden"
              />
              <button @click="triggerPdfInput('erwachsene')" class="w-full px-3 py-2 text-sm bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg transition-colors">
                PDF hochladen
              </button>
              <div v-if="uploadedPdfs.erwachsene" class="mt-2 text-xs text-green-600">
                ✓ {{ uploadedPdfs.erwachsene }}
              </div>
            </div>

            <!-- Nachwuchs PDF -->
            <div class="border border-gray-200 rounded-lg p-4">
              <h3 class="font-medium text-gray-900 mb-2">Nachwuchs</h3>
              <p class="text-sm text-gray-600 mb-3">Nachwuchs-Mannschaften</p>
              <input 
                ref="nachwuchsPdfInput"
                type="file" 
                accept=".pdf"
                @change="handlePdfUpload('nachwuchs', $event)"
                class="hidden"
              />
              <button @click="triggerPdfInput('nachwuchs')" class="w-full px-3 py-2 text-sm bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg transition-colors">
                PDF hochladen
              </button>
              <div v-if="uploadedPdfs.nachwuchs" class="mt-2 text-xs text-green-600">
                ✓ {{ uploadedPdfs.nachwuchs }}
              </div>
            </div>
          </div>
        </div>

        <!-- CSV Upload Section -->
        <div class="mb-8 bg-white rounded-xl shadow-lg p-6">
          <h2 class="text-xl font-semibold text-gray-900 mb-4">Vereins-Spielplan (CSV)</h2>
          
          <!-- Current File Info -->
          <div v-if="currentFile" class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg">
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <svg class="w-5 h-5 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <div>
                  <p class="text-sm font-medium text-green-800">{{ currentFile.name }}</p>
                  <p class="text-xs text-green-600">{{ currentFile.size }} bytes, {{ currentFile.lastModified ? new Date(currentFile.lastModified).toLocaleDateString('de-DE') : 'Unbekannt' }}</p>
                </div>
              </div>
              <button @click="removeFile" class="px-3 py-1 text-sm bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors">
                Entfernen
              </button>
            </div>
          </div>
          
          <!-- Upload Area -->
          <div 
            @click="triggerFileInput"
            @dragover.prevent
            @dragenter.prevent
            @drop.prevent="handleFileDrop"
            class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary-400 hover:bg-primary-50 transition-colors cursor-pointer"
            :class="{ 'border-primary-400 bg-primary-50': isDragOver }"
          >
            <svg class="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
            </svg>
            <p class="text-lg font-medium text-gray-900 mb-2">CSV-Datei hochladen</p>
            <p class="text-sm text-gray-600 mb-4">Klicken Sie hier oder ziehen Sie eine CSV-Datei hierher</p>
            <p class="text-xs text-gray-500">Unterstützte Formate: .csv</p>
          </div>
          
          <input 
            ref="fileInput"
            type="file" 
            accept=".csv"
            @change="handleFileSelect"
            class="hidden"
          />
        </div>

        <!-- Column Selection -->
        <div v-if="csvData.length > 0 && !columnsSelected" class="bg-white rounded-xl shadow-lg p-6 mb-8">
          <h2 class="text-xl font-semibold text-gray-900 mb-4">Spalten auswählen</h2>
          <p class="text-sm text-gray-600 mb-6">Wählen Sie die Spalten aus, die für den Spielplan gespeichert werden sollen:</p>
          
          <div class="space-y-4">
            <div v-for="(header, index) in csvHeaders" :key="index" 
                 class="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
              <div class="flex items-center">
                <input
                  :id="`column-${index}`"
                  v-model="selectedColumns[index]"
                  type="checkbox"
                  class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
                />
                <label :for="`column-${index}`" class="ml-3 text-sm font-medium text-gray-900">
                  {{ header }}
                </label>
              </div>
              <div class="text-xs text-gray-500">
                {{ getColumnPreview(index) }}
              </div>
            </div>
          </div>
          
          <div class="mt-6 flex justify-between items-center">
            <div class="text-sm text-gray-600">
              {{ selectedColumnsCount }} von {{ csvHeaders.length }} Spalten ausgewählt
            </div>
            <div class="space-x-3">
              <button @click="selectAllColumns" class="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors">
                Alle auswählen
              </button>
              <button @click="deselectAllColumns" class="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors">
                Alle abwählen
              </button>
              <button @click="confirmColumnSelection" 
                      :disabled="selectedColumnsCount === 0"
                      class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:bg-gray-400">
                Auswahl bestätigen
              </button>
            </div>
          </div>
        </div>

        <!-- Data Preview -->
        <div v-if="csvData.length > 0 && columnsSelected" class="bg-white rounded-xl shadow-lg p-6">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-semibold text-gray-900">Datenvorschau</h2>
            <div class="flex space-x-2">
              <button @click="exportCSV" class="px-3 py-1 text-sm bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg transition-colors">
                CSV exportieren
              </button>
              <button @click="clearData" class="px-3 py-1 text-sm bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors">
                Daten löschen
              </button>
            </div>
          </div>
          
          <!-- Data Table -->
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th v-for="(header, index) in (columnsSelected ? filteredCsvHeaders : csvHeaders)" :key="index" 
                      class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    {{ header }}
                  </th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="(row, rowIndex) in (columnsSelected ? filteredCsvData : csvData).slice(0, 10)" :key="rowIndex" 
                    :class="rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'">
                  <td v-for="(cell, cellIndex) in row" :key="cellIndex" 
                      class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                    {{ cell }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <div v-if="(columnsSelected ? filteredCsvData : csvData).length > 10" class="mt-4 text-center text-sm text-gray-600">
            Zeige erste 10 von {{ (columnsSelected ? filteredCsvData : csvData).length }} Zeilen
          </div>
          
          <div class="mt-4 text-sm text-gray-600">
            <p><strong>Zeilen:</strong> {{ (columnsSelected ? filteredCsvData : csvData).length }}</p>
            <p><strong>Spalten:</strong> {{ (columnsSelected ? filteredCsvHeaders : csvHeaders).length }}</p>
          </div>
        </div>

        <!-- Empty State -->
        <div v-else class="text-center py-12 bg-white rounded-xl shadow-lg">
          <svg class="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
          </svg>
          <p class="text-gray-600">Keine CSV-Daten geladen.</p>
          <p class="text-sm text-gray-500 mt-2">Laden Sie eine CSV-Datei hoch, um Spielplandaten zu verwalten.</p>
        </div>
      </div>
    </div>

    <!-- Upload Modal -->
    <div
      v-if="showUploadModal"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
      @click.self="closeUploadModal"
    >
      <div class="bg-white rounded-lg max-w-md w-full p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">CSV-Datei hochladen</h3>
        
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Datei auswählen</label>
            <input
              ref="modalFileInput"
              type="file"
              accept=".csv"
              @change="handleModalFileSelect"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
            />
          </div>
          
          <div v-if="selectedFile" class="p-3 bg-gray-50 rounded-lg">
            <p class="text-sm text-gray-700"><strong>Ausgewählte Datei:</strong> {{ selectedFile.name }}</p>
            <p class="text-xs text-gray-500">{{ selectedFile.size }} bytes</p>
          </div>
          
          <div class="bg-blue-50 p-4 rounded-lg">
            <h4 class="text-sm font-medium text-blue-800 mb-2">Erwartetes CSV-Format:</h4>
            <div class="text-xs text-blue-700 space-y-1">
              <p>• Erste Zeile: Spaltenüberschriften</p>
              <p>• Spalten: Datum, Mannschaft, Gegner, Ort, Uhrzeit, etc.</p>
              <p>• Trennzeichen: Komma (,)</p>
              <p>• Text in Anführungszeichen bei Sonderzeichen</p>
            </div>
          </div>
        </div>
        
        <div class="flex justify-end space-x-3 pt-4">
          <button
            @click="closeUploadModal"
            class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
          >
            Abbrechen
          </button>
          <button
            @click="processSelectedFile"
            :disabled="!selectedFile"
            class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:bg-gray-400"
          >
            Hochladen
          </button>
        </div>
      </div>
    </div>

    <!-- Processing Modal -->
    <div
      v-if="isProcessing"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
    >
      <div class="bg-white rounded-lg max-w-sm w-full p-6 text-center">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"></div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Verarbeitung läuft...</h3>
        <p class="text-sm text-gray-600">{{ processingMessage }}</p>
      </div>
    </div>
  </div>
</template>

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

definePageMeta({
  middleware: 'auth',
})

useHead({ title: 'CMS: Spielpläne' })

const fileInput = ref(null)
const modalFileInput = ref(null)
const gesamtPdfInput = ref(null)
const erwachsenePdfInput = ref(null)
const nachwuchsPdfInput = ref(null)
const showUploadModal = ref(false)
const isProcessing = ref(false)
const processingMessage = ref('')
const isDragOver = ref(false)

const currentFile = ref(null)
const selectedFile = ref(null)
const csvData = ref([])
const csvHeaders = ref([])
const selectedColumns = ref([])
const columnsSelected = ref(false)
const filteredCsvData = ref([])
const filteredCsvHeaders = ref([])
const uploadedPdfs = ref({
  gesamt: null,
  erwachsene: null,
  nachwuchs: null
})

const triggerFileInput = () => {
  fileInput.value?.click()
}

const triggerPdfInput = (type) => {
  if (type === 'gesamt') {
    gesamtPdfInput.value?.click()
  } else if (type === 'erwachsene') {
    erwachsenePdfInput.value?.click()
  } else if (type === 'nachwuchs') {
    nachwuchsPdfInput.value?.click()
  }
}

const handlePdfUpload = async (type, event) => {
  const file = event.target.files[0]
  if (!file) return
  
  if (file.type !== 'application/pdf') {
    alert('Bitte wählen Sie eine PDF-Datei aus.')
    return
  }
  
  try {
    const formData = new FormData()
    formData.append('pdf', file)
    formData.append('type', type)
    
    const response = await fetch('/api/cms/upload-spielplan-pdf', {
      method: 'POST',
      body: formData
    })
    
    if (response.ok) {
      uploadedPdfs.value[type] = file.name
      alert(`PDF für ${type} erfolgreich hochgeladen!`)
    } else {
      alert('Fehler beim Hochladen der PDF-Datei!')
    }
  } catch (error) {
    console.error('Fehler beim PDF-Upload:', error)
    alert('Fehler beim Hochladen der PDF-Datei!')
  }
}

const handleFileSelect = (event) => {
  const file = event.target.files[0]
  if (file) {
    processFile(file)
  }
}

const handleModalFileSelect = (event) => {
  selectedFile.value = event.target.files[0]
}

const handleFileDrop = (event) => {
  isDragOver.value = false
  const file = event.dataTransfer.files[0]
  if (file && file.type === 'text/csv') {
    processFile(file)
  }
}

const processFile = async (file) => {
  isProcessing.value = true
  processingMessage.value = 'Datei wird gelesen...'
  
  try {
    const text = await file.text()
    processingMessage.value = 'CSV wird geparst...'
    
    const lines = text.split('\n').filter(line => line.trim() !== '')
    if (lines.length < 2) {
      throw new Error('CSV-Datei muss mindestens eine Kopfzeile und eine Datenzeile enthalten')
    }
    
    // CSV-Parser: Semikolon-getrennt, ohne Anführungszeichen
    const parseCSVLine = (line) => {
      return line.split(';').map(value => value.trim())
    }
    
    // Header-Zeile parsen
    csvHeaders.value = parseCSVLine(lines[0])
    
    // Datenzeilen parsen
    csvData.value = lines.slice(1).map(line => parseCSVLine(line))
    
    // Spaltenauswahl initialisieren (alle ausgewählt)
    selectedColumns.value = new Array(csvHeaders.value.length).fill(true)
    columnsSelected.value = false
    
    // Datei-Info speichern
    currentFile.value = {
      name: file.name,
      size: file.size,
      lastModified: file.lastModified
    }
    
    processingMessage.value = 'Verarbeitung abgeschlossen!'
    
    setTimeout(() => {
      isProcessing.value = false
      showUploadModal.value = false
    }, 1000)
    
  } catch (error) {
    console.error('Fehler beim Verarbeiten der CSV-Datei:', error)
    alert('Fehler beim Verarbeiten der CSV-Datei: ' + error.message)
    isProcessing.value = false
  }
}

const processSelectedFile = () => {
  if (selectedFile.value) {
    processFile(selectedFile.value)
  }
}

const removeFile = () => {
  currentFile.value = null
  csvData.value = []
  csvHeaders.value = []
  selectedColumns.value = []
  columnsSelected.value = false
  filteredCsvData.value = []
  filteredCsvHeaders.value = []
  if (fileInput.value) {
    fileInput.value.value = ''
  }
}

// Computed properties for column selection
const selectedColumnsCount = computed(() => {
  return selectedColumns.value.filter(selected => selected).length
})

const getColumnPreview = (index) => {
  if (csvData.value.length === 0) return 'Keine Daten'
  const sampleValues = csvData.value.slice(0, 3).map(row => row[index]).filter(val => val && val.trim() !== '')
  return sampleValues.length > 0 ? `Beispiel: ${sampleValues.join(', ')}` : 'Leere Spalte'
}

const selectAllColumns = () => {
  selectedColumns.value = selectedColumns.value.map(() => true)
}

const deselectAllColumns = () => {
  selectedColumns.value = selectedColumns.value.map(() => false)
}

const confirmColumnSelection = () => {
  // Filtere Daten basierend auf ausgewählten Spalten
  const selectedIndices = selectedColumns.value.map((selected, index) => selected ? index : -1).filter(index => index !== -1)
  
  filteredCsvHeaders.value = selectedIndices.map(index => csvHeaders.value[index])
  filteredCsvData.value = csvData.value.map(row => selectedIndices.map(index => row[index]))
  
  columnsSelected.value = true
}

const clearData = () => {
  if (confirm('Möchten Sie alle Daten wirklich löschen?')) {
    removeFile()
  }
}

const exportCSV = () => {
  const dataToExport = columnsSelected.value ? filteredCsvData.value : csvData.value
  const headersToExport = columnsSelected.value ? filteredCsvHeaders.value : csvHeaders.value
  
  if (dataToExport.length === 0) return
  
  // CSV generieren (Semikolon-getrennt, ohne Anführungszeichen)
  const csvContent = [
    headersToExport.join(';'),
    ...dataToExport.map(row => row.join(';'))
  ].join('\n')
  
  // Download
  const blob = new Blob([csvContent], { type: 'text/csv' })
  const url = window.URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `spielplan_export_${new Date().toISOString().split('T')[0]}.csv`
  document.body.appendChild(a)
  a.click()
  window.URL.revokeObjectURL(url)
  document.body.removeChild(a)
}

const save = async () => {
  const dataToSave = columnsSelected.value ? filteredCsvData.value : csvData.value
  const headersToSave = columnsSelected.value ? filteredCsvHeaders.value : csvHeaders.value
  
  if (dataToSave.length === 0) {
    alert('Keine Daten zum Speichern vorhanden.')
    return
  }
  
  try {
    // CSV generieren (Semikolon-getrennt, ohne Anführungszeichen)
    const csvContent = [
      headersToSave.join(';'),
      ...dataToSave.map(row => row.join(';'))
    ].join('\n')
    
    // CSV speichern
    const response = await fetch('/api/cms/save-csv', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        filename: 'spielplan.csv',
        content: csvContent
      })
    })
    
    if (response.ok) {
      alert('Spielplan erfolgreich gespeichert!')
    } else {
      alert('Fehler beim Speichern des Spielplans!')
    }
  } catch (error) {
    console.error('Fehler beim Speichern:', error)
    alert('Fehler beim Speichern des Spielplans!')
  }
}

const closeUploadModal = () => {
  showUploadModal.value = false
  selectedFile.value = null
  if (modalFileInput.value) {
    modalFileInput.value.value = ''
  }
}

// Drag and Drop Events
const handleDragEnter = () => {
  isDragOver.value = true
}

const handleDragLeave = () => {
  isDragOver.value = false
}

onMounted(() => {
  // Load existing data if available
  loadExistingData()
})

const loadExistingData = async () => {
  try {
    const response = await fetch('/data/spielplan.csv')
    if (response.ok) {
      const text = await response.text()
      const lines = text.split('\n').filter(line => line.trim() !== '')
      
      if (lines.length >= 2) {
        // Parse existing CSV
        const parseCSVLine = (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())
          
          return values
        }
        
        csvHeaders.value = parseCSVLine(lines[0])
        csvData.value = lines.slice(1).map(line => parseCSVLine(line))
        
        currentFile.value = {
          name: 'spielplan.csv',
          size: text.length,
          lastModified: null
        }
      }
    }
  } catch (error) {
    console.log('Keine bestehende Spielplan-Datei gefunden')
  }
}
</script>
