<!-- src/routes/admin/zeitraeume/+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;
  }
  
  let zeitraeume: Zeitraum[] = [];
  let neuerBezeichnung = '';
  let neuerstartDatum = '';
  let neuerendDatum = '';
  let fehlermeldung = '';
  let bearbeiteId: number | null = null;
  let isLoading = true;

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

  function bearbeiten(d: { id: number; bezeichnung: string; startDatum: string; endDatum: string }) {
    neuerBezeichnung = d.bezeichnung;
    neuerstartDatum = d.startDatum ? d.startDatum.slice(0, 10) : '';
    neuerendDatum = d.endDatum ? d.endDatum.slice(0, 10) : '';
    bearbeiteId = d.id;
  }
    
  async function speichern() {
    fehlermeldung = '';
    if (!neuerBezeichnung.trim()) {
      fehlermeldung = 'Bezeichnung ist erforderlich';
      return;
    }
    
    if (!neuerstartDatum || !neuerendDatum) {
      fehlermeldung = 'Start- und Enddatum sind erforderlich';
      return;
    }

    try {
      const method = bearbeiteId ? 'PATCH' : 'POST';
      const body = bearbeiteId
        ? { id: bearbeiteId, bezeichnung: neuerBezeichnung, startDatum: neuerstartDatum, endDatum: neuerendDatum }
        : { bezeichnung: neuerBezeichnung, startDatum: neuerstartDatum, endDatum: neuerendDatum };

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

      if (res.ok) {
        neuerBezeichnung = '';
        neuerstartDatum = '';
        neuerendDatum = '';
        bearbeiteId = null;
        await ladeZeitraeume();
      } 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('Diesen Zeitraum wirklich löschen?')) return;
    
    try {
      const res = await fetch(`/api/admin/zeitraeume?id=${id}`, { method: 'DELETE' });
      
      if (!res.ok) {
        const err = await res.json();
        fehlermeldung = err.error || 'Fehler beim Löschen';
        return;
      }
      
      await ladeZeitraeume();
    } catch (err) {
      fehlermeldung = err instanceof Error ? err.message : 'Fehler beim Löschen';
      console.error(err);
    }
  }

  function resetForm() {
    neuerBezeichnung = '';
    neuerstartDatum = '';
    neuerendDatum = '';
    bearbeiteId = null;
  }
  
  onMount(ladeZeitraeume);
</script>

<svelte:head>
  <title>Praktikumszeiträume verwalten - Admin</title>
</svelte:head>

<div class="min-h-screen bg-gray-50">
  <AdminHeader 
    title="Praktikumszeiträume 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}

    <!-- 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 ? 'Praktikumszeitraum bearbeiten' : 'Neuen Praktikumszeitraum hinzufügen'}
      </h2>
      
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div>
          <label for="bezeichnung" class="block text-sm font-medium text-gray-700 mb-2">
            Bezeichnung
          </label>
          <input
            id="bezeichnung"
            type="text"
            bind:value={neuerBezeichnung}
            placeholder="z.B. Sommerpraktikum 2024"
            class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500"
          />
        </div>
        
        <div>
          <label for="startdatum" class="block text-sm font-medium text-gray-700 mb-2">
            Startdatum
          </label>
          <input
            id="startdatum"
            type="date"
            bind:value={neuerstartDatum}
            class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500"
          />
        </div>
        
        <div>
          <label for="enddatum" class="block text-sm font-medium text-gray-700 mb-2">
            Enddatum
          </label>
          <input
            id="enddatum"
            type="date"
            bind:value={neuerendDatum}
            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 Praktikumszeiträume...</span>
      </div>
    {:else if zeitraeume.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="M8 7V3a4 4 0 118 0v4m-4 6v6m-1 0h2m-1 0V9a4 4 0 00-8 0v2M7 9h2m-2 0v6" />
        </svg>
        <h3 class="mt-2 text-sm font-medium text-gray-900">Keine Praktikumszeiträume</h3>
        <p class="mt-1 text-sm text-gray-500">Erstellen Sie Ihren ersten Praktikumszeitraum ü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 Praktikumszeiträume</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">
                  Bezeichnung
                </th>
                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Startdatum
                </th>
                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Enddatum
                </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 zeitraeume as d}
                <tr class="hover:bg-gray-50">
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                    {d.bezeichnung}
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-center">
                    {new Date(d.startDatum).toLocaleDateString('de-DE', { 
                      day: '2-digit', 
                      month: '2-digit', 
                      year: 'numeric' 
                    })}
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-center">
                    {new Date(d.endDatum).toLocaleDateString('de-DE', { 
                      day: '2-digit', 
                      month: '2-digit', 
                      year: 'numeric' 
                    })}
                  </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>