import { route } from "../router.js";
import { Api } from "../kek.js";
import {
  saveSession,
  setTopUser,
  setLogoutVisible,
  formToJSON,
} from "../utils.js";

function loginView() {
  const card = document.createElement("div");
  card.className = "card";
  card.innerHTML = `
    <div class="card-header">Вход</div>
    <div class="card-body">
      <form id="login-form" class="form-grid" autocomplete="on">
        <div class="input"><label>Имя пользователя</label><input name="username" required /></div>
        <div class="input"><label>Пароль</label><input name="password" type="password" required /></div>
        <div class="actions">
          <button class="btn" type="submit">Войти</button>
          <a class="btn secondary" href="#/auth/register">Регистрация учителя</a>
        </div>
        <div id="login-error" class="error hidden"></div>
      </form>
    </div>`;
  const form = card.querySelector("#login-form");
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const { username, password } = Object.fromEntries(new FormData(form));
    try {
      const { session } = await Api.login({ username, password });
      saveSession(session);
      setTopUser(username);
      setLogoutVisible(true);
      location.hash = "#/dashboard";
    } catch (err) {
      const box = card.querySelector("#login-error");
      box.classList.remove("hidden");
      box.textContent = err.message || "Не удалось войти";
    }
  });
  return card;
}

function registerView() {
  const card = document.createElement("div");
  card.className = "card";
  card.innerHTML = `
    <div class="card-header">Регистрация учителя</div>
    <div class="card-body">
      <form id="reg-form" class="form-grid">
        <div class="input"><label>Имя</label><input name="имя" required></div>
        <div class="input"><label>Фамилия</label><input name="фамилия" required></div>
        <div class="input"><label>Отчество</label><input name="отчество" required></div>
        <div class="input"><label>Образование</label><input name="образование" required></div>
        <div class="input"><label>Пароль</label><input type="password" name="пароль" required></div>
        <div class="input"><label>Повтор пароля</label><input type="password" name="повтор пароля" required></div>
        <div class="actions"><button class="btn" type="submit">Создать</button></div>
        <div id="reg-msg" class="notice hidden"></div>
        <div id="reg-err" class="error hidden"></div>
      </form>
    </div>`;
  card.querySelector("#reg-form").addEventListener("submit", async (e) => {
    e.preventDefault();
    const payload = formToJSON(e.target);
    try {
      await Api.registerTeacher(payload);
      const msg = card.querySelector("#reg-msg");
      msg.classList.remove("hidden");
      msg.textContent = "Учитель создан. Теперь можно войти.";
      card.querySelector("#reg-err").classList.add("hidden");
    } catch (err) {
      const errBox = card.querySelector("#reg-err");
      errBox.classList.remove("hidden");
      errBox.textContent = err.message || "Ошибка регистрации";
    }
  });
  return card;
}

route("/auth/login", async ({ view }) => {
  view.appendChild(loginView());
});
route("/auth/register", async ({ view }) => {
  view.appendChild(registerView());
});