<script lang="ts">
  import '/src/app.css';
  import { onMount } from 'svelte';

  let anrede = '';
  let vorname = '';
  let nachname = '';
  let geburtsdatum = '';
  let strasse = '';
  let hausnummer = '';
  let ort = '';
  let plz = '';
  let telefon = '';
  let email = '';
  let schulart = '';
  let zeitraum = '';
  let motivation = '';

  // Notfallkontakt
  let notfallVorname = '';
  let notfallNachname = '';
  let notfallTelefon = '';

  let wunsch1Id = '';
  let wunsch2Id = '';
  let wunsch3Id = '';
  let pdfDateien: File[] = [];

  let fehler = '';
  let success = false;
  let dienststellen: any[] = [];
  let isLoadingDienststellen = false;

  let fileInputKey = 0;
  let noteDeutsch = '';
  let noteMathe = '';
  let sozialverhalten = '';
  let schulklasse = '';
  let ablehnungHinweis = '';
  let showAblehnungModal = false;
  let alter = '';

  // Validierungsfehler für Echtzeit-Anzeige
  let alterFehler = '';
  let notenFehler = '';
  let sozialverhaltenFehler = '';

  // Hinweis für IGS/KGS mit Lernentwicklungsbericht
  $: zeigeIgsKgsHinweis =
          ['IGSR', 'KGSR'].includes(schulart) &&
          schulklasse &&
          parseInt(schulklasse) < 10;

  // Berechnung des Alters
  $: {
    if (geburtsdatum && zeitraum && zeitraeume.length > 0) {
      const gewaehlterZeitraum = zeitraeume.find(z => z.id == zeitraum);
      if (gewaehlterZeitraum) {
        const geburt = new Date(geburtsdatum);
        const praktikumStart = new Date(gewaehlterZeitraum.startDatum);

        let altersberechnung = praktikumStart.getFullYear() - geburt.getFullYear();
        const monthDiff = praktikumStart.getMonth() - geburt.getMonth();

        if (monthDiff < 0 || (monthDiff === 0 && praktikumStart.getDate() < geburt.getDate())) {
          altersberechnung--;
        }
        alter = altersberechnung.toString();
      }
    }
  }

  // Echtzeit-Validierung: Alter
  $: {
    const altersWert = parseInt(alter);
    if (alter && !isNaN(altersWert) && altersWert < 14) {
      alterFehler = 'Du musst mindestens 14 Jahre alt sein, um ein Praktikum beginnen zu können.';
    } else {
      alterFehler = '';
    }
  }

  // Echtzeit-Validierung: Noten
  $: {
    const deutsch = parseInt(noteDeutsch);
    const mathe = parseInt(noteMathe);
    const klasse = parseInt(schulklasse);

    if (noteDeutsch && noteMathe && schulart) {
      // Gymnasium oder KGS_Gymnasialzweig: mindestens 4 in Deutsch UND Mathe
      if (['Gymnasium', 'KGS_Gymnasialzweig'].includes(schulart)) {
        if (!isNaN(deutsch) && !isNaN(mathe) && (deutsch > 4 || mathe > 4)) {
          notenFehler = 'Du brauchst mindestens eine 4 in Deutsch und Mathematik.';
        } else {
          notenFehler = '';
        }
      }
      // Fachoberschule Klasse 11 oder 12: mindestens 4 in Deutsch UND Mathe
      else if (schulart === 'Fachoberschule' && (klasse === 11 || klasse === 12)) {
        if (!isNaN(deutsch) && !isNaN(mathe) && (deutsch > 4 || mathe > 4)) {
          notenFehler = 'Du brauchst mindestens eine 4 in Deutsch und Mathematik.';
        } else {
          notenFehler = '';
        }
      }
      // Alle anderen: mindestens 3 in Deutsch UND Mathe
      else {
        if (!isNaN(deutsch) && !isNaN(mathe) && (deutsch > 3 || mathe > 3)) {
          notenFehler = 'Du brauchst mindestens eine 3 in Deutsch und Mathematik.';
        } else {
          notenFehler = '';
        }
      }
    } else {
      notenFehler = '';
    }
  }

  // Echtzeit-Validierung: Sozialverhalten
  $: {
    if (sozialverhalten === 'Entspricht den Erwartungen mit Einschränkungen') {
      sozialverhaltenFehler = 'Dein Sozialverhalten muss mindestens den Erwartungen entsprechen.';
    } else {
      sozialverhaltenFehler = '';
    }
  }

  // Prüfen ob Formular gültig ist
  $: formHatFehler = alterFehler !== '' || notenFehler !== '' || sozialverhaltenFehler !== '';

  // Dienststellen laden wenn Zeitraum sich ändert
  async function ladeDienststellen(zeitraumId: string) {
    if (!zeitraumId) {
      dienststellen = [];
      return;
    }

    try {
      isLoadingDienststellen = true;
      const res = await fetch(`/api/dienststellen?zeitraumId=${zeitraumId}`);
      dienststellen = await res.json();
    } catch (err) {
      console.error('Fehler beim Laden der Dienststellen:', err);
      dienststellen = [];
    } finally {
      isLoadingDienststellen = false;
    }
  }

  // Reaktiv: Wenn Zeitraum sich ändert, Dienststellen neu laden und Wünsche zurücksetzen
  $: if (zeitraum) {
    ladeDienststellen(zeitraum);
    wunsch1Id = '';
    wunsch2Id = '';
    wunsch3Id = '';
  }

  // Filter: Nur Dienststellen mit freien Plätzen und Alterscheck für PK Mitte
  $: filteredDienststellen = (dienststellen ?? []).filter(d => {
    if (d.plaetze <= 0) return false;

    if (d.name.includes('PK Mitte') || d.name.toLowerCase().includes('polizeikommissariat mitte')) {
      return parseInt(alter) >= 18;
    }
    return true;
  });

  $: filteredZeitraeume = (zeitraeume ?? []).filter(zeitraum => {
    const heute = new Date();
    const startDatum = new Date(zeitraum.startDatum);
    return startDatum > heute;
  });

  let startDatum = '';

  $: hideSozialVerhalten =
          Number(schulklasse) >= 11 &&
          ["Gymnasium", "KGS_Gymnasialzweig", "Fachoberschule"].includes(schulart);

  onMount(async () => {
    const resZeitraeume = await fetch('/api/zeitraeume');
    zeitraeume = await resZeitraeume.json();
  });

  interface Zeitraum {
    id: number;
    bezeichnung: string;
    startDatum: string;
    endDatum: string;
  }
  let zeitraeume: Zeitraum[] = [];
  let fehlermeldung = '';
  let bearbeiteId: number | null = null;

  function resetForm() {
    anrede = '';
    vorname = '';
    nachname = '';
    geburtsdatum = '';
    strasse = '';
    hausnummer = '';
    ort = '';
    plz = '';
    telefon = '';
    email = '';
    schulart = '';
    zeitraum = '';
    wunsch1Id = '';
    wunsch2Id = '';
    wunsch3Id = '';
    motivation = '';
    noteDeutsch = '';
    noteMathe = '';
    sozialverhalten = '';
    schulklasse = '';
    notfallVorname = '';
    notfallNachname = '';
    notfallTelefon = '';
    pdfDateien = [];
    fileInputKey += 1;
    success = false;
    alterFehler = '';
    notenFehler = '';
    sozialverhaltenFehler = '';
    dienststellen = [];
  }

  async function anmelden() {
    // Abbrechen wenn Validierungsfehler vorhanden
    if (formHatFehler) {
      return;
    }

    const data = new FormData();

    data.append('anrede', anrede);
    data.append('vorname', vorname);
    data.append('nachname', nachname);
    data.append('geburtsdatum', geburtsdatum);
    data.append('strasse', strasse);
    data.append('hausnummer', hausnummer);
    data.append('ort', ort);
    data.append('plz', plz);
    data.append('telefon', telefon);
    data.append('email', email);
    data.append('schulart', schulart);
    data.append('zeitraum', zeitraum);
    data.append('motivation', motivation);
    data.append('wunsch1Id', wunsch1Id);
    data.append('wunsch2Id', wunsch2Id);
    data.append('wunsch3Id', wunsch3Id);
    data.append('noteDeutsch', noteDeutsch);
    data.append('noteMathe', noteMathe);
    data.append('sozialverhalten', sozialverhalten);
    data.append('schulklasse', schulklasse);
    data.append('alter', alter);
    data.append('notfallVorname', notfallVorname);
    data.append('notfallNachname', notfallNachname);
    data.append('notfallTelefon', notfallTelefon);

    for (const pdf of pdfDateien) {
      data.append('pdfs', pdf);
    }

    const res = await fetch('/api/anmelden', {
      method: 'POST',
      body: data
    });

    const result = await res.json();
    if (!res.ok) {
      fehler = result.error || 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.';
      success = false;
    } else {
      fehler = '';
      success = true;
    }
  }
