{% extends "base.html" %}
{% block content %}
<form id="login" class="max-w-sm mx-auto bg-white p-6 rounded-lg border space-y-4">
  <h2 class="text-lg font-semibold">Sign in</h2>

  {% if google_enabled %}
  <a href="/auth/google/start"
     class="w-full flex items-center justify-center gap-2 rounded border border-gray-300 bg-white py-2 font-medium text-gray-700 hover:bg-gray-50">
    <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true"><path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3l5.7-5.7C34.4 6 29.5 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.2-.1-2.4-.4-3.5z"/><path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.6 16 18.9 13 24 13c3.1 0 5.8 1.2 7.9 3l5.7-5.7C34.4 7 29.5 5 24 5 16.1 5 9.3 9.4 6.3 14.7z"/><path fill="#4CAF50" d="M24 43c5.3 0 10.2-2 13.9-5.3l-6.4-5.2c-2 1.4-4.6 2.5-7.5 2.5-5.2 0-9.6-3.3-11.2-7.9l-6.5 5C9.2 38.5 16 43 24 43z"/><path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.3-2.3 4.3-4.3 5.7l6.4 5.2c-.4.4 6.9-5 6.9-15 0-1.2-.1-2.4-.4-3.5z"/></svg>
    Sign in with Google
  </a>
  <div class="text-center text-xs text-gray-500">or</div>
  {% endif %}

  <label class="block">
    <span class="block text-sm font-medium text-gray-700">Email</span>
    <input required type="email" name="email" autocomplete="email"
           class="mt-1 w-full rounded border-gray-300 px-3 py-2 border">
  </label>

  <label class="block">
    <span class="block text-sm font-medium text-gray-700">Password</span>
    <input required type="password" name="password" autocomplete="current-password"
           class="mt-1 w-full rounded border-gray-300 px-3 py-2 border">
  </label>

  <p id="error" class="text-sm text-red-600 hidden"></p>

  <button type="submit"
          class="w-full rounded bg-black text-white py-2 font-medium disabled:opacity-50">
    Sign in
  </button>

  <p class="text-center text-xs">
    <a href="/forgot-password" class="text-gray-500 hover:text-black underline">
      Forgot your password?
    </a>
  </p>
</form>

<script>
// If we just came back from /auth/google/callback, the JWT lands in the URL
// fragment (#token=…) — pull it out, stash it, clean the URL, redirect.
if (window.location.hash.startsWith('#token=')) {
  const token = decodeURIComponent(window.location.hash.slice('#token='.length));
  localStorage.setItem('parbaked_token', token);
  window.location.replace('/dashboard');
}
// Surface the ?error= from the OAuth redirect path
const params = new URLSearchParams(window.location.search);
if (params.get('error')) {
  const err = document.getElementById('error');
  err.textContent = ({
    'google_cancelled': 'Google sign-in was cancelled.',
    'pending_approval': 'Your account is awaiting admin approval.',
    'account_rejected': 'Your account was not approved.',
  })[params.get('error')] || params.get('error');
  err.classList.remove('hidden');
}

const form = document.getElementById('login');
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(form));
  const btn = form.querySelector('button');
  const err = document.getElementById('error');
  btn.disabled = true;
  err.classList.add('hidden');
  try {
    const res = await fetch('/auth/login', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data),
    });
    if (!res.ok) {
      const body = await res.json().catch(() => ({}));
      err.textContent = body.detail || `Login failed (${res.status})`;
      err.classList.remove('hidden');
    } else {
      const data = await res.json();
      localStorage.setItem('parbaked_token', data.token);
      window.location = '/dashboard';
    }
  } finally {
    btn.disabled = false;
  }
});
</script>
{% endblock %}