import { route } from "../router.js";
import { Api } from "../kek.js";
import { el, $, loadSession } from "../utils.js";

function needSession() {
  const s = loadSession();
  if (!s) location.hash = "#/auth/login";
  return s;
}

function studentDashboard(session) {
  const card = el("div", { class: "card" }, [
    el("div", { class: "card-header" }, "Дневник ученика"),
    el("div", { class: "card-body" }, [
      (() => {
        const box = el("div", { class: "form-grid" });
        box.innerHTML = `
          <div class="input"><label>ID класса</label><input id="st-class-id" type="number" min="1"></div>
          <div class="input"><label>Дата</label><input id="st-date" type="date"></div>
          <div class="actions" style="align-self:end"><button id="st-load" class="btn" type="button">Показать</button></div>`;
        return box;
      })(),
      el("table", { class: "table", id: "st-lessons" }, [
        el(
          "thead",
          {},
          el("tr", {}, [
            el("th", {}, "Дата"),
            el("th", {}, "Предмет/тема"),
            el("th", {}, "Домашнее задание"),
          ])
        ),
        el("tbody"),
      ]),
    ]),
  ]);

  async function refresh() {
    const classId = Number($("#st-class-id", card)?.value || 0);
    const date = $("#st-date", card)?.value || undefined;
    if (!classId) return;
    const { data } = await Api.listLessons(session, classId, date);
    const tbody = card.querySelector("tbody");
    tbody.innerHTML = "";
    for (const l of data?.["уроки"] || []) {
      const tr = el("tr");
      tr.appendChild(el("td", {}, l["дата"] || ""));
      tr.appendChild(el("td", {}, l["название"] || ""));
      tr.appendChild(el("td", {}, l["домашнее задание"] || ""));
      tbody.appendChild(tr);
    }
  }

  card.querySelector("#st-load")?.addEventListener("click", refresh);
  return card;
}

function changePasswordView(session) {
  const card = el("div", { class: "card" }, [
    el("div", { class: "card-header" }, "Смена пароля"),
    el("div", { class: "card-body" }, [
      (() => {
        const form = el("form", { class: "form-grid" });
        form.innerHTML = `
          <div class="input"><label>Новый пароль</label><input name="password" type="password" required></div>
          <div class="actions"><button class="btn">Изменить</button></div>
          <div id="pw-msg" class="notice hidden"></div>
          <div id="pw-err" class="error hidden"></div>`;
        form.addEventListener("submit", async (e) => {
          e.preventDefault();
          const newPassword = new FormData(form).get("password");
          try {
            await Api.changePassword(session, newPassword);
            const msg = form.querySelector("#pw-msg");
            msg.classList.remove("hidden");
            msg.textContent = "Пароль изменён";
            form.querySelector("#pw-err").classList.add("hidden");
          } catch (err) {
            const box = form.querySelector("#pw-err");
            box.classList.remove("hidden");
            box.textContent = err.message || "Не удалось изменить пароль";
          }
        });
        return form;
      })(),
    ]),
  ]);
  return card;
}

route("/student/dashboard", async ({ view }) => {
  const s = needSession();
  view.appendChild(studentDashboard(s));
});
route("/student/password", async ({ view }) => {
  const s = needSession();
  view.appendChild(changePasswordView(s));
});