/* Celena Admin — media picker.
 * Одиночный выбор:   <button data-media-picker="#input-id" data-media-preview="#preview-id">
 * Множественный:     добавьте data-media-multi="1" — тогда модалка позволяет выбрать несколько
 *                    и кидает событие 'celena:media-picked' (detail: string[]) на кнопку.
 *                    Для input хранит JSON-массив URL.
 */
(function () {
  'use strict';
  var meta = document.querySelector('meta[name="csrf-token"]');
  var CSRF = meta ? meta.content : '';

  function buildModal(targetInput, triggerBtn) {
    var isMulti = !!(triggerBtn && triggerBtn.hasAttribute('data-media-multi'));
    var selected = [];

    var wrap = document.createElement('div');
    wrap.className = 'cm-modal';
    wrap.innerHTML =
      '<div class="cm-backdrop"></div>' +
      '<div class="cm-dialog">' +
        '<header class="cm-head">' +
          '<h3>' + (isMulti ? 'Выбрать изображения' : 'Выбрать изображение') + '</h3>' +
          '<button type="button" class="cm-close" aria-label="Закрыть">×</button>' +
        '</header>' +
        '<div class="cm-tabs">' +
          '<button type="button" class="cm-tab active" data-tab="library">Библиотека</button>' +
          '<button type="button" class="cm-tab" data-tab="upload">Загрузить</button>' +
        '</div>' +
        '<div class="cm-body">' +
          '<div class="cm-pane cm-pane-library active"><div class="cm-loading">Загрузка…</div></div>' +
          '<div class="cm-pane cm-pane-upload">' +
            '<label class="cm-drop">' +
              '<input type="file" accept="image/*"' + (isMulti ? ' multiple' : '') + '>' +
              '<div>Перетащите файл' + (isMulti ? 'ы' : '') + ' сюда или кликните, чтобы выбрать. До 20 МБ на файл.</div>' +
            '</label>' +
            '<div class="cm-upload-status"></div>' +
          '</div>' +
        '</div>' +
        (isMulti ?
          '<div class="cm-actions">' +
            '<span class="muted cm-counter" style="margin-right:auto">Выбрано: 0</span>' +
            '<button type="button" class="btn btn-secondary cm-cancel">Отмена</button>' +
            '<button type="button" class="btn btn-primary cm-confirm" disabled>Добавить</button>' +
          '</div>'
          : '') +
      '</div>';
    document.body.appendChild(wrap);

    var close = function () { wrap.remove(); };
    wrap.querySelector('.cm-close').addEventListener('click', close);
    wrap.querySelector('.cm-backdrop').addEventListener('click', close);

    wrap.querySelectorAll('.cm-tab').forEach(function (tab) {
      tab.addEventListener('click', function () {
        wrap.querySelectorAll('.cm-tab').forEach(function (t) { t.classList.remove('active'); });
        wrap.querySelectorAll('.cm-pane').forEach(function (p) { p.classList.remove('active'); });
        tab.classList.add('active');
        wrap.querySelector('.cm-pane-' + tab.getAttribute('data-tab')).classList.add('active');
      });
    });

    function apply(urls) {
      if (!targetInput) { close(); return; }
      if (isMulti) {
        var current = [];
        try { current = JSON.parse(targetInput.value || '[]'); if (!Array.isArray(current)) current = []; }
        catch (e) { current = []; }
        var merged = current.concat(urls);
        targetInput.value = JSON.stringify(merged);
        targetInput.dispatchEvent(new Event('change', { bubbles: true }));
        triggerBtn.dispatchEvent(new CustomEvent('celena:media-picked', { detail: urls, bubbles: true }));
      } else {
        var url = urls[0];
        targetInput.value = url;
        targetInput.dispatchEvent(new Event('change', { bubbles: true }));
        var previewSel = triggerBtn && triggerBtn.getAttribute('data-media-preview');
        var prev = previewSel ? document.querySelector(previewSel) : null;
        if (!prev && targetInput.parentNode) prev = targetInput.parentNode.querySelector('.media-preview');
        if (prev) prev.innerHTML = '<img src="' + url + '" alt="">';
      }
      close();
    }

    function updateCounter() {
      var c = wrap.querySelector('.cm-counter');
      var btn = wrap.querySelector('.cm-confirm');
      if (c) c.textContent = 'Выбрано: ' + selected.length;
      if (btn) btn.disabled = selected.length === 0;
    }

    if (isMulti) {
      wrap.querySelector('.cm-cancel').addEventListener('click', close);
      wrap.querySelector('.cm-confirm').addEventListener('click', function () {
        if (selected.length > 0) apply(selected.slice());
      });
    }

    var libPane = wrap.querySelector('.cm-pane-library');
    fetch('/admin/media/pick', { credentials: 'same-origin', headers: { 'X-CSRF-Token': CSRF } })
      .then(function (r) { return r.json(); })
      .then(function (j) {
        if (!j.items || !j.items.length) {
          libPane.innerHTML = '<p class="muted" style="text-align:center;padding:20px">Нет загруженных изображений. Перейдите на вкладку «Загрузить».</p>';
          return;
        }
        var grid = document.createElement('div');
        grid.className = 'cm-grid';
        j.items.forEach(function (it) {
          var cell = document.createElement('button');
          cell.type = 'button';
          cell.className = 'cm-cell';
          cell.innerHTML = '<img src="' + it.url + '" alt="" loading="lazy"><span>' + (it.name || '') + '</span>';
          cell.addEventListener('click', function () {
            if (isMulti) {
              var idx = selected.indexOf(it.url);
              if (idx >= 0) { selected.splice(idx, 1); cell.classList.remove('selected'); }
              else { selected.push(it.url); cell.classList.add('selected'); }
              updateCounter();
            } else {
              apply([it.url]);
            }
          });
          grid.appendChild(cell);
        });
        libPane.innerHTML = '';
        libPane.appendChild(grid);
      })
      .catch(function () {
        libPane.innerHTML = '<p class="muted">Ошибка загрузки.</p>';
      });

    var uploadInput = wrap.querySelector('.cm-pane-upload input[type=file]');
    var status = wrap.querySelector('.cm-upload-status');
    uploadInput.addEventListener('change', function () {
      if (!uploadInput.files.length) return;
      var files = Array.from(uploadInput.files);
      var uploaded = [];
      status.textContent = 'Загрузка 0/' + files.length + '…';
      function next(i) {
        if (i >= files.length) {
          if (uploaded.length === 0) { status.textContent = 'Не удалось загрузить.'; return; }
          if (isMulti) {
            selected = selected.concat(uploaded);
            status.textContent = 'Загружено ' + uploaded.length + '. Нажмите «Добавить».';
            updateCounter();
            wrap.querySelector('.cm-tab[data-tab="library"]').click();
          } else {
            apply([uploaded[0]]);
          }
          return;
        }
        status.textContent = 'Загрузка ' + (i + 1) + '/' + files.length + '…';
        var fd = new FormData();
        fd.append('file', files[i]);
        fd.append('_csrf', CSRF);
        fetch('/admin/media/upload', {
          method: 'POST', body: fd, credentials: 'same-origin',
          headers: { 'X-CSRF-Token': CSRF }
        }).then(function (r) { return r.json(); })
          .then(function (j) { if (j.ok) uploaded.push(j.url); next(i + 1); })
          .catch(function () { next(i + 1); });
      }
      next(0);
    });
  }

  document.addEventListener('click', function (e) {
    var btn = e.target.closest('[data-media-picker]');
    if (!btn) return;
    e.preventDefault();
    var target = document.querySelector(btn.getAttribute('data-media-picker'));
    if (!target) return;
    buildModal(target, btn);
  });
})();
