{% 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="regForm()">
  <h1 class="text-2xl font-bold mb-1 text-slate-900 dark:text-white">Регистрация</h1>
  <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Студент или преподаватель</p>
  <form @submit.prevent="submit" class="space-y-3">
    <fieldset class="space-y-2">
      <legend class="text-xs text-slate-600 dark:text-slate-400 mb-1">Роль</legend>
      <label class="flex items-center gap-2 text-sm cursor-pointer min-h-[44px]">
        <input type="radio" name="role" value="student" x-model="role" class="accent-sky-600">
        Студент
      </label>
      <label class="flex items-center gap-2 text-sm cursor-pointer min-h-[44px]">
        <input type="radio" name="role" value="teacher" x-model="role" class="accent-sky-600">
        Преподаватель
      </label>
    </fieldset>
    <div class="grid grid-cols-2 gap-2">
      <div>
        <label class="block text-xs text-slate-600 dark:text-slate-400 mb-1">Имя</label>
        <input class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" x-model="first_name" required>
      </div>
      <div>
        <label class="block text-xs text-slate-600 dark:text-slate-400 mb-1">Фамилия</label>
        <input class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" x-model="last_name" required>
      </div>
    </div>
    <div>
      <label class="block text-xs text-slate-600 dark:text-slate-400 mb-1">Отчество</label>
      <input class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" x-model="patronymic">
    </div>
    <div>
      <label class="block text-xs 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 text-sm bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" x-model="email" required>
    </div>
    <div x-show="role === 'student'" x-cloak>
      <label class="block text-xs text-slate-600 dark:text-slate-400 mb-1">Группа</label>
      <input class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" x-model="student_group" :required="role === 'student'">
    </div>
    <div x-show="role === 'teacher'" x-cloak>
      <label class="block text-xs text-slate-600 dark:text-slate-400 mb-1">Закреплённые группы студентов</label>
      <p class="text-xs text-slate-500 dark:text-slate-400 mb-1">По одной группе на строку (как в профиле студента).</p>
      <textarea
        class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 min-h-[100px]"
        x-model="managed_groups_raw"
        placeholder="БУ-41&#10;БУ-42"
      ></textarea>
    </div>
    <div>
      <label class="block text-xs 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 text-sm bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" x-model="password" required minlength="8">
    </div>
    <p class="text-sm text-rose-600" x-show="error" x-text="error"></p>
    <button type="submit" class="w-full bg-sky-600 text-white py-2.5 rounded-lg min-h-[44px]" :disabled="loading">Зарегистрироваться</button>
  </form>
  <p class="mt-4 text-sm text-slate-600 dark:text-slate-400"><a href="/login/" class="text-sky-700 dark:text-sky-400">Уже есть аккаунт</a></p>
</div>
<script>
function regForm() {
  return {
    role: 'student',
    first_name: '', last_name: '', patronymic: '', email: '', student_group: '', managed_groups_raw: '', password: '',
    error: '', loading: false,
    managedGroupsList() {
      return this.managed_groups_raw.split(/[\r\n,;]+/).map((s) => s.trim()).filter(Boolean);
    },
    async submit() {
      this.error = ''; this.loading = true;
      try {
        const payload = {
          first_name: this.first_name,
          last_name: this.last_name,
          patronymic: this.patronymic,
          email: this.email,
          password: this.password,
          role: this.role,
        };
        if (this.role === 'student') {
          payload.student_group = this.student_group;
        } else {
          payload.student_group = '';
          payload.managed_groups = this.managedGroupsList();
        }
        const r = await fetch('/api/auth/register/', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });
        const d = await r.json();
        if (!r.ok) {
          this.error = typeof d === 'object' ? (d.detail || JSON.stringify(d)) : String(d);
          return;
        }
        window.dispatchEvent(new CustomEvent('portfolio-toast', { detail: { msg: d.detail || 'Успешно' } }));
        window.location.href = '/login/';
      } finally { this.loading = false; }
    }
  };
}
</script>
{% endblock %}