<script lang="ts">
    let oldPassword = '';
    let newPassword = '';
    let confirmPassword = '';
    let message = '';
    let error = '';
  
    async function changePassword() {
      message = '';
      error = '';
  
      if (newPassword !== confirmPassword) {
        error = 'Die neuen Passwörter stimmen nicht überein.';
        return;
      }
  
      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 = '';
      }
    }
  </script>
  
  <div class="max-w-lg mx-auto bg-white p-6 rounded-2xl shadow-md space-y-6 border border-gray-200">
    <h2 class="text-2xl font-bold text-gray-800">🔐 Admin-Passwort ändern</h2>
  
    <div class="space-y-4">
      <div>
        <label class="block text-sm font-medium text-gray-700">Altes Passwort</label>
        <input
          type="password"
          bind:value={oldPassword}
          class="mt-1 w-full px-4 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>
  
      <div>
        <label class="block text-sm font-medium text-gray-700">Neues Passwort</label>
        <input
          type="password"
          bind:value={newPassword}
          class="mt-1 w-full px-4 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>
  
      <div>
        <label class="block text-sm font-medium text-gray-700">Neues Passwort wiederholen</label>
        <input
          type="password"
          bind:value={confirmPassword}
          class="mt-1 w-full px-4 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>
    </div>
  
    {#if error}
      <div class="text-red-600 text-sm font-medium">{error}</div>
    {/if}
    {#if message}
      <div class="text-green-600 text-sm font-medium">{message}</div>
    {/if}
  
    <div class="pt-4">
      <button
        on:click={changePassword}
        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-xl transition duration-150"
      >
        Passwort ändern
      </button>
    </div>
  </div>