<template>
  <div class="min-h-full py-16 bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
      <h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6">
        Mitgliedschaft
      </h1>
      <div class="w-24 h-1 bg-primary-600 mb-8" />
      
      <!-- Mitgliedschaftspläne (ohne "Noch Fragen" Box) -->
      <div class="mb-12">
        <MembershipNoQuestions />
      </div>

      <!-- Aufnahmeantrag Formular -->
      <div class="bg-white rounded-xl shadow-lg p-8">
        <h2 class="text-3xl font-display font-bold text-gray-900 mb-6">
          Beitrittserklärung
        </h2>
        
        <form @submit.prevent="submitForm" class="space-y-8">
          <!-- Persönliche Daten -->
          <div class="space-y-6">
            <h3 class="text-xl font-semibold text-gray-900 border-b border-gray-200 pb-2">
              Persönliche Daten
            </h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label for="nachname" class="block text-sm font-medium text-gray-700 mb-2">
                  Nachname
                </label>
                <p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
                <input
                  id="nachname"
                  v-model="form.nachname"
                  type="text"
                  required
                  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>
                <label for="vorname" class="block text-sm font-medium text-gray-700 mb-2">
                  Vorname
                </label>
                <p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
                <input
                  id="vorname"
                  v-model="form.vorname"
                  type="text"
                  required
                  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>

            <div>
              <label for="strasse" class="block text-sm font-medium text-gray-700 mb-2">
                Straße und Hausnummer
              </label>
              <p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
              <input
                id="strasse"
                v-model="form.strasse"
                type="text"
                required
                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 class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label for="plz" class="block text-sm font-medium text-gray-700 mb-2">
                  PLZ
                </label>
                <p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
                <input
                  id="plz"
                  v-model="form.plz"
                  type="text"
                  required
                  pattern="[0-9]{5}"
                  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>
                <label for="ort" class="block text-sm font-medium text-gray-700 mb-2">
                  Wohnort
                </label>
                <p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
                <input
                  id="ort"
                  v-model="form.ort"
                  type="text"
                  required
                  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>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label for="geburtsdatum" class="block text-sm font-medium text-gray-700 mb-2">
                  Geburtsdatum
                </label>
                <p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
                <input
                  id="geburtsdatum"
                  v-model="form.geburtsdatum"
                  type="date"
                  required
                  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>
                <label for="telefon_privat" class="block text-sm font-medium text-gray-700 mb-2">
                  Telefon (privat)
                </label>
                <input
                  id="telefon_privat"
                  v-model="form.telefon_privat"
                  type="tel"
                  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>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                  E-Mail
                </label>
                <p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
                <input
                  id="email"
                  v-model="form.email"
                  type="email"
                  required
                  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>
                <label for="telefon_mobil" class="block text-sm font-medium text-gray-700 mb-2">
                  Telefon (Mobil)
                </label>
                <input
                  id="telefon_mobil"
                  v-model="form.telefon_mobil"
                  type="tel"
                  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>
          </div>

          <!-- Mitgliedschaftsart -->
          <div class="space-y-4">
            <h3 class="text-xl font-semibold text-gray-900 border-b border-gray-200 pb-2">
              Mitgliedschaftsart
            </h3>
            
            <div class="space-y-3">
              <label class="flex items-center">
                <input
                  v-model="form.mitgliedschaftsart"
                  type="radio"
                  value="aktiv"
                  class="mr-3 text-primary-600 focus:ring-primary-500"
                />
                <span class="text-gray-700">Aktives Mitglied</span>
              </label>
              
              <label class="flex items-center">
                <input
                  v-model="form.mitgliedschaftsart"
                  type="radio"
                  value="passiv"
                  class="mr-3 text-primary-600 focus:ring-primary-500"
                />
                <span class="text-gray-700">Passives Mitglied</span>
              </label>
            </div>
          </div>

          <!-- Beitragszahlung -->
          <div class="space-y-4">
            <h3 class="text-xl font-semibold text-gray-900 border-b border-gray-200 pb-2">
              Beitragszahlung
            </h3>
            
            <div class="bg-gray-50 p-4 rounded-lg">
              <p class="text-gray-700 mb-4">
                Den derzeitigen jährlichen Mitgliedsbeitrag in Höhe von:
              </p>
              <ul class="space-y-2 text-gray-700">
                <li>• € 120,-- (Erwachsene)</li>
                <li>• € 72,-- (Jugendliche bis zum vollendeten 18. Lebensjahr)</li>
                <li>• € 30,-- (passive Mitglieder)</li>
              </ul>
              <p class="text-gray-700 mt-4">
                bitte ich per Lastschrift jährlich von meinem Konto einzuziehen.
              </p>
            </div>

            <label class="flex items-start">
              <input
                v-model="form.lastschrift_erlaubt"
                type="checkbox"
                required
                class="mr-3 mt-1 text-primary-600 focus:ring-primary-500"
              />
              <div>
                <span class="text-gray-700">
                  Hierzu erteile ich das beigefügte SEPA-Lastschriftmandat.
                </span>
                <p class="text-xs text-gray-500 italic mt-1">Pflichtfeld</p>
              </div>
            </label>
          </div>

          <!-- Bankdaten -->
          <div class="space-y-6">
            <h3 class="text-xl font-semibold text-gray-900 border-b border-gray-200 pb-2">
              Bankdaten für SEPA-Lastschrift
            </h3>
            
            <div>
              <label for="kontoinhaber" class="block text-sm font-medium text-gray-700 mb-2">
                Kontoinhaber (Vorname und Name)
              </label>
              <p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
              <input
                id="kontoinhaber"
                v-model="form.kontoinhaber"
                type="text"
                required
                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>
              <label for="iban" class="block text-sm font-medium text-gray-700 mb-2">
                IBAN
              </label>
              <p class="text-xs text-gray-500 italic mb-2">Pflichtfeld</p>
              <input
                id="iban"
                v-model="form.iban"
                type="text"
                required
                placeholder="DE89 3704 0044 0532 0130 00"
                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>
              <label for="bic" class="block text-sm font-medium text-gray-700 mb-2">
                BIC
              </label>
              <input
                id="bic"
                v-model="form.bic"
                type="text"
                placeholder="COBADEFFXXX"
                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>
              <label for="bank" class="block text-sm font-medium text-gray-700 mb-2">
                Kreditinstitut
              </label>
              <input
                id="bank"
                v-model="form.bank"
                type="text"
                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>

          <!-- Datenschutz -->
          <div class="space-y-4">
            <h3 class="text-xl font-semibold text-gray-900 border-b border-gray-200 pb-2">
              Datenschutz und Einverständniserklärung
            </h3>
            
            <div class="bg-blue-50 p-4 rounded-lg">
              <p class="text-sm text-gray-700 mb-4">
                Der Vereinsvorstand weist darauf hin, dass ausreichende technische Maßnahmen zur Gewährleistung des Datenschutzes getroffen wurden. Dennoch kann bei einer Veröffentlichung von personenbezogenen Mitgliederdaten im Internet ein umfassender Datenschutz nicht garantiert werden.
              </p>
              
              <label class="flex items-start">
                <input
                  v-model="form.datenschutz_einverstanden"
                  type="checkbox"
                  required
                  class="mr-3 mt-1 text-primary-600 focus:ring-primary-500"
                />
                <div>
                  <span class="text-sm text-gray-700">
                    Ich bestätige das Vorstehende zur Kenntnis genommen zu haben und willige ein, dass der Harheimer Tischtennis-Club 1954 e.V. allgemeine Daten zu meiner Person (Name, Fotografien, Mannschaft, Leistungsergebnisse, Turnierteilnahmen, Lizenzen u.ä.) auf der Homepage des Vereins veröffentlichen darf.
                  </span>
                  <p class="text-xs text-gray-500 italic mt-1">Pflichtfeld</p>
                </div>
              </label>
            </div>
          </div>

          <!-- Vereinssatzung -->
          <div class="space-y-4">
            <h3 class="text-xl font-semibold text-gray-900 border-b border-gray-200 pb-2">
              Vereinssatzung
            </h3>
            
            <label class="flex items-start">
              <input
                v-model="form.satzung_anerkannt"
                type="checkbox"
                required
                class="mr-3 mt-1 text-primary-600 focus:ring-primary-500"
              />
              <div>
                <span class="text-gray-700">
                  Ich erkenne die Vereinssatzung (erhältlich beim Vorstand bzw. auf der Vereinshomepage) an.
                </span>
                <p class="text-xs text-gray-500 italic mt-1">Pflichtfeld</p>
              </div>
            </label>
          </div>

          <!-- Hinweise -->
          <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
            <h4 class="font-semibold text-gray-900 mb-2">Wichtige Hinweise:</h4>
            <ul class="text-sm text-gray-700 space-y-1">
              <li>• Die Mitgliedschaft im Harheimer Tischtennis-Club erlangt erst nach Bestätigung durch den Vorstand Wirksamkeit.</li>
              <li>• Die Beitragspflicht beginnt mit dem darauf folgenden Monat.</li>
              <li>• Sie können Ihre Einwilligung zur Datenveröffentlichung jederzeit widerrufen.</li>
            </ul>
          </div>

          <!-- Submit Buttons -->
          <div class="flex flex-col sm:flex-row gap-4 justify-center pt-6">
            <button
              type="button"
              @click="fillWithDummyData"
              :disabled="isGenerating"
              class="px-6 py-3 bg-gray-600 hover:bg-gray-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors flex items-center justify-center"
            >
              <svg class="mr-2 h-5 w-5" 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>
              Mit Testdaten füllen
            </button>
            
            <button
              type="submit"
              :disabled="!isFormValid || isGenerating"
              class="px-8 py-3 bg-primary-600 hover:bg-primary-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors flex items-center justify-center"
            >
              <svg v-if="isGenerating" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
              {{ isGenerating ? 'Formular wird erstellt...' : 'Beitrittsformular erstellen' }}
            </button>
          </div>
        </form>
      </div>

      <!-- Noch Fragen Box -->
      <div class="mt-12 bg-gradient-to-r from-primary-600 to-primary-700 rounded-2xl p-8 sm:p-12 text-center">
        <h3 class="text-3xl font-display font-bold text-white mb-4">
          Noch Fragen zur Mitgliedschaft?
        </h3>
        <p class="text-xl text-primary-100 mb-6">
          Kontaktieren Sie uns - wir beraten Sie gerne persönlich
        </p>
        <NuxtLink
          to="/kontakt"
          class="inline-flex items-center px-8 py-4 bg-white text-primary-600 font-semibold rounded-lg hover:bg-gray-100 transition-colors"
        >
          Jetzt Kontakt aufnehmen
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

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

