<script lang="ts">
    import '../../..app.css';
    import { onMount } from 'svelte';
    let dienststellen: { id: number; name: string; plaetze: number }[] = [];
    let neuerName = '';
    let neuePlaetze = 0;
    let fehlermeldung = '';
    let bearbeiteId: number | null = null;
  
    async function ladeDienststellen() {
      const res = await fetch('/api/admin/dienststellen');
      dienststellen = await res.json();
    }

    function bearbeiten(d: { id: number; name: string; plaetze: number }) {
      neuerName = d.name;
      neuePlaetze = d.plaetze;
      bearbeiteId = d.id;
    }
    
    async function speichern() {
      fehlermeldung = '';
      if (!neuerName.trim()) return;

      const method = bearbeiteId ? 'PATCH' : 'POST';
      const body = bearbeiteId
        ? { id: bearbeiteId, name: neuerName, plaetze: neuePlaetze }
        : { name: neuerName, plaetze: neuePlaetze };

      const res = await fetch('/api/admin/dienststellen', {
        method,
        body: JSON.stringify(body),
        headers: { 'Content-Type': 'application/json' }
      });

      if (res.ok) {
      neuerName = '';
      neuePlaetze = 0;
      bearbeiteId = null;
      await ladeDienststellen();
    } else {
      const err = await res.json();
      fehlermeldung = err.error || 'Fehler beim Speichern';
    }
  }
  
    async function loeschen(id: number) {
      if (!confirm('Diese Dienststelle wirklich löschen?')) return;
      await fetch(`/api/admin/dienststellen?id=${id}`, { method: 'DELETE' });
      await ladeDienststellen();
    }
  
    onMount(ladeDienststellen);
  </script>
  
  <div class="p-6 max-w-xl mx-auto space-y-6">
    <h1 class="text-2xl font-bold">Dienststellen verwalten</h1>
  
    <div class="flex gap-2">
      <input bind:value={neuerName} placeholder="Dienststelle" class="input w-full" />
      <input type="number" bind:value={neuePlaetze} placeholder="Anzahl Plätze" class="input w-1/4" />
      <button on:click={() => { neuerName = ''; neuePlaetze = 0; bearbeiteId = null }} class="text-sm text-gray-500 hover:underline">
        Zurücksetzen
      </button>
      <button on:click={speichern} class="bg-blue-600 text-white px-4 py-2 rounded">
        {bearbeiteId !== null ? 'Ändern' : 'Hinzufügen'}
      </button>
    </div>
  
    {#if fehlermeldung}
      <p class="text-red-600">{fehlermeldung}</p>
    {/if}
  
    <ul class="divide-y border rounded">
      {#each dienststellen as d}
        <li class="flex justify-between items-center p-2">
          <span>{d.name}</span>
          <span class="text-sm text-gray-500">{d.plaetze} Plätze</span>
          <button on:click={() => (neuerName = d.name, neuePlaetze = d.plaetze, bearbeiteId = d.id)} class="text-sm text-blue-600 hover:underline">Bearbeiten</button>
          <button on:click={() => loeschen(d.id)} class="text-sm text-red-600 hover:underline">Löschen</button>
        </li>
      {/each}
    </ul>
    <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 hiver:bg-red-700">
          Logout
    </button>
  </div>
  
  <input class="border rounded px-3 py-2" />
