(function () {
  const drop = document.getElementById("drop"), input = document.getElementById("file");
  const inner = document.getElementById("drop-inner"), info = document.getElementById("finfo");
  const form = document.getElementById("meta"), draftsEl = document.getElementById("drafts");
  let current = null;

  const mb = b => (b / 1048576).toFixed(1).replace(".", ",") + " МБ";
  function pick(file) {
    if (!file) return;
    if (!file.type.startsWith("video/")) { SK.toast("Это не видеофайл. Нужен MP4, MOV или WebM."); return; }
    if (file.size > 2 * 1024 ** 3) { SK.toast("Файл больше 2 ГБ. Для таких нужен тариф «Шкаф»."); return; }
    current = file;
    const url = URL.createObjectURL(file);
    inner.innerHTML = `<video src="${url}" controls muted playsinline></video><span class="muted" style="display:block;margin-top:10px">Нажмите, чтобы выбрать другой файл</span>`;
    const vid = inner.querySelector("video");
    vid.addEventListener("loadedmetadata", () => {
      const w = vid.videoWidth, h = vid.videoHeight, r = w / h;
      const ratio = Math.abs(r - 1) < 0.08 ? "1:1" : r < 1 ? "9:16" : "16:9";
      form.querySelector(`input[name=r][value="${ratio}"]`).checked = true;
      info.hidden = false;
      info.innerHTML = `<dt>Файл</dt><dd>${SK.esc(file.name)}</dd><dt>Размер</dt><dd>${mb(file.size)}</dd>
        <dt>Кадр</dt><dd>${w}×${h}, ${ratio}</dd><dt>Длительность</dt><dd>${SK.dur(vid.duration)}</dd>`;
      const t = document.getElementById("t");
      if (!t.value) t.value = file.name.replace(/\.[^.]+$/, "").replace(/[_-]+/g, " ");
    });
  }
  input.addEventListener("change", () => pick(input.files[0]));
  drop.addEventListener("keydown", e => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); input.click(); } });
  ["dragenter", "dragover"].forEach(ev => drop.addEventListener(ev, e => { e.preventDefault(); drop.classList.add("over"); }));
  ["dragleave", "drop"].forEach(ev => drop.addEventListener(ev, e => { e.preventDefault(); drop.classList.remove("over"); }));
  drop.addEventListener("drop", e => pick(e.dataTransfer.files[0]));

  const load = () => { try { return JSON.parse(localStorage.getItem("sk-drafts")) || []; } catch (e) { return []; } };
  function renderDrafts() {
    const d = load();
    draftsEl.innerHTML = d.length ? `<strong>Черновики в этом браузере</strong><ul style="padding-left:18px;margin:8px 0 0">${d.map((x, i) =>
      `<li>${SK.esc(x.title)} <span class="muted">${SK.esc(x.file || "без файла")}, ${x.ratio}</span> <button type="button" class="btn ghost small" data-del="${i}" style="height:26px;padding:0 8px;margin-left:6px">Удалить</button></li>`).join("")}</ul>` : "";
  }
  draftsEl.addEventListener("click", e => {
    const b = e.target.closest("[data-del]"); if (!b) return;
    const d = load(); d.splice(+b.dataset.del, 1);
    try { localStorage.setItem("sk-drafts", JSON.stringify(d)); } catch (err) {}
    renderDrafts(); SK.toast("Черновик удалён");
  });
  form.addEventListener("submit", e => {
    e.preventDefault();
    const title = document.getElementById("t").value.trim();
    if (!title) { document.getElementById("t").focus(); return; }
    const d = load();
    d.unshift({ title, file: current ? current.name : "", ratio: form.querySelector("input[name=r]:checked").value });
    try { localStorage.setItem("sk-drafts", JSON.stringify(d.slice(0, 10))); } catch (err) {}
    renderDrafts(); SK.toast("Черновик сохранён");
  });
  document.getElementById("publish").addEventListener("click", () => {
    if (!current) { SK.toast("Сначала выберите видеофайл"); return; }
    SK.toast("Публикация доступна после входа. Черновик можно сохранить уже сейчас.");
  });
  renderDrafts();
})();