{% extends 'layouts/auth_base.html' %}
{% load static %}

{% block title %}Login - Stream Processor{% endblock %}

{% block content %}
<div class="min-vh-100 d-flex align-items-center justify-content-center bg-light px-3">
  <div class="w-100" style="max-width: 380px;">
    <div class="text-center mb-4">
      <div class="mx-auto d-flex align-items-center justify-content-center rounded-circle bg-primary-subtle" style="height:56px;width:56px;">
        <i class="fas fa-stream text-primary fs-4"></i>
      </div>
      <h1 class="h4 fw-semibold mt-3 mb-1">Welcome back</h1>
      <p class="text-secondary small mb-0">Sign in to Stream Processor</p>
    </div>

    <form id="loginForm" method="post" novalidate class="card shadow-sm border-0"
          hx-post="{% url 'authentication:login' %}"
          hx-target="#login-response"
          hx-swap="innerHTML"
          hx-indicator="#login-loading"
          hx-ext="loading-states">
      {% csrf_token %}
      <input type="hidden" name="remember" value="true">
      <div class="card-body p-4">
        
        <!-- Response Container -->
        <div id="login-response"></div>
        
        <!-- Loading Indicator -->
        <div id="login-loading" class="htmx-indicator text-center mb-3">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Signing in...</span>
          </div>
          <div class="mt-2 text-muted small">Authenticating...</div>
        </div>

        <div class="mb-3">
          <label for="id_username" class="form-label">Username</label>
          <div class="input-group">
            <span class="input-group-text"><i class="fas fa-user"></i></span>
            <input id="id_username" name="username" type="text" autocomplete="username" required
                   class="form-control" placeholder="e.g. johndoe"
                   value="{{ form.username.value|default:'' }}"
                   hx-post="{% url 'authentication:validate_username' %}"
                   hx-trigger="blur, keyup changed delay:500ms"
                   hx-target="#username-feedback"
                   hx-swap="innerHTML">
          </div>
          <div id="username-feedback" class="form-text"></div>
        </div>

        <div class="mb-2">
          <label for="id_password" class="form-label">Password</label>
          <div class="input-group">
            <span class="input-group-text"><i class="fas fa-key"></i></span>
            <input id="id_password" name="password" type="password" autocomplete="current-password" required
                   class="form-control" placeholder="••••••••"
                   hx-post="{% url 'authentication:validate_password' %}"
                   hx-trigger="blur, keyup changed delay:500ms"
                   hx-target="#password-feedback"
                   hx-swap="innerHTML">
            <button class="btn btn-outline-secondary" type="button" id="togglePwd" aria-label="Show password">
              <i class="fas fa-eye"></i>
            </button>
          </div>
          <div id="capsHint" class="form-text text-warning d-none">
            <i class="fas fa-exclamation-triangle me-1"></i>Caps Lock is on
          </div>
          <div id="password-feedback" class="form-text"></div>
        </div>

        <div class="d-flex justify-content-between align-items-center mb-4">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="rememberMe" checked>
            <label class="form-check-label small" for="rememberMe">Remember me</label>
          </div>
          <a href="#" class="small text-decoration-none">Forgot password?</a>
        </div>

        <!-- Enhanced Submit Button with HTMX Loading States -->
        <button id="loginBtn" type="submit" 
                class="btn btn-primary w-100 d-flex justify-content-center align-items-center"
                data-loading-disable
                data-loading-class="disabled"
                data-loading-text="Signing in...">
          <span class="btn-content">
            <i class="fas fa-right-to-bracket me-2"></i>Sign in
          </span>
          <span class="htmx-indicator">
            <span class="spinner-border spinner-border-sm ms-2" role="status" aria-hidden="true"></span>
          </span>
        </button>

      </div>
    </form>

    <p class="text-center text-secondary small mt-3 mb-0">
      Need access? Contact your administrator.
    </p>
  </div>
</div>

<!-- SweetAlert toast helper (bottom-right, 30s, no buttons) -->
<script>
  function showToast(icon, content) {
    Swal.fire({
      toast: true,
      position: 'bottom-end',
      icon: icon,              // 'success' | 'error' | 'warning' | 'info' | 'question'
      html: content,           // accepts plain text or HTML string
      showConfirmButton: false,
      timer: 5000,             // 5 seconds
      timerProgressBar: true,
    });
  }
</script>

<script>
  (function () {
    const form = document.getElementById('loginForm');
    const btn  = document.getElementById('loginBtn');
    const btnText = document.getElementById('btnText');
    const btnSpinner = document.getElementById('btnSpinner');
    const pwd  = document.getElementById('id_password');
    const usr  = document.getElementById('id_username');
    const caps = document.getElementById('capsHint');
    const togglePwd = document.getElementById('togglePwd');

    // Show/hide password
    togglePwd.addEventListener('click', () => {
      const isText = pwd.type === 'text';
      pwd.type = isText ? 'password' : 'text';
      togglePwd.innerHTML = isText ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
    });

    // Caps lock hint
    ['keydown','keyup'].forEach(ev => {
      pwd.addEventListener(ev, (e) => {
        if (e.getModifierState && e.getModifierState('CapsLock')) {
          caps.classList.remove('d-none');
        } else {
          caps.classList.add('d-none');
        }
      });
    });

    // Submit with button spinner; validation toasts bottom-right
    form.addEventListener('submit', (e) => {
      const u = usr.value.trim();
      const p = pwd.value.trim();
      if (!u || !p) {
        e.preventDefault();
        const msg = !u && !p ? 'Enter username & password' : (!u ? 'Enter username' : 'Enter password');
        showToast('warning', msg);
        return;
      }
      // Disable button + show spinner
      btn.disabled = true;
      btnText.textContent = 'Signing in…';
      btnSpinner.classList.remove('d-none');
    });
  })();
</script>

{% if form.errors %}
<script>
  const errHtml = ` 
      {% for field, errors in form.errors.items %}
        {% for error in errors %}
           {{ error|escape }}</br>
        {% endfor %}
      {% endfor %}`;
  showToast('error', 'Authentication failed:' + errHtml);
</script>
{% endif %}

{% if messages %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const tagToIcon = { success:'success', info:'info', warning:'warning', error:'error', danger:'error' };
    {% for message in messages %}
    showToast(tagToIcon['{{ message.tags|default:"info" }}'] || 'info', '{{ message|escapejs }}');
    {% endfor %}
  });
</script>
{% endif %}
{% endblock %}

{% block extra_head %}
<style>
  .sidebar, .header, nav { display: none !important; }
  .main-content { margin-left: 0 !important; padding-top: 0 !important; }

  body { background-color: #f9fafb; }
  :root{ --bs-primary: #3b82f6; --bs-primary-rgb: 59,130,246; }
  .btn-primary:hover, .btn-primary:focus{ background-color:#2563eb; border-color:#2563eb; }
  .btn-primary:active, .btn-primary.active{ background-color:#1d4ed8 !important; border-color:#1d4ed8 !important; }
  .bg-primary-subtle{ background-color:#eff6ff !important; }
</style>
{% endblock %}