<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"></div>

      <!-- Mitgliedschaftspläne (ohne "Noch Fragen" Box) -->
      <div class="mb-12">
        <section id="membership" class="py-16 sm:py-20 bg-gradient-to-b from-gray-50 to-white">
          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
              <h2 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-4">
                Mitgliedschaft
              </h2>
              <div class="w-24 h-1 bg-primary-600 mx-auto mb-6"></div>
              <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                Werden Sie Teil unserer Tischtennis-Familie - Wählen Sie die passende Mitgliedschaft für sich
              </p>
            </div>

            <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
              <!-- Mitgliedschaftspläne werden dynamisch geladen -->
            </div>

            <!-- Satzung Download -->
            <div class="mt-16 bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
              <div class="text-center mb-8">
                <h3 class="text-3xl font-display font-bold text-gray-900 mb-4">
                  Vereinsatzung
                </h3>
                <p class="text-xl text-gray-600">
                  Laden Sie unsere aktuelle Vereinsatzung herunter
                </p>
              </div>
              <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
                <a
                  href="/documents/satzung.pdf"
                  target="_blank"
                  class="inline-flex items-center px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" size="20" class="lucide lucide-file-text-icon mr-2">
                    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
                    <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
                    <path d="M10 9H8"></path>
                    <path d="M16 13H8"></path>
                    <path d="M16 17H8"></path>
                  </svg>
                  Satzung herunterladen (PDF)
                </a>
                <span class="text-sm text-gray-500">oder</span>
                <a
                  href="/satzung"
                  class="inline-flex items-center px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-900 font-semibold rounded-lg transition-colors"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" size="20" class="lucide lucide-eye-icon mr-2">
                    <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
                    <circle cx="12" cy="12" r="3"></circle>
                  </svg>
                  Online ansehen
                </a>
              </div>
            </div>
          </div>
        </section>
      </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 id="membershipForm" 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"
                  name="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"
                  name="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"
                name="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"
                  name="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"
                  name="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"
                  name="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"
                  name="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"
                  name="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"
                  name="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
                  name="mitgliedschaftsart"
                  type="radio"
                  value="aktiv"
                  checked
                  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
                  name="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
                name="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"
                name="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"
                name="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"
                name="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"
                name="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
                  name="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
                name="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"
              id="fillDummyData"
              class="px-6 py-3 bg-gray-600 hover:bg-gray-700 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"
              id="submitBtn"
              class="px-8 py-3 bg-primary-600 hover:bg-primary-700 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>
              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>
        <a
          href="/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
        </a>
      </div>
    </div>
  </div>
</template>

<script setup>
// Einfaches JavaScript ohne Vue.js-Reaktivität
onMounted(() => {
  const form = document.getElementById('membershipForm')
  const fillDummyBtn = document.getElementById('fillDummyData')
  const submitBtn = document.getElementById('submitBtn')

  // Testdaten füllen
  fillDummyBtn.addEventListener('click', () => {
    document.getElementById('nachname').value = 'Mustermann'
    document.getElementById('vorname').value = 'Max'
    document.getElementById('strasse').value = 'Musterstraße 123'
    document.getElementById('plz').value = '60437'
    document.getElementById('ort').value = 'Frankfurt am Main'
    document.getElementById('geburtsdatum').value = '1990-05-15'
    document.getElementById('telefon_privat').value = '069 12345678'
    document.getElementById('email').value = 'max.mustermann@example.com'
    document.getElementById('telefon_mobil').value = '0171 1234567'
    document.getElementById('kontoinhaber').value = 'Max Mustermann'
    document.getElementById('iban').value = 'DE89 3704 0044 0532 0130 00'
    document.getElementById('bic').value = 'COBADEFFXXX'
    document.getElementById('bank').value = 'Commerzbank AG'
    document.querySelector('input[name="lastschrift_erlaubt"]').checked = true
    document.querySelector('input[name="datenschutz_einverstanden"]').checked = true
    document.querySelector('input[name="satzung_anerkannt"]').checked = true
  })

  // Formular absenden
  form.addEventListener('submit', async (e) => {
    e.preventDefault()
    
    submitBtn.disabled = true
    submitBtn.textContent = 'Formular wird erstellt...'
    
    try {
      const formData = new FormData(form)
      const data = Object.fromEntries(formData.entries())
      
      // Volljährigkeit prüfen
      const birthDate = new Date(data.geburtsdatum)
      const today = new Date()
      const age = today.getFullYear() - birthDate.getFullYear()
      const monthDiff = today.getMonth() - birthDate.getMonth()
      data.isVolljaehrig = age > 18 || (age === 18 && monthDiff >= 0)
      
      const response = await fetch('/api/membership/generate-pdf', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      })
      
      const result = await response.json()
      
      if (result.success) {
        // PDF herunterladen
        const downloadResponse = await fetch(result.downloadUrl)
        const blob = await downloadResponse.blob()
        
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `beitrittserklärung_${Date.now()}.pdf`
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(url)
        document.body.removeChild(a)
        
        alert('Beitrittsformular erfolgreich erstellt und heruntergeladen!')
      } else {
        alert('Fehler beim Erstellen des Formulars: ' + (result.error || 'Unbekannter Fehler'))
      }
    } catch (error) {
      console.error('Fehler:', error)
      alert('Fehler beim Senden des Formulars: ' + error.message)
    } finally {
      submitBtn.disabled = false
      submitBtn.textContent = 'Beitrittsformular erstellen'
    }
  })
})
</script>