<!-- src/routes/admin/zeitraum-plaetze/+page.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import AdminHeader from '$lib/components/AdminHeader.svelte';
  
  interface Zeitraum {
    id: number;
    bezeichnung: string;
    startDatum: string;
    endDatum: string;
  }
  
  interface ZeitraumPlatz {
    id: number;
    zeitraumId: number;
    dienststelleId: number;
    plaetze: number;
    dienststelle: {
      id: number;
      name: string;
    };
  }
  
  let zeitraeume: Zeitraum[] = [];
  let selectedZeitraumId: number | null = null;
  let plaetze: ZeitraumPlatz[] = [];
  let isLoading = true;
  let isSaving = false;
  let fehlermeldung = '';
  let erfolgsmeldung = '';
  
  // Temporäre Änderungen speichern
  let aenderungen: Map<number, number> = new Map();

  async function ladeZeitraeume() {
    try {
      const res = await fetch('/api/admin/zeitraeume');
      if (!res.ok) throw new Error('Fehler beim Laden');
      zeitraeume = await res.json();
      
      if (zeitraeume.length > 0 && !selectedZeitraumId) {
        selectedZeitraumId = zeitraeume[0].id;
        await ladePlaetze();
      }
    } catch (err) {
      fehlermeldung = err instanceof Error ? err.message : 'Fehler beim Laden';
      console.error(err);
    }
  }

  async function ladePlaetze() {
    if (!selectedZeitraumId) return;
    
    try {
      isLoading = true;
      fehlermeldung = '';
      erfolgsmeldung = '';
      
      const res = await fetch(`/api/admin/zeitraum-plaetze?zeitraumId=${selectedZeitraumId}`);
      if (!res.ok) throw new Error('Fehler beim Laden');
      
      plaetze = await res.json();
      aenderungen.clear();
    } catch (err) {
      fehlermeldung = err instanceof Error ? err.message : 'Fehler beim Laden';
      console.error(err);
    } finally {
      isLoading = false;
    }
  }

  function handlePlaetzeChange(dienststelleId: number, wert: string) {
    const plaetzeWert = parseInt(wert) || 0;
    aenderungen.set(dienststelleId, plaetzeWert);
    aenderungen = aenderungen; // Trigger reactivity
  }

  function getPlaetzeWert(platz: ZeitraumPlatz): number {
    return aenderungen.has(platz.dienststelleId) 
      ? aenderungen.get(platz.dienststelleId)! 
      : platz.plaetze;
  }

  async function speichernAlle() {
    if (!selectedZeitraumId || aenderungen.size === 0) {
      erfolgsmeldung = 'Keine Änderungen zu speichern';
      return;
    }
    
    try {
      isSaving = true;
      fehlermeldung = '';
      erfolgsmeldung = '';
      
      // Alle Änderungen nacheinander speichern
      for (const [dienststelleId, plaetzeWert] of aenderungen) {
        const res = await fetch('/api/admin/zeitraum-plaetze', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            zeitraumId: selectedZeitraumId,
            dienststelleId,
            plaetze: plaetzeWert
          })
        });
        
        if (!res.ok) {
          throw new Error(`Fehler beim Speichern für Dienststelle ${dienststelleId}`);
        }
      }
      
      erfolgsmeldung = 'Alle Änderungen erfolgreich gespeichert';
      aenderungen.clear();
      await ladePlaetze();
      
      // Erfolgsmeldung nach 3 Sekunden ausblenden
      setTimeout(() => { erfolgsmeldung = ''; }, 3000);
    } catch (err) {
      fehlermeldung = err instanceof Error ? err.message : 'Fehler beim Speichern';
      console.error(err);
    } finally {
      isSaving = false;
    }
  }

  async function syncAlles() {
    if (!confirm('Möchten Sie wirklich alle Zeitraum-Dienststellen-Kombinationen synchronisieren?')) {
      return;
    }
    
    try {
      isSaving = true;
      fehlermeldung = '';
      
      const res = await fetch('/api/admin/zeitraum-plaetze', {
        method: 'PATCH'
      });
      
      if (!res.ok) throw new Error('Fehler beim Synchronisieren');
      
      erfolgsmeldung = 'Synchronisierung erfolgreich';
      await ladePlaetze();
      
      setTimeout(() => { erfolgsmeldung = ''; }, 3000);
    } catch (err) {
      fehlermeldung = err instanceof Error ? err.message : 'Fehler beim Synchronisieren';
      console.error(err);
    } finally {
      isSaving = false;
    }
  }

  $: if (selectedZeitraumId) {
    ladePlaetze();
  }

  onMount(ladeZeitraeume);
</script>

<svelte:head>
  <title>Plätze pro Zeitraum verwalten - Admin</title>
</svelte:head>

<div class="min-h-screen bg-gray-50">
  <AdminHeader 
    title="Plätze pro Zeitraum verwalten" 
    showBackButton={true}
  />

  <main class="max-w-7xl 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}

    {#if erfolgsmeldung}
      <div class="bg-green-50 border border-green-200 rounded-md p-4 mb-6">
        <div class="flex">
          <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
            </svg>
          </div>
          <div class="ml-3">
            <p class="text-sm font-medium text-green-800">{erfolgsmeldung}</p>
          </div>
        </div>
      </div>
    {/if}

    <!-- Zeitraum Auswahl -->
    <div class="bg-white shadow-sm rounded-lg p-6 mb-6">
      <div class="flex justify-between items-center">
        <div class="flex-1">
          <label for="zeitraum" class="block text-sm font-medium text-gray-700 mb-2">
            Praktikumszeitraum auswählen
          </label>
          <select
            id="zeitraum"
            bind:value={selectedZeitraumId}
            class="w-full max-w-md border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500"
          >
            {#each zeitraeume as z}
              <option value={z.id}>
                {z.bezeichnung} ({new Date(z.startDatum).toLocaleDateString('de-DE')} - {new Date(z.endDatum).toLocaleDateString('de-DE')})
              </option>
            {/each}
          </select>
        </div>
        
        <button
          on:click={syncAlles}
          disabled={isSaving}
          class="px-4 py-2 text-sm text-blue-600 hover:text-blue-800 hover:underline disabled:opacity-50"
        >
          Alles synchronisieren
        </button>
      </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 Plätze...</span>
      </div>
    {:else if plaetze.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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
        </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 zuerst Dienststellen, um Plätze zuzuweisen.</p>
      </div>
    {:else}
      <div class="bg-white shadow-sm rounded-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
          <h3 class="text-lg font-medium text-gray-900">
            Plätze pro Dienststelle
          </h3>
          <button
            on:click={speichernAlle}
            disabled={isSaving || aenderungen.size === 0}
            class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isSaving ? 'Speichert...' : `Änderungen speichern ${aenderungen.size > 0 ? `(${aenderungen.size})` : ''}`}
          </button>
        </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-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Verfügbare Plätze
                </th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              {#each plaetze as platz}
                <tr class="hover:bg-gray-50">
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                    {platz.dienststelle.name}
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-center">
                    <input
                      type="number"
                      min="0"
                      value={getPlaetzeWert(platz)}
                      on:input={(e) => handlePlaetzeChange(platz.dienststelleId, e.currentTarget.value)}
                      class="w-24 border border-gray-300 rounded-md px-3 py-1 text-center focus:ring-blue-500 focus:border-blue-500 {aenderungen.has(platz.dienststelleId) ? 'bg-yellow-50 border-yellow-300' : ''}"
                    />
                  </td>
                </tr>
              {/each}
            </tbody>
          </table>
        </div>
      </div>
    {/if}
  </main>
</div>