<script lang="ts">
  let passwort = '';
  let eingeloggt = false;
  let fehler = false;

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

    if (res.ok) {
      eingeloggt = true;
      fehler = false;
    } else {
      fehler = true;
    }
  }
</script>

<div class="p-6 max-w-lg mx-auto">
  {#if !eingeloggt}
    <div class="space-y-4">
      <h1 class="text-2xl font-bold">Admin Login</h1>
      <input type="password" bind:value={passwort} placeholder="Passwort" class="input w-full" />
      <button on:click={login} class="bg-blue-600 text-white px-4 py-2 rounded">Login</button>
      {#if fehler}
        <p class="text-red-600">Falsches Passwort</p>
      {/if}
    </div>
  {:else}
    <div class="space-y-4">
      <h1 class="text-2xl font-bold mb-4">Admin-Bereich</h1>
      <div class="flex flex-col gap-4">
        <a href="/admin/anmeldungen" class="bg-blue-600 text-white px-4 py-3 rounded text-center hover:bg-blue-700">
          📝 Anmeldungen anzeigen
        </a>
        <a href="/admin/dienststellen" class="bg-green-600 text-white px-4 py-3 rounded text-center hover:bg-green-700">
          🏢 Dienststellen verwalten
        </a>
        <a href="/admin/change-password" class="bg-cyan-600 text-white px-4 py-3 rounded text-center hover:bg-green-700">
          👨‍💼 Passwort ädern
        </a>
      </div>
        <button
          on:click={async () => {
          await fetch('/api/admin/logout', { method: 'POST' });
          location.reload();
          }}
          class="bg-red-600  text-white px-4 py-3 rounded text-center hiver:bg-red-700">
            Logout
        </button>
      </div>
  {/if}
</div>

<style>
  .input {
    @apply border rounded px-3 py-2 w-full;
  }
</style>