<!-- src/routes/admin/change-password/+page.svelte -->
<script lang="ts">
  import AdminHeader from '$lib/components/AdminHeader.svelte';
  
  let oldPassword = '';
  let newPassword = '';
  let confirmPassword = '';
  let message = '';
  let error = '';
  let isLoading = false;

  async function changePassword() {
    message = '';
    error = '';

    // Validierung
    if (!oldPassword.trim()) {
      error = 'Altes Passwort ist erforderlich.';
      return;
    }

    if (!newPassword.trim()) {
      error = 'Neues Passwort ist erforderlich.';
      return;
    }

    if (newPassword.length < 6) {
      error = 'Das neue Passwort muss mindestens 6 Zeichen lang sein.';
      return;
    }

    if (newPassword !== confirmPassword) {
      error = 'Die neuen Passwörter stimmen nicht überein.';
      return;
    }

    try {
      isLoading = true;
      
      const res = await fetch('/api/admin/change-password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ oldPassword, newPassword })
      });

      const data = await res.json();

      if (!res.ok) {
        error = data.error || 'Fehler beim Ändern des Passworts.';
      } else {
        message = 'Passwort erfolgreich geändert.';
        oldPassword = '';
        newPassword = '';
        confirmPassword = '';
      }
    } catch (err) {
      error = err instanceof Error ? err.message : 'Unbekannter Fehler beim Ändern des Passworts.';
      console.error('Fehler beim Passwort ändern:', err);
    } finally {
      isLoading = false;
    }
  }

  function resetForm() {
    oldPassword = '';
    newPassword = '';
    confirmPassword = '';
    message = '';
    error = '';
  }
</script>

<svelte:head>
  <title>Passwort ändern - Admin</title>
</svelte:head>

<div class="min-h-screen bg-gray-50">
  <AdminHeader 
    title="Admin-Passwort ändern" 
    showBackButton={true}
  />

  <main class="max-w-7xl mx-auto px-4 py-6">
    {#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 message}
      <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">
            <h3 class="text-sm font-medium text-green-800">Erfolg</h3>
            <p class="mt-1 text-sm text-green-700">{message}</p>
          </div>
        </div>
      </div>
    {/if}

    <!-- Passwort ändern Formular -->
    <div class="max-w-2xl mx-auto">
      <div class="bg-white shadow-sm rounded-lg p-6">
        <div class="flex items-center mb-6">
          <div class="flex-shrink-0">
            <svg class="h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </svg>
          </div>
          <div class="ml-4">
            <h2 class="text-lg font-medium text-gray-900">Passwort ändern</h2>
            <p class="text-sm text-gray-500">Aus Sicherheitsgründen sollten Sie Ihr Passwort regelmäßig ändern.</p>
          </div>
        </div>

        <div class="space-y-6">
          <div>
            <label for="old-password" class="block text-sm font-medium text-gray-700 mb-2">
              Aktuelles Passwort
            </label>
            <input
              id="old-password"
              type="password"
              bind:value={oldPassword}
              placeholder="Geben Sie Ihr aktuelles Passwort ein"
              class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500"
              disabled={isLoading}
            />
          </div>

          <div>
            <label for="new-password" class="block text-sm font-medium text-gray-700 mb-2">
              Neues Passwort
            </label>
            <input
              id="new-password"
              type="password"
              bind:value={newPassword}
              placeholder="Geben Sie Ihr neues Passwort ein (mindestens 6 Zeichen)"
              class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500"
              disabled={isLoading}
            />
          </div>

          <div>
            <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-2">
              Neues Passwort wiederholen
            </label>
            <input
              id="confirm-password"
              type="password"
              bind:value={confirmPassword}
              placeholder="Wiederholen Sie Ihr neues Passwort"
              class="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500"
              disabled={isLoading}
            />
          </div>

          <div class="flex items-center justify-between pt-4">
            <button
              type="button"
              on:click={resetForm}
              class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 hover:underline"
              disabled={isLoading}
            >
              Formular zurücksetzen
            </button>
            
            <button
              type="button"
              on:click={changePassword}
              disabled={isLoading}
              class="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white px-6 py-2 rounded-md text-sm font-medium inline-flex items-center"
            >
              {#if isLoading}
                <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                Wird geändert...
              {:else}
                Passwort ändern
              {/if}
            </button>
          </div>
        </div>

        <!-- Sicherheitshinweise -->
        <div class="mt-8 p-4 bg-blue-50 rounded-md">
          <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">
              <h3 class="text-sm font-medium text-blue-800">Sicherheitshinweise</h3>
              <div class="mt-2 text-sm text-blue-700">
                <ul class="list-disc pl-5 space-y-1">
                  <li>Verwenden Sie ein starkes Passwort mit mindestens 6 Zeichen</li>
                  <li>Kombinieren Sie Buchstaben, Zahlen und Sonderzeichen</li>
                  <li>Verwenden Sie dieses Passwort nicht für andere Dienste</li>
                  <li>Ändern Sie Ihr Passwort regelmäßig</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>