<!-- src/routes/admin/anmeldungen/+page.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';
  import AnmeldungenTable from '$lib/components/AnmeldungenTable.svelte';
  import DienststellenDialog from '$lib/components/DienststellenDialog.svelte';
  import AdminHeader from '$lib/components/AdminHeader.svelte';
  
  interface Anmeldung {
    pdfs: { pfad: string }[];
    anrede: string;
    vorname: string;
    nachname: string;
    email: string;
    noteDeutsch?: string;
    noteMathe?: string;
    sozialverhalten?: string;
    wunsch1?: { id: number; name: string };
    wunsch2?: { id: number; name: string };
    wunsch3?: { id: number; name: string };
    timestamp: number;
    id: number;
    status?: 'pending' | 'accepted' | 'rejected'; // processing entfernt
    assignedDienststelle?: { id: number; name: string };
    processedBy?: string;
    processedAt?: number;
  }

  interface EmailConfig {
    subject: string;
    template: string;
  }

  let anmeldungen: Anmeldung[] = [];
  let isLoading = true;
  let error = '';
  
  // Filter für Status (processing entfernt)
  let statusFilter: 'all' | 'pending' | 'accepted' | 'rejected' = 'all';
  let filteredAnmeldungen: Anmeldung[] = [];
  
  // Dialog state
  let showDialog = false;
  let selectedAnmeldungId: number | null = null;
  let selectedDienststelleId: number | null = null;
  let availableWishes: { id: number, name: string }[] = [];

  // E-Mail Konfiguration
  let emailSubject = 'Praktikumsplatz-Zusage';
  let emailTemplate = `Sehr geehrte/r \{anrede\} \{nachname\},

wir freuen uns, Ihnen mitteilen zu können, dass Ihre Bewerbung für ein Praktikum erfolgreich war.

Sie wurden für das Praktikum bei folgender Dienststelle angenommen:
\{dienststelle\}

Weitere Informationen erhalten Sie in den kommenden Tagen.

Mit freundlichen Grüßen
Ihr Praktikumsteam`;

  let showEmailConfig = false;
  let isLoadingEmailConfig = false;
  let isSavingEmailConfig = false;

  // Status-Badge Funktionen (processing entfernt)
  function getStatusColor(status: string): string {
    switch (status) {
      case 'pending': return 'bg-yellow-100 text-yellow-800';
      case 'accepted': return 'bg-green-100 text-green-800';
      case 'rejected': return 'bg-red-100 text-red-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  }

  function getStatusText(status: string): string {
    switch (status) {
      case 'pending': return 'Offen';
      case 'accepted': return 'Angenommen';
      case 'rejected': return 'Abgelehnt';
      default: return 'Unbekannt';
    }
  }

  // Filter-Funktionen
  function filterAnmeldungen() {
    if (statusFilter === 'all') {
      filteredAnmeldungen = anmeldungen;
    } else {
      filteredAnmeldungen = anmeldungen.filter(a => (a.status || 'pending') === statusFilter);
    }
  }

  $: {
    anmeldungen, statusFilter, filterAnmeldungen();
  }

  async function loadAnmeldungen() {
    try {
      isLoading = true;
      error = '';
      
      const res = await fetch('/api/admin/anmeldungen');
      
      if (!res.ok) {
        const errorText = await res.text();
        console.error('❌ API Fehler:', res.status, errorText);
        throw new Error(`Fehler beim Laden: ${res.status} - ${errorText}`);
      }
      
      const data = await res.json();
      
      // Prüfen ob es ein Array ist
      if (!Array.isArray(data)) {
        console.error('❌ Antwort ist kein Array:', data);
        throw new Error('Antwort vom Server ist kein Array');
      }
      
      anmeldungen = data.map(a => {
        return { ...a, status: a.status || 'pending' };
      });
      
    } catch (err) {
      error = err instanceof Error ? err.message : 'Unbekannter Fehler';
      console.error('❌ Frontend Fehler beim Laden der Anmeldungen:', err);
    } finally {
      isLoading = false;
    }
  }

  async function loadEmailConfig() {
    try {
      isLoadingEmailConfig = true;
      
      const res = await fetch('/api/admin/email-config');
      
      if (!res.ok) {
        throw new Error(`Fehler beim Laden der E-Mail-Konfiguration: ${res.status}`);
      }
      
      const config: EmailConfig = await res.json();
      emailSubject = config.subject;
      emailTemplate = config.template;
    } catch (err) {
      console.error('Fehler beim Laden der E-Mail-Konfiguration:', err);
      // Fallback auf Standard-Werte bei Fehler
    } finally {
      isLoadingEmailConfig = false;
    }
  }

  async function saveEmailTemplate() {
    try {
      isSavingEmailConfig = true;
      
      const res = await fetch('/api/admin/email-config', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          subject: emailSubject,
          template: emailTemplate
        })
      });

      if (!res.ok) {
        throw new Error(`Fehler beim Speichern: ${res.status}`);
      }

      showEmailConfig = false;
      alert('E-Mail-Vorlage erfolgreich gespeichert!');
    } catch (err) {
      error = err instanceof Error ? err.message : 'Fehler beim Speichern der E-Mail-Vorlage';
      console.error(err);
    } finally {
      isSavingEmailConfig = false;
    }
  }

  function handleAccept(event: CustomEvent<{id: number}>) {
    const anmeldung = anmeldungen.find(a => a.id === event.detail.id);
    if (!anmeldung) return;

    availableWishes = [
      anmeldung.wunsch1 && { id: anmeldung.wunsch1.id, name: `1. Wunsch: ${anmeldung.wunsch1.name}` },
      anmeldung.wunsch2 && { id: anmeldung.wunsch2.id, name: `2. Wunsch: ${anmeldung.wunsch2.name}` },
      anmeldung.wunsch3 && { id: anmeldung.wunsch3.id, name: `3. Wunsch: ${anmeldung.wunsch3.name}` }
    ].filter(Boolean) as { id: number, name: string }[];

    selectedDienststelleId = availableWishes[0]?.id ?? null;
    selectedAnmeldungId = event.detail.id;
    showDialog = true;
  }

  async function handleConfirmAccept(event: CustomEvent<{dienststelleId: number}>) {
    if (!selectedAnmeldungId) return;

    try {
      const res = await fetch(`/api/admin/anmeldungen?id=${selectedAnmeldungId}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ dienststelleId: event.detail.dienststelleId })
      });

      if (!res.ok) {
        const errorText = await res.text();
        throw new Error(`Fehler beim Annehmen (${res.status}): ${errorText}`);
      }

      showDialog = false;
      
      // E-Mail senden nach erfolgreichem Annehmen
      await sendAcceptanceEmail(selectedAnmeldungId, event.detail.dienststelleId);
      
      selectedAnmeldungId = null;
      await loadAnmeldungen();
    } catch (err) {
      error = err instanceof Error ? err.message : 'Fehler beim Annehmen';
      console.error(err);
    }
  }

  async function sendAcceptanceEmail(anmeldungId: number, dienststelleId: number) {
    const anmeldung = anmeldungen.find(a => a.id === anmeldungId);
    if (!anmeldung) return;

    // Dienststelle finden
    const dienststelle = availableWishes.find(w => w.id === dienststelleId);
    const dienststelleName = dienststelle ? dienststelle.name.replace(/^\d+\.\s*Wunsch:\s*/, '') : 'Unbekannte Dienststelle';

    // E-Mail Text personalisieren
    const personalizedEmail = emailTemplate
      .replace(/\{anrede\}/g, anmeldung.anrede)
      .replace(/\{vorname\}/g, anmeldung.vorname)
      .replace(/\{nachname\}/g, anmeldung.nachname)
      .replace(/\{dienststelle\}/g, dienststelleName);

    // mailto: Link erstellen
    const mailtoLink = `mailto:${anmeldung.email}?subject=${encodeURIComponent(emailSubject)}&body=${encodeURIComponent(personalizedEmail)}`;
    
    // Standard E-Mail Client öffnen
    window.location.href = mailtoLink;
  }

  async function handleReject(event: CustomEvent<{id: number}>) {
    if (!confirm('Diese Anmeldung wirklich ablehnen?')) return;
    
    try {
      const res = await fetch(`/api/admin/anmeldungen?id=${event.detail.id}`, { 
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'reject' })
      });
      
      if (!res.ok) {
        throw new Error(`Fehler beim Ablehnen: ${res.status}`);
      }
      
      await loadAnmeldungen();
    } catch (err) {
      error = err instanceof Error ? err.message : 'Fehler beim Ablehnen';
      console.error(err);
    }
  }

  async function handleDelete(event: CustomEvent<{id: number}>) {
    if (!confirm('Diese Anmeldung wirklich löschen?')) return;
    
    try {
      const res = await fetch(`/api/admin/anmeldungen?id=${event.detail.id}`, { 
        method: 'DELETE' 
      });
      
      if (!res.ok) {
        throw new Error(`Fehler beim Löschen: ${res.status}`);
      }
      
      await loadAnmeldungen();
    } catch (err) {
      error = err instanceof Error ? err.message : 'Fehler beim Löschen';
      console.error(err);
    }
  }

  function closeDialog() {
    showDialog = false;
    selectedAnmeldungId = null;
  }

  onMount(() => {
    loadAnmeldungen();
    loadEmailConfig();
  });
</script>

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

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

  <main class="max-w-7xl mx-auto px-4 py-6">
    <!-- Filter und E-Mail Konfiguration -->
    <div class="mb-6 flex justify-between items-center">
      <!-- Status Filter (processing entfernt) -->
      <div class="flex items-center space-x-4">
        <label for="status-filter" class="text-sm font-medium text-gray-700">Filter:</label>
        <select
          id="status-filter"
          bind:value={statusFilter}
          class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500"
        >
          <option value="all">Alle ({anmeldungen.length})</option>
          <option value="pending">Offen ({anmeldungen.filter(a => (a.status || 'pending') === 'pending').length})</option>
          <option value="accepted">Angenommen ({anmeldungen.filter(a => a.status === 'accepted').length})</option>
          <option value="rejected">Abgelehnt ({anmeldungen.filter(a => a.status === 'rejected').length})</option>
        </select>
      </div>

      <!-- E-Mail Konfiguration Button -->
      <button
        on:click={() => showEmailConfig = !showEmailConfig}
        class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium inline-flex items-center"
        disabled={isLoadingEmailConfig}
      >
        {#if isLoadingEmailConfig}
          <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
        {:else}
          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
          </svg>
        {/if}
        E-Mail-Vorlage konfigurieren
      </button>
    </div>

    <!-- Status Übersicht (processing entfernt) -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
      <div class="bg-white rounded-lg border border-gray-200 p-4">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center">
              <svg class="w-4 h-4 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-600">Offen</p>
            <p class="text-2xl font-semibold text-gray-900">
              {anmeldungen.filter(a => (a.status || 'pending') === 'pending').length}
            </p>
          </div>
        </div>
      </div>

      <div class="bg-white rounded-lg border border-gray-200 p-4">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
              <svg class="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-600">Angenommen</p>
            <p class="text-2xl font-semibold text-gray-900">
              {anmeldungen.filter(a => a.status === 'accepted').length}
            </p>
          </div>
        </div>
      </div>

      <div class="bg-white rounded-lg border border-gray-200 p-4">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
              <svg class="w-4 h-4 text-red-600" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-600">Abgelehnt</p>
            <p class="text-2xl font-semibold text-gray-900">
              {anmeldungen.filter(a => a.status === 'rejected').length}
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- E-Mail Konfiguration Panel -->
    {#if showEmailConfig}
      <div class="bg-white shadow-sm rounded-lg p-6 mb-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">E-Mail-Vorlage konfigurieren</h3>
        
        <div class="space-y-4">
          <div>
            <label for="email-subject" class="block text-sm font-medium text-gray-700 mb-2">
              E-Mail Betreff
            </label>
            <input
              id="email-subject"
              type="text"
              bind:value={emailSubject}
              class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500"
              disabled={isSavingEmailConfig}
            />
          </div>
          
          <div>
            <label for="email-template" class="block text-sm font-medium text-gray-700 mb-2">
              E-Mail Text
            </label>
            <textarea
              id="email-template"
              bind:value={emailTemplate}
              rows="10"
              class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500"
              disabled={isSavingEmailConfig}
            ></textarea>
            <p class="mt-2 text-sm text-gray-500">
              Verfügbare Platzhalter: &#123;anrede&#125;, &#123;vorname&#125;, &#123;nachname&#125;, &#123;dienststelle&#125;
            </p>
          </div>
          
          <div class="flex justify-end space-x-3">
            <button
              on:click={() => showEmailConfig = false}
              class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800"
              disabled={isSavingEmailConfig}
            >
              Abbrechen
            </button>
            <button
              on:click={saveEmailTemplate}
              class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium inline-flex items-center"
              disabled={isSavingEmailConfig}
            >
              {#if isSavingEmailConfig}
                <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                Speichere...
              {:else}
                Speichern
              {/if}
            </button>
          </div>
        </div>
      </div>
    {/if}

    {#if error}
      <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">{error}</p>
          </div>
        </div>
      </div>
    {/if}

    {#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 Anmeldungen...</span>
      </div>
    {:else if filteredAnmeldungen.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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
        <h3 class="mt-2 text-sm font-medium text-gray-900">
          {statusFilter === 'all' ? 'Keine Anmeldungen' : `Keine ${getStatusText(statusFilter).toLowerCase()}en Anmeldungen`}
        </h3>
        <p class="mt-1 text-sm text-gray-500">
          {statusFilter === 'all' 
            ? 'Es sind noch keine Praktikumsanmeldungen eingegangen.' 
            : `Es gibt keine Anmeldungen mit dem Status "${getStatusText(statusFilter).toLowerCase()}".`}
        </p>
      </div>
    {:else}
      <div class="bg-white shadow-sm rounded-lg overflow-hidden">
        <AnmeldungenTable 
          anmeldungen={filteredAnmeldungen}
          {getStatusColor}
          {getStatusText}
          on:accept={handleAccept}
          on:reject={handleReject}
          on:delete={handleDelete}
        />
      </div>
    {/if}
  </main>
</div>

{#if showDialog}
  <DienststellenDialog
    wishes={availableWishes}
    selectedId={selectedDienststelleId}
    on:confirm={handleConfirmAccept}
    on:cancel={closeDialog}
  />
{/if}