<script>
  import { onMount } from 'svelte';
  
  let isAuthenticated = false;
  let password = '';
  let loginPairs = [];
  let error = '';
  let htmlMessage = '';

  async function authenticate() {
    try {
      const response = await fetch('/api/plist', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ password })
      });

      const data = await response.json();
      
      if (data.success) {
        isAuthenticated = true;
        loginPairs = data.pairs;
        
        // Handle HTML message if present (for old password)
        if (data.html) {
          htmlMessage = data.html;
        } else {
          htmlMessage = '';
        }
      } else {
        error = 'Incorrect password';
      }
    } catch (err) {
      error = 'Error authenticating';
    }
  }
</script>

<svelte:head>
  <title>KRETÉN - Password List</title>
</svelte:head>

<div class="app-container">
  <main>
    <div class="logo-container">
      <img src="/logo.png" class="logo" alt="KRETÉN logo">
    </div>

    <div class="login-container">
      <div class="login-header">
        <h2>Password List</h2>
      </div>

      {#if !isAuthenticated}
        <div class="login-form">
          <p class="login-instructions">
            Enter the password to view the list of valid login combinations.
          </p>

          {#if error}
            <p class="error-message">{error}</p>
          {/if}

          <form on:submit|preventDefault={authenticate}>
            <div class="form-group">
              <input
                type="password"
                placeholder="Password"  
                bind:value={password}
                class="form-input"
              />
            </div>

            <div class="form-actions">
              <button type="submit" class="login-button">
                View List
              </button>
            </div>
          </form>
        </div>
      {:else}
        <div class="login-form">
          {#if htmlMessage}
            <div class="html-message">
              {@html htmlMessage}
            </div>
          {/if}
          <div class="pairs-list">
            {#each loginPairs as pair}
              <div class="pair-item">
                <span class="username">{pair.username}</span>
                <span class="separator">:</span>
                <span class="password">{pair.password}</span>
              </div>
            {/each}
          </div>
        </div>
      {/if}
    </div>
  </main>

  <footer>
    <p>Készült 🍊 megbízásából, 12 Mrd ft közpénzből</p> 
    <div class="footer-links">
      <a href="/kreta_src.zip" style="color: white; text-decoration: none;">kreta_src.zip</a>
      <span class="footer-separator">|</span>
      <a href="https://spitkov.hu" style="color: white; text-decoration: none;">spitkov.hu</a>
    </div>
  </footer>
</div>

<style>
  :global(html), :global(body) {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
  }

  .app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100vw;
    background-color: #2d4f5a;
    color: #333;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(1rem, 5vw, 2rem);
    width: 100%;
    margin-top: clamp(1rem, 5vh, 3rem);
  }

  .logo-container {
    margin-bottom: clamp(1.5rem, 5vh, 2rem);
    text-align: center;
    padding: 0 1rem;
  }

  .logo {
    max-width: 100%;
    height: auto;
    width: auto;
    max-height: 120px;
  }

  .login-container {
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
    overflow: hidden;
    margin: 0 1rem;
  }

  .login-header {
    background-color: #30b0d5;
    color: white;
    padding: 1rem;
    text-align: center;
  }

  .login-header h2 {
    font-size: clamp(1rem, 4vw, 1.2rem);
    font-weight: normal;
    margin: 0;
    line-height: 1.3;
  }

  .login-form {
    padding: clamp(1rem, 4vw, 1.5rem);
  }

  .login-instructions {
    margin-bottom: 1rem;
    font-size: clamp(0.85rem, 3.5vw, 0.9rem);
  }

  .error-message {
    color: #e74c3c;
    margin-bottom: 1rem;
    font-size: clamp(0.85rem, 3.5vw, 0.9rem);
  }

  .form-group {
    margin-bottom: clamp(0.8rem, 3vw, 1rem);
  }

  .form-input {
    width: 100%;
    padding: clamp(0.5rem, 2vw, 0.6rem);
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f5f5f5;
    font-size: 16px;
  }

  .form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
  }

  .login-button {
    background-color: #30b0d5;
    color: white;
    border: none;
    border-radius: 4px;
    padding: clamp(0.4rem, 2vw, 0.5rem) clamp(0.8rem, 3vw, 1rem);
    font-size: clamp(0.85rem, 3.5vw, 0.9rem);
    cursor: pointer;
    transition: background-color 0.2s;
    min-width: 120px;
  }

  .login-button:hover {
    background-color: #2698bb;
  }

  .pairs-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .pair-item {
    padding: 0.4rem;
    border-radius: 4px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: monospace;
    font-size: clamp(0.9rem, 3.5vw, 1rem);
  }

  .username {
    color: #2698bb;
  }

  .separator {
    color: #666;
  }

  .password {
    color: #e74c3c;
  }

  .html-message {
    margin-bottom: 1rem;
    padding: 0.8rem;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
  }

  footer {
    text-align: center;
    padding: clamp(0.8rem, 3vw, 1rem);
    color: white;
    font-size: clamp(0.75rem, 3vw, 0.8rem);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }

  .footer-links {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .footer-separator {
    color: rgba(255, 255, 255, 0.5);
  }

  footer a {
    color: white;
    text-decoration: none;
    padding: 0.5rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 640px) {
    .login-button {
      width: 100%;
    }
  }
</style> 