import {
  getBoardContext,
  showBoardError,
  syncCardTitleLineTooltip,
  updateColumnBadge,
} from "./board-context.js";
import {
  attachBoardRefAutocomplete,
  getMarkdownFromElement,
  linkifyMarkdownElement,
  setMarkdownElement,
  syncCompactDescription,
} from "./board-markdown.js";
import { loadCommentsForCard, setupCommentForm } from "./board-comments.js";
import { loadTasksForBoard } from "./board-cards.js";

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');
  var tagsEl = popoutCard.querySelector('.board-card-tags');
  var pointsEl = popoutCard.querySelector('.board-card-points');
  var assigneeEl = popoutCard.querySelector('.board-card-assignee');
  var FIBONACCI_POINTS = ['–', '0', '1', '2', '3', '5', '8', '13', '21'];

  function pushTaskUpdate() {
    var taskRef = popoutCard.dataset.taskRef;
    if (!taskRef) return;
    var ctx = getBoardContext();
    if (!ctx.project) return;
    var tEl = popoutCard.querySelector('.board-card-title');
    var dEl = popoutCard.querySelector('.board-card-description-full');
    var dueEl_ = popoutCard.querySelector('.board-card-due-date');
    var sEl = popoutCard.querySelector('.board-card-status');
    var pEl = popoutCard.querySelector('.board-card-priority');
    var ptEl = popoutCard.querySelector('.board-card-points');
    var aEl = popoutCard.querySelector('.board-card-assignee');
    var tagsEl_ = popoutCard.querySelector('.board-card-tags');
    var dueVal = (dueEl_ && dueEl_.textContent) ? dueEl_.textContent.trim() : '';
    var statusDisplay = (sEl && sEl.textContent) ? sEl.textContent.trim() : 'TODO';
    var priorityDisplay = (pEl && pEl.textContent) ? pEl.textContent.trim() : 'LOW';
    var tagsVal = (tagsEl_ && tagsEl_.textContent) ? tagsEl_.textContent.trim() : '';
    var pointsDisplay = (ptEl && ptEl.textContent) ? ptEl.textContent.trim() : '–';
    var body = {
      title: (tEl && tEl.textContent) ? tEl.textContent.trim() || 'Untitled' : 'Untitled',
      description: getMarkdownFromElement(dEl),
      status: statusDisplay ? statusDisplay.replace(/\s+/g, '_').toUpperCase() : 'TODO',
      priority: priorityDisplay ? priorityDisplay.replace(/\s+/g, '_').toUpperCase() : 'LOW',
      points: (pointsDisplay && pointsDisplay !== '–') ? parseInt(pointsDisplay, 10) : null,
      assignee: (aEl && aEl.textContent && aEl.textContent.trim() !== 'None') ? aEl.textContent.trim() : null,
      due_date: (dueVal && dueVal !== 'None') ? dueVal : null,
      tags: tagsVal || ''
    };
    fetch('/tasks/update?' + new URLSearchParams({ project: ctx.project, board: ctx.board, task: taskRef }).toString(), {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body)
    }).then(function() {
      var card = popoutCard.closest ? popoutCard : null;
      if (card) {
        card.dataset.taskPoints = (body.points !== null && body.points !== undefined) ? String(body.points) : '';
        var col = card.closest('.board-column');
        if (col) updateColumnBadge(col);
      }
    }).catch(function() {});
  }

  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();
    syncCardTitleLineTooltip(popoutCard);
    pushTaskUpdate();
  }
  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();
    setMarkdownElement(descEl, val);
    syncCompactDescription(popoutCard, val);
    descEl.classList.remove('d-none');
    textarea.remove();
    pushTaskUpdate();
  }
  if (descEl) {
    descEl.addEventListener('click', function () {
      if (popoutCard.querySelector('.board-card-description-edit')) return;
      var val = getMarkdownFromElement(descEl);
      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);
      attachBoardRefAutocomplete(textarea);
      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();
    pushTaskUpdate();
  }
  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();
    var statusValue = display ? display.replace(/\s+/g, '_').toUpperCase() : 'TODO';
    popoutCard.dataset.taskStatus = statusValue;
    pushTaskUpdate();
  }
  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();
    pushTaskUpdate();
  }
  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);
    });
  }

  if (tagsEl) {
    tagsEl.addEventListener('blur', function () {
      pushTaskUpdate();
    });
  }

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

  function commitAssignee() {
    var input = popoutCard.querySelector('.board-card-assignee-edit');
    if (!input) return;
    var val = (input.value || '').trim();
    assigneeEl.textContent = val || 'None';
    assigneeEl.classList.remove('d-none');
    input.remove();
    var compactSpan = popoutCard.querySelector('.board-card-assignee-compact');
    if (compactSpan) compactSpan.textContent = val || 'None';
    pushTaskUpdate();
  }
  if (assigneeEl) {
    assigneeEl.addEventListener('click', function () {
      if (popoutCard.querySelector('.board-card-assignee-edit')) return;
      var current = (assigneeEl.textContent || '').trim();
      if (current === 'None') current = '';
      var input = document.createElement('input');
      input.type = 'text';
      input.className = 'form-control form-control-sm board-card-assignee-edit mt-1';
      input.placeholder = 'Unassigned';
      input.value = current;
      assigneeEl.classList.add('d-none');
      assigneeEl.parentNode.insertBefore(input, assigneeEl);
      input.focus();
      input.addEventListener('blur', commitAssignee);
      input.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); input.blur(); } });
    });
  }
}

