<!-- src/routes/admin/dienststellen/+page.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import AdminHeader from '$lib/components/AdminHeader.svelte';
  
  let dienststellen: { id: number; name: string }[] = [];
  let neuerName = '';
  let fehlermeldung = '';
  let bearbeiteId: number | null = null;
  let isLoading = true;

  async function ladeDienststellen() {
    try {
      isLoading = true;
      fehlermeldung = '';
      
      const res = await fetch('/api/admin/dienststellen');
      
      if (!res.ok) {
        throw new Error(`Fehler beim Laden: ${res.status}`);
      }
      
      dienststellen = await res.json();
    } catch (err) {
      fehlermeldung = err instanceof Error ? err.message : 'Unbekannter Fehler';
      console.error('Fehler beim Laden der Dienststellen:', err);
    } finally {
      isLoading = false;
    }
  }

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

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

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

      if (res.ok) {
        neuerName = '';
        bearbeiteId = null;
        await ladeDienststellen();
      } else {
        const err = await res.json();
        fehlermeldung = err.error || 'Fehler beim Speichern';
      }
    } catch (err) {
      fehlermeldung = err instanceof Error ? err.message : 'Fehler beim Speichern';
      console.error(err);
    }
  }

  async function loeschen(id: number) {
    if (!confirm('Diese Dienststelle wirklich löschen? Alle zugehörigen Platzangaben werden ebenfalls gelöscht.')) return;
    
    try {
      const res = await fetch(`/api/admin/dienststellen?id=${id}`, { method: 'DELETE' });
      
      if (!res.ok) {
        const err = await res.json();
        fehlermeldung = err.error || 'Fehler beim Löschen';
        return;
      }
      
      await ladeDienststellen();
    } catch (err) {
      fehlermeldung = err instanceof Error ? err.message : 'Fehler beim Löschen';
      console.error(err);
    }
  }

  function resetForm() {
    neuerName = '';
    bearbeiteId = null;
  }

  onMount(ladeDienststellen);
</script>

<svelte:head>
  <title>Dienststellen verwalten - Admin</title>
</svelte:head>

<div class="min-h-screen bg-gray-50">
  <AdminHeader 
    title="Dienststellen verwalten" 
    showBackButton={true}
  />

  <main class="max-w-5xl mx-auto px-4 py-6">
    {#if fehlermeldung}
      <div class="bg-red-50 border border-red-200 rounded-md p-4 mb-6">
        <div class="flex">
          <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
            </svg>
          </div>
          <div class="ml-3">
            <h3 class="text-sm font-medium text-red-800">Fehler</h3>
            <p class="mt-1 text-sm text-red-700">{fehlermeldung}</p>
          </div>
        </div>
      </div>
    {/if}

    <div class="bg-blue-50 border border-blue-200 rounded-md p-4 mb-6">
      <div class="flex">
        <div class="flex-shrink-0">
          <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
            <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>
        </div>
        <div class="ml-3">
          <p class="text-sm text-blue-700">
            Hier werden nur die Dienststellen verwaltet. Die Anzahl der Praktikumsplätze pro Zeitraum können Sie unter 
            <a href="/admin/plaetze" class="font-medium underline hover:text-blue-800">Plätze verwalten</a> festlegen.
          </p>
        </div>
      </div>
    </div>

    <!-- Eingabeformular -->
    <div class="bg-white shadow-sm rounded-lg p-6 mb-6">
      <h2 class="text-lg font-medium text-gray-900 mb-4">
        {bearbeiteId !== null ? 'Dienststelle bearbeiten' : 'Neue Dienststelle hinzufügen'}
      </h2>
      
      <div class="flex gap-4">
        <div class="flex-1">
          <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
            Dienststelle
          </label>
          <input
            id="name"
            type="text"
            bind:value={neuerName}
            placeholder="Name der Dienststelle"
            class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500"
          />
        </div>
        
        <div class="flex items-end gap-2">
          <button
            on:click={resetForm}
            class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 hover:underline"
          >
            Zurücksetzen
          </button>
          <button
            on:click={speichern}
            class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md text-sm font-medium"
          >
            {bearbeiteId !== null ? 'Ändern' : 'Hinzufügen'}
          </button>
        </div>
      </div>
    </div>

    {#if isLoading}
      <div class="flex justify-center items-center h-64">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        <span class="ml-3 text-gray-600">Lade Dienststellen...</span>
      </div>
    {:else if dienststellen.length === 0}
      <div class="text-center py-12">
        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-4m-5 0H9m0 0H7m2 0v-5a2 2 0 012-2h2a2 2 0 012 2v5M7 7h.01M7 11h.01M11 7h.01M11 11h.01" />
        </svg>
        <h3 class="mt-2 text-sm font-medium text-gray-900">Keine Dienststellen</h3>
        <p class="mt-1 text-sm text-gray-500">Erstellen Sie Ihre erste Dienststelle über das Formular oben.</p>
      </div>
    {:else}
      <div class="bg-white shadow-sm rounded-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200">
          <h3 class="text-lg font-medium text-gray-900">Alle Dienststellen ({dienststellen.length})</h3>
        </div>
        
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Dienststelle
                </th>
                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Aktionen
                </th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              {#each dienststellen as d}
                <tr class="hover:bg-gray-50">
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                    {d.name}
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <button
                      on:click={() => bearbeiten(d)}
                      class="text-blue-600 hover:text-blue-900 mr-4"
                    >
                      Bearbeiten
                    </button>
                    <button
                      on:click={() => loeschen(d.id)}
                      class="text-red-600 hover:text-red-900"
                    >
                      Löschen
                    </button>
                  </td>
                </tr>
              {/each}
            </tbody>
          </table>
        </div>
      </div>
    {/if}
  </main>
</div>