<%- include('../partials/head', { pageTitle: 'Login - ' + settings.storeName }) %>

<div class="auth-page-wrap">
  <div class="auth-card">
    <a href="/" class="auth-back-home"><i class="fa-solid fa-arrow-left"></i> Kembali ke Home</a>

    <div class="auth-logo-row">
      <img src="<%= settings.logo %>" alt="" onerror="this.style.display='none'">
      <span class="store-name"><%= settings.storeName %></span>
    </div>

    <h1 class="auth-title">Masuk ke Akun</h1>
    <p class="auth-subtitle">Login untuk melihat riwayat pembelian key kamu</p>

    <% if (error) { %>
      <div class="auth-error"><i class="fa-solid fa-circle-exclamation"></i> <%= error %></div>
    <% } %>

    <div class="google-signin-wrap">
      <div id="g_id_onload"
        data-client_id="<%= googleClientId %>"
        data-callback="handleGoogleCredentialResponse"
        data-auto_prompt="false">
      </div>
      <div class="g_id_signin"
        data-type="standard"
        data-shape="pill"
        data-theme="filled_black"
        data-text="signin_with"
        data-size="large"
        data-logo_alignment="left">
      </div>
    </div>

    <div class="auth-divider">atau login dengan email</div>

    <form action="/login" method="POST">
      <div class="form-group">
        <label class="form-label"><i class="fa-solid fa-envelope"></i> Email</label>
        <div class="input-with-icon">
          <i class="fa-solid fa-envelope"></i>
          <input type="email" name="email" class="form-input" placeholder="email@example.com" required>
        </div>
      </div>

      <div class="form-group">
        <label class="form-label"><i class="fa-solid fa-lock"></i> Password</label>
        <div class="input-with-icon">
          <i class="fa-solid fa-lock"></i>
          <input type="password" name="password" id="loginPassword" class="form-input" placeholder="Masukkan password" required>
          <button type="button" class="password-toggle" onclick="togglePassword('loginPassword', this)">
            <i class="fa-solid fa-eye"></i>
          </button>
        </div>
      </div>

      <a href="/forgot-password" class="auth-forgot-link">Lupa Password?</a>

      <button type="submit" class="btn-full-gold">
        <i class="fa-solid fa-right-to-bracket"></i> Masuk
      </button>
    </form>

    <p class="auth-footer-text">Belum punya akun? <a href="/register">Daftar sekarang</a></p>
  </div>
</div>

<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
  function togglePassword(id, btn) {
    const input = document.getElementById(id);
    const icon = btn.querySelector('i');
    if (input.type === 'password') {
      input.type = 'text';
      icon.className = 'fa-solid fa-eye-slash';
    } else {
      input.type = 'password';
      icon.className = 'fa-solid fa-eye';
    }
  }

  function handleGoogleCredentialResponse(response) {
    fetch('/auth/google', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ credential: response.credential })
    })
    .then(res => res.json())
    .then(data => {
      if (data.success) {
        window.location.href = data.redirect || '/';
      } else {
        alert(data.message || 'Login Google gagal');
      }
    })
    .catch(() => alert('Terjadi kesalahan, coba lagi.'));
  }
</script>
</body>
</html>
