  <script lang="ts">
    import { onMount } from 'svelte';
    interface Anmeldung {
	  pdfs: any;
      anrede: string;
      vorname: string;
      nachname: string;
      email: string;
      noteDeutsch?: string;
      noteMthe?: string;
      sozialverhalten?: string;
      wunsch1?: { name: string };
      wunsch2?: { name: string };
      wunsch3?: { name: string };
      timestamp: number;
      id: number;
    }

    let anmeldungen: Anmeldung[] = [];
  
    async function ladeAnmeldungen() {
      const res = await fetch('/api/admin/anmeldungen');
        anmeldungen = await res.json();
      }

    async function loeschen(id: number) {
      if (!confirm('Diese Anmeldung wirklich löschen?')) return;
      try {
        const res = await fetch(`/api/admin/anmeldungen?id=${id}`, { method: 'DELETE' });
        if (!res.ok) {
          const errorText = await res.text();
          throw new Error(`Fehler beim Löschen (${res.status}): ${errorText}`);
        }
        await ladeAnmeldungen();
      } catch (error) {
        console.error(error);
        alert('Fehler beim Löschen der Anmeldung.\n' + (error as Error).message);
      }
}

      onMount(ladeAnmeldungen);
  </script> 

  <div class="p-6 max-w-7xl mx-auto">
      <h1 class="text-2xl font-bold mb-4 text-center">Alle Anmeldungen</h1>
      <table class="w-full border text-sm">
        <thead>
          <tr class="bg-gray-200">
            <th class="p-2 text-left">Name</th>
            <th class="p-2 text-left">E-Mail</th>
            <th class="p-2 text-left">Wunsch 1–3</th>
            <th class="p-2 text-left">Note Deutsch</th>
            <th class="p-2 text-left">Note Mathe</th>
            <th class="p-2 text-left">Sozialverhalten</th>
            <th class="p-2 text-left">Datum</th>
            <th class="p-2 text-left">Dateien</th>
            <th class="p-2 text-left">Aktionen</th>
          </tr>
        </thead>
        <tbody>
          {#each anmeldungen as a}
            <tr class="border-t">
              <td class="p-2">{a.anrede} {a.vorname} {a.nachname}</td>
              <td class="p-2">{a.email}</td>
              <td class="p-2">
                {a.wunsch1?.name}<br>
                {a.wunsch2?.name}<br>
                {a.wunsch3?.name}
              </td>
              <td class="p-2">{a.noteDeutsch || '—'}</td>
              <td class="p-2">{a.noteMthe || '—'}</td>
              <td class="p-2">{a.sozialverhalten || '—'}</td>
              <td class="p-2">{new Date(a.timestamp).toLocaleDateString()}</td>
              <td class="p-2">
                {#each a.pdfs as pdf}
                <li>
                  <a href={pdf.pfad} target="_blank" class="text-blue-600 hover:underline">
                    PDF ansehen
                  </a>
                </li>
              {/each}
              </td>
              <td class="p-2 text-right">
                <button
                  class="text-red-600 hover:underline"
                  on:click={() => loeschen(a.id)}>
                  Löschen
                </button>
              </td>
            </tr>
          {/each}
        </tbody>
      </table>

      <button
          on:click={async () => {
          await fetch('/api/admin/logout', { method: 'POST' });
          location.reload();
          }}
          class="bg-red-600  text-white px-4 py-3 rounded text-center hover:bg-red-700">
            Logout
      </button>
  </div>