(function() {
  var template = document.getElementById('board-card-template');
  var addCardButtons = document.querySelectorAll('.board-column-add-card');

  var ICONS_BASE = '/static/icons/';
  var ICON_LIST = ['cloud.svg', 'cloud-filled.svg', 'cloud-storm.svg', 'cloud-down.svg', 'cloud-up.svg'];
  var CLOUD_ICON_URL = ICONS_BASE + 'cloud.svg';

  function preloadIcons() {
    ICON_LIST.forEach(function(name) {
      var img = new Image();
      img.src = ICONS_BASE + name;
    });
  }

  function assignCloudIconToCard(card) {
    var icon = card && card.querySelector && card.querySelector('.board-card-icon');
    if (icon) icon.setAttribute('data-icon', 'cloud');
  }

  function assignCloudIconToAllCards() {
    document.querySelectorAll('.board-card').forEach(assignCloudIconToCard);
  }

  preloadIcons();
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', assignCloudIconToAllCards);
  } else {
    assignCloudIconToAllCards();
  }

  function addDefaultCard(ev) {
    if (!template || !template.content) return;
    var column = ev.currentTarget.closest('.board-column');
    var cardsContainer = column && column.querySelector('.board-column-cards');
    if (!cardsContainer) return;
    var clone = template.content.cloneNode(true);
    var card = clone.querySelector && clone.querySelector('.board-card');
    if (card) {
      var titleEl = card.querySelector('.board-card-title');
      if (titleEl) titleEl.textContent = 'New task';
      assignCloudIconToCard(card);
    }
    cardsContainer.appendChild(clone);
    var badge = column.querySelector('.board-column-add-card');
    if (badge) {
      var n = cardsContainer.querySelectorAll('.board-card').length;
      badge.textContent = n;
    }
  }

  addCardButtons.forEach(function(btn) {
    btn.addEventListener('click', addDefaultCard);
  });

  var boardColumns = document.querySelector('.board-columns');
  var dropzones = document.querySelectorAll('.board-column.dropzone');
  var draggedCard = null;
  var didDrag = false;

  function updateColumnBadge(column) {
    var cardsContainer = column && column.querySelector('.board-column-cards');
    var badge = column && column.querySelector('.board-column-add-card');
    if (badge && cardsContainer) {
      badge.textContent = cardsContainer.querySelectorAll('.board-card').length;
    }
  }

  function handleDragStart(e) {
    var card = e.target.closest && e.target.closest('.board-card');
    if (!card) return;
    didDrag = true;
    draggedCard = card;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', card.dataset.taskRef || '');
    card.classList.add('opacity-50');
  }
  function handleDragEnd(e) {
    var card = e.target.closest && e.target.closest('.board-card');
    if (card) card.classList.remove('opacity-50');
    draggedCard = null;
    setTimeout(function() { didDrag = false; }, 0);
  }

  /** Parse display date text to YYYY-MM-DD for input[type=date]. Returns '' if none. */
  function parseDateForInput(text) {
    if (!text || text.trim() === 'None') return '';
    var s = text.trim();
    var m = s.match(/^(\d{4})-(\d{2})-(\d{2})/);
    return m ? m[0] : '';
  }

  function setupPopoutEditables(popoutCard) {
    var titleEl = popoutCard.querySelector('.board-card-title');
    var descEl = popoutCard.querySelector('.board-card-description-full');
    var dueEl = popoutCard.querySelector('.board-card-due-date');
    var statusEl = popoutCard.querySelector('.board-card-status');
    var priorityEl = popoutCard.querySelector('.board-card-priority');

    if (titleEl) titleEl.classList.add('board-card-editable');
    function commitTitle() {
      var input = popoutCard.querySelector('.board-card-title-edit');
      if (!input) return;
      var val = (input.value || '').trim() || 'Untitled';
      titleEl.textContent = val;
      titleEl.classList.remove('d-none');
      input.remove();
    }
    if (titleEl) {
      titleEl.addEventListener('click', function () {
        if (popoutCard.querySelector('.board-card-title-edit')) return;
        var val = (titleEl.textContent || '').trim();
        var input = document.createElement('input');
        input.type = 'text';
        input.className = 'form-control form-control-sm board-card-title-edit';
        input.value = val;
        titleEl.classList.add('d-none');
        titleEl.parentNode.insertBefore(input, titleEl);
        input.focus();
        input.addEventListener('blur', commitTitle);
        input.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); input.blur(); } });
      });
    }

    function commitDescription() {
      var textarea = popoutCard.querySelector('.board-card-description-edit');
      if (!textarea) return;
      var val = (textarea.value || '').trim();
      descEl.textContent = val || '';
      descEl.classList.remove('d-none');
      textarea.remove();
    }
    if (descEl) {
      descEl.addEventListener('click', function () {
        if (popoutCard.querySelector('.board-card-description-edit')) return;
        var val = (descEl.textContent || '').trim();
        var textarea = document.createElement('textarea');
        textarea.className = 'form-control form-control-sm board-card-description-edit mt-1';
        textarea.rows = 3;
        textarea.value = val;
        descEl.classList.add('d-none');
        descEl.parentNode.insertBefore(textarea, descEl);
        textarea.focus();
        textarea.addEventListener('blur', commitDescription);
      });
    }

    function commitDueDate() {
      var input = popoutCard.querySelector('.board-card-due-date-edit');
      if (!input) return;
      var val = (input.value || '').trim();
      dueEl.textContent = val || 'None';
      dueEl.classList.remove('d-none');
      input.remove();
    }
    if (dueEl) {
      dueEl.addEventListener('click', function () {
        if (popoutCard.querySelector('.board-card-due-date-edit')) return;
        var val = parseDateForInput(dueEl.textContent);
        var input = document.createElement('input');
        input.type = 'date';
        input.className = 'form-control form-control-sm board-card-due-date-edit mt-1';
        input.value = val;
        dueEl.classList.add('d-none');
        dueEl.parentNode.insertBefore(input, dueEl);
        input.focus();
        input.addEventListener('blur', commitDueDate);
      });
    }

    function commitStatus() {
      var sel = popoutCard.querySelector('.board-card-status-edit');
      if (!sel) return;
      var display = (sel.options[sel.selectedIndex] && sel.options[sel.selectedIndex].text) ? sel.options[sel.selectedIndex].text : (sel.value || 'TODO');
      statusEl.textContent = display || 'TODO';
      statusEl.classList.remove('d-none');
      sel.remove();
    }
    if (statusEl) {
      statusEl.addEventListener('click', function () {
        if (popoutCard.querySelector('.board-card-status-edit')) return;
        var current = (statusEl.textContent || '').trim() || 'TODO';
        var sel = document.createElement('select');
        sel.className = 'form-select form-select-sm board-card-status-edit mt-1';
        sel.innerHTML = '';
        var opt = document.createElement('option');
        opt.value = current;
        opt.textContent = current;
        opt.selected = true;
        sel.appendChild(opt);
        statusEl.classList.add('d-none');
        statusEl.parentNode.insertBefore(sel, statusEl);
        sel.focus();
        sel.addEventListener('blur', commitStatus);
        sel.addEventListener('change', commitStatus);
      });
    }

    function commitPriority() {
      var sel = popoutCard.querySelector('.board-card-priority-edit');
      if (!sel) return;
      var display = (sel.options[sel.selectedIndex] && sel.options[sel.selectedIndex].text) ? sel.options[sel.selectedIndex].text : (sel.value || 'LOW');
      priorityEl.textContent = display || 'LOW';
      priorityEl.classList.remove('d-none');
      sel.remove();
    }
    if (priorityEl) {
      priorityEl.addEventListener('click', function () {
        if (popoutCard.querySelector('.board-card-priority-edit')) return;
        var current = (priorityEl.textContent || '').trim() || 'LOW';
        var sel = document.createElement('select');
        sel.className = 'form-select form-select-sm board-card-priority-edit mt-1';
        sel.innerHTML = '';
        var opt = document.createElement('option');
        opt.value = current;
        opt.textContent = current;
        opt.selected = true;
        sel.appendChild(opt);
        priorityEl.classList.add('d-none');
        priorityEl.parentNode.insertBefore(sel, priorityEl);
        sel.focus();
        sel.addEventListener('blur', commitPriority);
        sel.addEventListener('change', commitPriority);
      });
    }
  }

  function showCardPopout(card) {
    var cardsContainer = card.parentNode;
    var nextSibling = card.nextSibling;
    card.classList.add('board-card-popout');
    card.draggable = false;
    card.removeAttribute('draggable');
    var details = card.querySelector('.board-card-details');
    if (details) details.classList.remove('d-none');
    setupPopoutEditables(card);
    var overlay = document.createElement('div');
    overlay.className = 'board-card-popout-overlay';
    overlay.appendChild(card);
    function close() {
      overlay.removeEventListener('click', closeOnBackdrop);
      document.body.removeChild(overlay);
      card.classList.remove('board-card-popout');
      card.setAttribute('draggable', 'true');
      card.draggable = true;
      if (details) details.classList.add('d-none');
      if (nextSibling) {
        cardsContainer.insertBefore(card, nextSibling);
      } else {
        cardsContainer.appendChild(card);
      }
      updateColumnBadge(cardsContainer.closest('.board-column'));
    }
    function closeOnBackdrop(e) {
      if (e.target === overlay) close();
    }
    overlay.addEventListener('click', closeOnBackdrop);
    document.body.appendChild(overlay);
    updateColumnBadge(cardsContainer.closest('.board-column'));
  }

  function handleCardClick(e) {
    if (didDrag) return;
    var card = e.target.closest && e.target.closest('.board-card');
    if (!card || card.classList.contains('board-card-popout')) return;
    e.preventDefault();
    showCardPopout(card);
  }

  function handleDragOver(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    e.currentTarget.classList.add('border-primary');
  }
  function handleDragLeave(e) {
    e.currentTarget.classList.remove('border-primary');
  }
  function handleDrop(e) {
    e.preventDefault();
    e.currentTarget.classList.remove('border-primary');
    if (!draggedCard) return;
    var targetColumn = e.currentTarget.closest && e.currentTarget.closest('.board-column');
    var targetCards = targetColumn && targetColumn.querySelector('.board-column-cards');
    if (!targetCards) return;
    var sourceColumn = draggedCard.closest && draggedCard.closest('.board-column');
    if (sourceColumn === targetColumn) return;
    draggedCard.dataset.taskStatus = targetColumn.dataset.status || '';
    targetCards.appendChild(draggedCard);
    updateColumnBadge(sourceColumn);
    updateColumnBadge(targetColumn);
    // TODO: POST to update task status on server (e.g. /project/.../tasks/update?task=... with body { status })
  }

  if (boardColumns) {
    boardColumns.addEventListener('dragstart', handleDragStart);
    boardColumns.addEventListener('dragend', handleDragEnd);
    boardColumns.addEventListener('click', handleCardClick);
  }
  dropzones.forEach(function(el) {
    el.addEventListener('dragover', handleDragOver);
    el.addEventListener('dragleave', handleDragLeave);
    el.addEventListener('drop', handleDrop);
  });
})();