const form = ref({
  // Persönliche Daten
  nachname: '',
  vorname: '',
  strasse: '',
  plz: '',
  ort: '',
  geburtsdatum: '',
  telefon_privat: '',
  email: '',
  telefon_mobil: '',
  
  // Mitgliedschaftsart
  mitgliedschaftsart: 'aktiv',
  
  // Bankdaten
  kontoinhaber: '',
  iban: '',
  bic: '',
  bank: '',
  
  // Einverständnisse
  lastschrift_erlaubt: false,
  datenschutz_einverstanden: false,
  satzung_anerkannt: false
})

const isGenerating = ref(false)

const isFormValid = computed(() => {
  return form.value.nachname &&
         form.value.vorname &&
         form.value.strasse &&
         form.value.plz &&
         form.value.ort &&
         form.value.geburtsdatum &&
         form.value.email &&
         form.value.mitgliedschaftsart &&
         form.value.kontoinhaber &&
         form.value.iban &&
         form.value.lastschrift_erlaubt &&
         form.value.datenschutz_einverstanden &&
         form.value.satzung_anerkannt
})

const isVolljaehrig = computed(() => {
  if (!form.value.geburtsdatum) return true // Default zu volljährig
  
  const heute = new Date()
  const geburtsdatum = new Date(form.value.geburtsdatum)
  const alter = heute.getFullYear() - geburtsdatum.getFullYear()
  const monatDiff = heute.getMonth() - geburtsdatum.getMonth()
  
  if (monatDiff < 0 || (monatDiff === 0 && heute.getDate() < geburtsdatum.getDate())) {
    return alter - 1 >= 18
  }
  
  return alter >= 18
})