</script>

<div class="min-h-screen bg-gray-100 flex items-center justify-center p-6">
  <form on:submit|preventDefault={anmelden}
        class="bg-white shadow-md rounded-2xl p-8 max-w-2xl w-full space-y-4">

    <h1 class="text-2xl font-bold text-gray-800 mb-4 text-center">Praktikumsanmeldung</h1>

    <!-- Anrede -->
    <select bind:value={anrede} required class="input">
      <option value="" disabled selected hidden>Anrede wählen</option>
      <option value="Herr">Herr</option>
      <option value="Frau">Frau</option>
      <option value="Divers">Divers</option>
    </select>

    <!-- Persönliche Daten -->
    <div class="grid grid-cols-2 gap-4">
      <input bind:value={vorname} placeholder="Vorname" required class="input" />
      <input bind:value={nachname} placeholder="Nachname" required class="input" />
      <div class="flex items-center">Geburtsdatum</div>
      <input bind:value={geburtsdatum} type="date" placeholder="Geburtsdatum" required class="input" />
      <input bind:value={strasse} placeholder="Straße" required class="input" />
      <input bind:value={hausnummer} placeholder="Hausnummer" required class="input" />
      <input bind:value={plz} placeholder="Postleitzahl" required class="input" />
      <input bind:value={ort} placeholder="Ort" required class="input" />
      <input bind:value={telefon} placeholder="Telefonnummer" required class="input col-span-2" />
      <input bind:value={email} type="email" placeholder="E-Mail-Adresse" required class="input col-span-2" />
      <select bind:value={schulart} required class="input">
        <option value="" disabled selected hidden>Schulart wählen</option>
        <option value="Gymnasium">Gymnasium</option>
        <option value="KGS_Gymnasialzweig">KGS Gymnasialzweig</option>
        <option value="Fachoberschule">Fachoberschule</option>
        <option value="Realschule">Realschule</option>
        <option value="KGSR">Kooperative Gesamtschule Realschulzweg</option>
        <option value="IGSR">Integrierte Gesamtschule Realschulzweig</option>
      </select>

      <!-- Schulklasse -->
      <select bind:value={schulklasse} required class="input">
        <option value="" disabled selected hidden>Schulklasse</option>
        <option value="7">7. Klasse</option>
        <option value="8">8. Klasse</option>
        <option value="9">9. Klasse</option>
        <option value="10">10. Klasse</option>
        <option value="11">11. Klasse</option>
        <option value="12">12. Klasse</option>
        <option value="13">13. Klasse</option>
      </select>

      <!-- Sozialverhalten mit Echtzeit-Validierung -->
      {#if !hideSozialVerhalten}
        <div class="col-span-2">
          <select
                  bind:value={sozialverhalten}
                  required
                  class="input"
                  class:input-error={sozialverhaltenFehler}
          >
            <option value="" disabled selected hidden>Sozialverhalten auswählen</option>
            <option value="Entspricht den Erwartungen in vollem Umfang">Entspricht den Erwartungen in vollem Umfang</option>
            <option value="Entspricht den Erwartungen">Entspricht den Erwartungen</option>
            <option value="Entspricht den Erwartungen mit Einschränkungen">Entspricht den Erwartungen mit Einschränkungen</option>
          </select>
          {#if sozialverhaltenFehler}
            <p class="text-red-600 text-sm mt-1">{sozialverhaltenFehler}</p>
          {/if}
        </div>
      {/if}

      <!-- Noten mit Echtzeit-Validierung -->
      <div class="col-span-2">
        <!-- Hinweis für IGS/KGS bei Klasse < 10 -->
        {#if zeigeIgsKgsHinweis}
          <div class="mb-3 p-3 bg-blue-50 border border-blue-200 rounded-xl">
            <div class="flex items-start">
              <svg class="w-5 h-5 text-blue-500 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
              </svg>
              <p class="text-sm text-blue-700">
                Sollte Dir nur ein Lernentwicklungsbericht vorliegen, lass Dir bitte die Noten für Mathe und Deutsch von Deiner Schule bescheinigen. Die integrierten Gesamtschulen stellen die Bescheinigung auf Anfrage aus.
              </p>
            </div>
          </div>
        {/if}

        <div class="grid grid-cols-2 gap-4">
          <input
                  bind:value={noteDeutsch}
                  type="number"
                  min="1"
                  max="6"
                  placeholder="Note in Deutsch"
                  required
                  class="input"
                  class:input-error={notenFehler}
          />
          <input
                  bind:value={noteMathe}
                  type="number"
                  min="1"
                  max="6"
                  placeholder="Note in Mathe"
                  required
                  class="input"
                  class:input-error={notenFehler}
          />
        </div>
        {#if notenFehler}
          <p class="text-red-600 text-sm mt-1">{notenFehler}</p>
        {/if}
      </div>
    </div>

    <!-- Zeitraum-Auswahl -->
    <div class="grid grid-cols-1 gap-4">
      <select bind:value={zeitraum} required class="input">
        <option value="" disabled selected hidden>Wunschzeitraum fürs Praktikum</option>
        {#each filteredZeitraeume as d}
          <option
                  value={d.id}>{d.bezeichnung} ({new Date(d.startDatum).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })} - {new Date(d.endDatum).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })})
          </option>
        {/each}
      </select>
    </div>

    <!-- Alter-Anzeige mit Echtzeit-Validierung -->
    {#if alter}
      <div class="text-sm" class:text-gray-600={!alterFehler} class:text-red-600={alterFehler}>
        Alter zu Praktikumsbeginn: {alter} Jahre
        {#if alterFehler}
          <p class="font-semibold mt-1">{alterFehler}</p>
        {/if}
      </div>
    {/if}

    <!-- Wunschdienststellen - erst auswählbar wenn Zeitraum gewählt -->
    <div class="grid grid-cols-1 gap-4">
      {#if isLoadingDienststellen}
        <div class="flex items-center justify-center py-4 text-gray-500">
          <svg class="animate-spin h-5 w-5 mr-2" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></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>
          Lade verfügbare Dienststellen...
        </div>
      {:else}
        <select bind:value={wunsch1Id} required disabled={!zeitraum} class="input" class:opacity-50={!zeitraum}>
          <option value="" disabled selected>
            {zeitraum ? '1. Wunschdienststelle' : 'Bitte zuerst Zeitraum wählen'}
          </option>
          {#each filteredDienststellen as d}
            <option value={d.id}>{d.name} ({d.plaetze} {d.plaetze === 1 ? 'Platz' : 'Plätze'} frei)</option>
          {/each}
        </select>

        <select bind:value={wunsch2Id} required disabled={!zeitraum || !wunsch1Id} class="input" class:opacity-50={!zeitraum || !wunsch1Id}>
          <option value="" disabled selected>2. Wunschdienststelle</option>
          {#each filteredDienststellen.filter(d => d.id != wunsch1Id) as d}
            <option value={d.id}>{d.name} ({d.plaetze} {d.plaetze === 1 ? 'Platz' : 'Plätze'} frei)</option>
          {/each}
        </select>

        <select bind:value={wunsch3Id} required disabled={!zeitraum || !wunsch2Id} class="input" class:opacity-50={!zeitraum || !wunsch2Id}>
          <option value="" disabled selected>3. Wunschdienststelle</option>
          {#each filteredDienststellen.filter(d => d.id != wunsch1Id && d.id != wunsch2Id) as d}
            <option value={d.id}>{d.name} ({d.plaetze} {d.plaetze === 1 ? 'Platz' : 'Plätze'} frei)</option>
          {/each}
        </select>
      {/if}

      <!-- Hinweis wenn keine Dienststellen verfügbar -->
      {#if zeitraum && !isLoadingDienststellen && filteredDienststellen.length === 0}
        <div class="p-3 bg-yellow-50 border border-yellow-200 rounded-xl">
          <div class="flex items-start">
            <svg class="w-5 h-5 text-yellow-500 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
            <p class="text-sm text-yellow-700">
              Für den gewählten Zeitraum sind leider keine Praktikumsplätze mehr verfügbar. Bitte wähle einen anderen Zeitraum.
            </p>
          </div>
        </div>
      {/if}
    </div>

    <!-- Motivation -->
    <textarea bind:value={motivation} placeholder="Motivation (optional)"
              class="w-full border border-gray-300 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 h-32 resize-none" >
    </textarea>

    <!-- Mehrere PDF Upload -->
    {#key fileInputKey}
      <div>
        <label for="pdf-upload" class="block text-gray-700 font-medium mb-1">Zeugnis hochladen:</label>
        <input
                id="pdf-upload"
                type="file"
                accept="application/pdf"
                multiple
                on:change={(e) => pdfDateien = Array.from((e.target as HTMLInputElement).files || [])}
                class="input"
        />
      </div>
    {/key}

    <!-- Notfallkontakt -->
    <div class="border-t pt-4 mt-4">
      <h2 class="text-lg font-semibold text-gray-700 mb-3">Notfallkontakt</h2>
      <div class="grid grid-cols-2 gap-4">
        <input bind:value={notfallVorname} placeholder="Vorname Notfallkontakt" required class="input" />
        <input bind:value={notfallNachname} placeholder="Nachname Notfallkontakt" required class="input" />
        <input bind:value={notfallTelefon} type="tel" placeholder="Mobilnummer Notfallkontakt" required class="input col-span-2" />
      </div>
    </div>

    {#if showAblehnungModal}
      <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white p-6 rounded shadow-lg text-center space-y-4 max-w-sm w-full">
          <p class="text-red-600 font-semibold">{ablehnungHinweis}</p>
          <button
                  class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
                  on:click={() => { resetForm(); showAblehnungModal = false; }}
          >
            OK
          </button>
        </div>
      </div>
    {/if}

    <!-- Button - deaktiviert bei Validierungsfehlern oder fehlenden Pflichtfeldern -->
    <button
            type="submit"
            disabled={formHatFehler || !zeitraum || !wunsch1Id || !wunsch2Id || !wunsch3Id}
            class="w-full py-3 rounded-xl transition-all"
            class:bg-blue-600={!formHatFehler && zeitraum && wunsch1Id && wunsch2Id && wunsch3Id}
            class:hover:bg-blue-700={!formHatFehler && zeitraum && wunsch1Id && wunsch2Id && wunsch3Id}
            class:text-white={!formHatFehler && zeitraum && wunsch1Id && wunsch2Id && wunsch3Id}
            class:bg-gray-400={formHatFehler || !zeitraum || !wunsch1Id || !wunsch2Id || !wunsch3Id}
            class:cursor-not-allowed={formHatFehler || !zeitraum || !wunsch1Id || !wunsch2Id || !wunsch3Id}
    >
      Jetzt anmelden
    </button>

    {#if formHatFehler}
      <p class="text-red-600 text-sm text-center">Bitte korrigiere die markierten Fehler, um fortzufahren.</p>
    {/if}

    {#if success}
      <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white p-6 rounded shadow-lg text-center space-y-4 max-w-sm w-full">
          <p class="text-green-600 font-semibold">Anmeldung erfolgreich gesendet!</p>
          <button
                  class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
                  on:click={resetForm}
          >
            OK
          </button>
        </div>
      </div>
    {/if}

    {#if fehler}
      <p class="text-red-600">{fehler}</p>
    {/if}
  </form>
</div>

<style>
  .input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.75rem;
    padding: 0.75rem;
    outline: none;
    transition: box-shadow 0.2s, border-color 0.2s;
  }
  .input:focus {
    outline: none;
    box-shadow: 0 0 0 2px #3b82f6;
    border-color: #3b82f6;
  }
  .input:disabled {
    background-color: #f3f4f6;
    cursor: not-allowed;
  }
  .input-error {
    border-color: #dc2626;
    background-color: #fef2f2;
  }
  .input-error:focus {
    box-shadow: 0 0 0 2px #dc2626;
    border-color: #dc2626;
  }
</style>