function setupPopoutActions(popoutCard, closePopout, cardsContainer) {
  var deleteBtn = popoutCard.querySelector('.board-card-delete-btn');
  var archiveBtn = popoutCard.querySelector('.board-card-archive-btn');
  var taskRef = popoutCard.dataset.taskRef;
  if (!taskRef) return;
  var ctx = getBoardContext();
  if (!ctx.project) return;

  function removeCardFromBoard() {
    if (closePopout) closePopout();
    popoutCard.remove();
    var column = cardsContainer && cardsContainer.closest('.board-column');
    if (column) updateColumnBadge(column);
  }

  if (deleteBtn) {
    deleteBtn.addEventListener('click', function (e) {
      e.preventDefault();
      e.stopPropagation();
      if (!window.confirm('Delete this task permanently? This cannot be undone.')) return;
      fetch('/tasks/delete?' + new URLSearchParams({
        project: ctx.project,
        board: ctx.board,
        task: taskRef
      }).toString(), { method: 'POST', credentials: 'same-origin' })
        .then(function (res) {
          if (res.ok) removeCardFromBoard();
        })
        .catch(function () {});
    });
  }

  if (archiveBtn) {
    archiveBtn.addEventListener('click', function (e) {
      e.preventDefault();
      e.stopPropagation();
      if (!window.confirm('Archive this task? It will be moved to the Archive board.')) return;
      fetch('/tasks/archive?' + new URLSearchParams({
        project: ctx.project,
        board: ctx.board,
        task: taskRef
      }).toString(), { method: 'POST', credentials: 'same-origin' })
        .then(function (res) {
          if (res.ok) removeCardFromBoard();
        })
        .catch(function () {});
    });
  }
}

function loadBoardOptionsForMove(select, excludeName) {
  var ctx = getBoardContext();
  if (!ctx.project) return;
  fetch('/board/list?' + new URLSearchParams({ project: ctx.project }).toString())
    .then(function(res) { return res.ok ? res.json() : []; })
    .then(function(boards) {
      select.innerHTML = '<option value="">Move to board…</option>';
      (boards || []).forEach(function(b) {
        if (b.name === excludeName) return;
        var opt = document.createElement('option');
        opt.value = b.name;
        opt.textContent = b.name;
        select.appendChild(opt);
      });
    })
    .catch(function() {});
}

function setupMoveControl(popoutCard) {
  var select = popoutCard.querySelector('.board-card-move-select');
  if (!select) return;
  var ctx = getBoardContext();
  loadBoardOptionsForMove(select, ctx.board);
  if (select.dataset.bound === '1') return;
  select.dataset.bound = '1';
  select.addEventListener('change', function() {
    var target = select.value;
    var taskRef = popoutCard.dataset.taskRef;
    if (!target || !taskRef) return;
    var ctx2 = getBoardContext();
    if (!ctx2.project) return;
    fetch('/tasks/move?' + new URLSearchParams({ project: ctx2.project, board: ctx2.board, task: taskRef, target: target }).toString(), {
      method: 'POST',
      credentials: 'same-origin'
    }).then(function(res) {
      if (!res.ok) {
        var msg = (res.status === 401 || res.status === 403)
          ? 'Not authorized to move tasks (sign in again if needed).'
          : 'Could not move task.';
        showBoardError(msg);
        select.value = '';
        return;
      }
      var overlay = popoutCard.closest('.board-card-popout-overlay');
      if (overlay && overlay.parentNode) {
        overlay.parentNode.removeChild(overlay);
      }
      loadTasksForBoard();
    }).catch(function() {
      showBoardError('Could not move task.');
      select.value = '';
    });
  });
}

export 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);
  setupCommentForm(card);
  setupMoveControl(card);
  var descFull = card.querySelector('.board-card-description-full');
  if (descFull && !Object.prototype.hasOwnProperty.call(descFull.dataset, 'boardMarkdown')) {
    setMarkdownElement(descFull, getMarkdownFromElement(descFull));
    syncCompactDescription(card);
  } else if (descFull) {
    linkifyMarkdownElement(descFull);
  }
  document.querySelectorAll('.board-card-comment-content.board-card-markdown').forEach(function (el) {
    if (card.contains(el)) linkifyMarkdownElement(el);
  });
  loadCommentsForCard(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();
  }
  setupPopoutActions(card, close, cardsContainer);
  overlay.addEventListener('click', closeOnBackdrop);
  document.body.appendChild(overlay);
  updateColumnBadge(cardsContainer.closest('.board-column'));
}