const fillWithDummyData = () => {
  // Dummy-Daten für Testzwecke
  form.value = {
    // Persönliche Daten
    nachname: 'Mustermann',
    vorname: 'Max',
    strasse: 'Musterstraße 123',
    plz: '60437',
    ort: 'Frankfurt am Main',
    geburtsdatum: '1990-05-15', // Volljährig
    telefon_privat: '069 12345678',
    email: 'max.mustermann@example.com',
    telefon_mobil: '0171 1234567',
    
    // Mitgliedschaftsart
    mitgliedschaftsart: 'aktiv',
    
    // Bankdaten
    kontoinhaber: 'Max Mustermann',
    iban: 'DE89 3704 0044 0532 0130 00',
    bic: 'COBADEFFXXX',
    bank: 'Commerzbank AG',
    
    // Einverständnisse
    lastschrift_erlaubt: true,
    datenschutz_einverstanden: true,
    satzung_anerkannt: true
  }
}

const submitForm = async () => {
  if (!isFormValid.value) return
  
  isGenerating.value = true
  
  try {
    const response = await $fetch('/api/membership/generate-pdf', {
      method: 'POST',
      body: {
        ...form.value,
        isVolljaehrig: isVolljaehrig.value
      }
    })
    
    if (response.success) {
      // PDF herunterladen über geschützten Endpoint
      try {
        const downloadResponse = await $fetch(response.downloadUrl, {
          method: 'GET',
          responseType: 'blob'
        })
        
        // Blob zu Download-Link konvertieren
        const blob = new Blob([downloadResponse], { 
          type: 'application/pdf'
        })
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = `Beitrittserklärung_${form.value.nachname}_${form.value.vorname}.pdf`
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
        
        // Erfolgsmeldung
        alert('Beitrittsformular wurde erfolgreich erstellt und per E-Mail an den Vorstand/Trainer gesendet!')
      } catch (downloadError) {
        console.error('Download-Fehler:', downloadError)
        alert('Formular wurde erfolgreich erstellt und per E-Mail an den Vorstand/Trainer gesendet!\n\nFalls der Download fehlschlägt, können Sie das Formular auch später über den Link in der E-Mail herunterladen.')
      }
      
      // Formular zurücksetzen
      form.value = {
        nachname: '',
        vorname: '',
        strasse: '',
        plz: '',
        ort: '',
        geburtsdatum: '',
        telefon_privat: '',
        email: '',
        telefon_mobil: '',
        mitgliedschaftsart: 'aktiv',
        kontoinhaber: '',
        iban: '',
        bic: '',
        bank: '',
        lastschrift_erlaubt: false,
        datenschutz_einverstanden: false,
        satzung_anerkannt: false
      }
    } else {
      alert('Fehler beim Erstellen des Formulars: ' + (response.error || 'Unbekannter Fehler'))
    }
  } catch (error) {
    console.error('Fehler:', error)
    alert('Fehler beim Erstellen des Formulars. Bitte versuchen Sie es erneut.')
  } finally {
    isGenerating.value = false
  }
}

useHead({
  title: 'Mitgliedschaft - Harheimer TC',
})
</script>