{% extends "_base.html" %}

{% block title %}Sign in{% endblock %}

{% block styles %}
<link rel="stylesheet" href="/static/css/auth.css?v={{ static_hash('css/auth.css') }}">
{% endblock %}

{% block header %}{% endblock %}

{% block content %}
<div class="auth-branding">
  <img src="/static/physicar-ai-logo.png" alt="Physicar AI" class="auth-logo">
  <p class="auth-branding-desc">Sign in to your Physicar AI account</p>
</div>
<div class="auth-page">

  <!-- Login form -->
  <div id="auth-login-section">
    <form id="login-form" onsubmit="handleLogin(event)">
      <div class="auth-form-group" data-field="email">
        <label for="login-email">Email</label>
        <input type="email" name="email" id="login-email" required maxlength="254" autocomplete="email" />
      </div>
      <div class="auth-form-group" data-field="password">
        <label for="login-password">Password</label>
        <input type="password" name="password" id="login-password" required maxlength="128" autocomplete="current-password" />
      </div>
      <div id="classroom-invite-section" class="classroom-invite-section" style="display: none;">
        <p class="classroom-invite-msg"></p>
        <div class="auth-form-group" data-field="invite_code">
          <label for="login-invite-code">Classroom Invite Code</label>
          <input type="text" name="invite_code" id="login-invite-code" placeholder="12-character invite code" autocomplete="off" maxlength="20" />
        </div>
      </div>
      <button type="submit" class="auth-submit-btn" data-original-text="Sign in">Sign in</button>
    </form>
    <div class="auth-resend-notice" id="resend-notice" style="display: none;">
      <p>Please verify your email to sign in.</p>
      <a href="javascript:void(0)" onclick="handleResendVerification()">Resend verification email</a>
    </div>
    <div class="auth-links">
      <a href="/pages/auth/forgot-password">Forgot password?</a>
      <a href="/pages/auth/signup">Don't have an account? Sign up</a>
    </div>
  </div>

  <!-- Forgot password section -->
  <div id="auth-forgot-section" style="display: none;">
    <p class="auth-page-desc">Enter your email and we'll send you a password reset link.</p>
    <form id="forgot-form" onsubmit="handleForgotPassword(event)">
      <div class="auth-form-group" data-field="email">
        <label for="forgot-email">Email</label>
        <input type="email" name="email" id="forgot-email" required maxlength="254" autocomplete="email" />
      </div>
      <button type="submit" class="auth-submit-btn" data-original-text="Send reset link">Send reset link</button>
    </form>
    <div class="auth-links">
      <a href="javascript:void(0)" onclick="showSection('login')">Back to sign in</a>
    </div>
  </div>

  <!-- Password reset section -->
  <div id="auth-reset-section" style="display: none;">
    <form id="reset-form" onsubmit="handleResetPassword(event)">
      <div class="auth-form-group" data-field="password">
        <label for="reset-password">New password</label>
        <input type="password" name="password" id="reset-password" required minlength="8" maxlength="128" autocomplete="new-password" />
        <span class="auth-hint">At least 8 characters</span>
      </div>
      <div class="auth-form-group" data-field="password_confirm">
        <label for="reset-password-confirm">Confirm password</label>
        <input type="password" name="password_confirm" id="reset-password-confirm" required maxlength="128" autocomplete="new-password" />
      </div>
      <button type="submit" class="auth-submit-btn" data-original-text="Change password">Change password</button>
    </form>
  </div>

</div>

<script>
// Handle URL parameters
(function() {
  var params = new URLSearchParams(window.location.search);

  var resetToken = params.get('reset');
  if (resetToken) {
    window.resetPasswordToken = resetToken;
    showSection('reset');
  }

  var authSuccess = params.get('auth_success');
  if (authSuccess) {
    window.history.replaceState({}, '', window.location.pathname);
    if (authSuccess === 'EMAIL_VERIFIED') {
      setTimeout(function() { alert('Email verified. Please sign in.'); }, 100);
    }
  }

  var authError = params.get('auth_error');
  if (authError) {
    window.history.replaceState({}, '', window.location.pathname);
    setTimeout(function() { alert('Email verification failed.'); }, 100);
  }

  var redirect = params.get('redirect');
  if (redirect) sessionStorage.setItem('physicar_auth_redirect', redirect);
})();
</script>
{% endblock content %}