{% extends "base.html" %}
{% block title %}Вход{% endblock %}
{% block content %}
<div class="max-w-md mx-auto bg-white dark:bg-slate-800/90 rounded-xl shadow border border-slate-200 dark:border-slate-600 p-8" x-data="loginForm()">
  <h1 class="text-2xl font-bold mb-6 text-slate-900 dark:text-white">Вход</h1>
  <form @submit.prevent="submit" class="space-y-4">
    <div>
      <label class="block text-sm text-slate-600 dark:text-slate-400 mb-1">Email</label>
      <input type="email" class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" x-model="email" required>
    </div>
    <div>
      <label class="block text-sm text-slate-600 dark:text-slate-400 mb-1">Пароль</label>
      <input type="password" class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" x-model="password" required>
    </div>
    <p class="text-sm text-rose-600" x-show="error" x-text="error"></p>
    {% if debug %}
    <p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
      Нет пользователя в MySQL? Создайте <code class="text-xs bg-slate-100 px-1 rounded">.env</code> с параметрами БД, затем
      <code class="text-xs bg-slate-100 px-1 rounded">python manage.py seed_demo_accounts</code>
      и войдите с email/паролем из вывода команды.
    </p>
    {% endif %}
    <button type="submit" class="w-full bg-sky-600 text-white py-2 rounded-lg hover:bg-sky-700" :disabled="loading">
      <span x-show="!loading">Войти</span>
      <span x-show="loading">…</span>
    </button>
  </form>
  <p class="mt-4 text-sm text-slate-600 dark:text-slate-400">
    <a href="/register/" class="text-sky-700 dark:text-sky-400 hover:underline">Регистрация</a>
    ·
    <a href="/reset-password/" class="text-sky-700 hover:underline">Забыли пароль?</a>
  </p>
</div>
<script>
function loginForm() {
  return {
    email: '', password: '', error: '', loading: false,
    async submit() {
      this.error = ''; this.loading = true;
      try {
        const r = await fetch('/api/auth/login/', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email: this.email, password: this.password })
        });

        let d = {};
        const contentType = r.headers.get('content-type') || '';
        if (!contentType.includes('application/json')) {
          this.error = `Ошибка сервера ${r.status}. Бэкенд вернул некорректный ответ`;
          return;
        }
        d = await r.json();

        if (!r.ok) {
          this.error = (d.detail && String(d.detail)) || (d.non_field_errors && d.non_field_errors[0]) || 'Ошибка входа';
          return;
        }

        localStorage.setItem('access', d.access);
        localStorage.setItem('refresh', d.refresh);
        let nextRole = null;
        const parts = d.access.split('.');
        if (parts[1]) {
          try {
            const payload = JSON.parse(atob(parts[1].replace(/-/g,'+').replace(/_/g,'/')));
            nextRole = payload.role || null;
            localStorage.setItem('payload', JSON.stringify({
              role: nextRole,
              email: payload.email || this.email
            }));
          } catch(e) {}
        }
        window.location.href = nextRole === 'teacher' ? '/teacher/' : '/dashboard/';
      } catch (err) {
        this.error = 'Не удалось связаться с сервером. Проверьте соединение.';
      } finally { this.loading = false; }
    }
  };
}


</script>
{% endblock %}