{#
  This file is part of g0v/OpenTransLive.
  Copyright (c) 2025 Sean Gau <rrtw0627@gmail.com>
  Licensed under the GNU AGPL v3.0
  See LICENSE for details.
-#}
{% extends "base.html" %}
{% block title %}VoiceRecord-System - Login{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-900 flex items-center justify-center px-4">
  <div class="w-full max-w-sm">
    <div class="mb-8 text-center">
      <h1 class="text-2xl font-bold text-gray-100 tracking-tight">VoiceRecord-System</h1>
      <p class="mt-1 text-sm text-gray-500">Sign in to continue</p>
    </div>

    <!-- Step 1: Email input -->
    <div id="step-email" class="auth-card">
      <label class="text-sm font-semibold text-gray-300" for="email-input">Email address</label>
      <input id="email-input" type="email" autocomplete="email" placeholder="you@example.com"
        class="auth-input placeholder-gray-600" />
      <div id="email-error" class="hidden text-xs text-red-400"></div>
      <button id="send-otp-btn" class="auth-btn">
        Send code
      </button>
    </div>

    <!-- Step 2: OTP input (hidden initially) -->
    <div id="step-otp" class="auth-card hidden">
      <div>
        <p class="text-sm font-semibold text-gray-300">Enter the 6-digit code</p>
        <p id="otp-hint" class="mt-1 text-xs text-gray-500"></p>
      </div>
      <input id="otp-input" type="text" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" placeholder="000000"
        class="auth-input text-2xl font-mono tracking-widest text-center py-3 placeholder-gray-700" />
      <div id="otp-error" class="hidden text-xs text-red-400"></div>
      <button id="verify-otp-btn" class="auth-btn">
        Verify
      </button>
      <button id="back-btn" class="text-xs text-gray-500 hover:text-gray-300 transition-colors text-center">
        Use a different email
      </button>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  const stepEmail = document.getElementById('step-email')
  const stepOtp = document.getElementById('step-otp')
  const emailInput = document.getElementById('email-input')
  const otpInput = document.getElementById('otp-input')
  const sendOtpBtn = document.getElementById('send-otp-btn')
  const verifyOtpBtn = document.getElementById('verify-otp-btn')
  const backBtn = document.getElementById('back-btn')
  const emailError = document.getElementById('email-error')
  const otpError = document.getElementById('otp-error')
  const otpHint = document.getElementById('otp-hint')

  let currentEmail = ''
  // Where to land after signing in (e.g. back to a panel); validated server-side.
  const nextPath = {{ next_path | tojson }}

  function showError(el, msg) {
    el.textContent = msg
    el.classList.remove('hidden')
  }

  function hideError(el) {
    el.classList.add('hidden')
    el.textContent = ''
  }

  sendOtpBtn.addEventListener('click', async () => {
    hideError(emailError)
    const email = emailInput.value.trim()
    if (!email) {
      showError(emailError, 'Please enter your email address.')
      return
    }
    sendOtpBtn.disabled = true
    sendOtpBtn.textContent = 'Sending...'
    try {
      const res = await fetch('/auth/send-otp', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email })
      })
      if (!res.ok) {
        const data = await res.json()
        showError(emailError, data.detail || 'Failed to send code.')
        return
      }
      currentEmail = email
      otpHint.textContent = `A 6-digit code was sent to ${email}.`
      stepEmail.classList.add('hidden')
      stepOtp.classList.remove('hidden')
      otpInput.focus()
    } catch (e) {
      showError(emailError, 'Network error. Please try again.')
    } finally {
      sendOtpBtn.disabled = false
      sendOtpBtn.textContent = 'Send code'
    }
  })

  emailInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') sendOtpBtn.click()
  })

  verifyOtpBtn.addEventListener('click', async () => {
    hideError(otpError)
    const otp = otpInput.value.trim()
    if (!/^\d{6}$/.test(otp)) {
      showError(otpError, 'Please enter the 6-digit code.')
      return
    }
    verifyOtpBtn.disabled = true
    verifyOtpBtn.textContent = 'Verifying...'
    try {
      const res = await fetch('/auth/verify-otp', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: currentEmail, otp, next: nextPath })
      })
      if (!res.ok) {
        const data = await res.json()
        showError(otpError, data.detail || 'Invalid or expired code.')
        return
      }
      const data = await res.json()
      window.location.href = data.redirect || '/'
    } catch (e) {
      showError(otpError, 'Network error. Please try again.')
    } finally {
      verifyOtpBtn.disabled = false
      verifyOtpBtn.textContent = 'Verify'
    }
  })

  otpInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') verifyOtpBtn.click()
  })

  backBtn.addEventListener('click', () => {
    hideError(otpError)
    otpInput.value = ''
    stepOtp.classList.add('hidden')
    stepEmail.classList.remove('hidden')
    emailInput.focus()
  })
</script>
{% endblock %}