import {
  getBoardContext,
  pushTaskFieldUpdate,
  refreshBoardRefManifest,
  setCardTaskRefDisplay,
  syncCardTitleLineTooltip,
  updateColumnBadge,
  findBoardCardByTaskRef,
} from "./board-context.js";
import { setMarkdownElement, syncCompactDescription } from "./board-markdown.js";
import { commentCountLabel, updateCardCommentCount } from "./board-comments.js";

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

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

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

function assignCloudIconToCard(card) {
  setCardIcon(card, 'cloud');
}

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

function bindCompactAssigneeEditable(card) {
  var span = card && card.querySelector && card.querySelector('.board-card-assignee-compact');
  if (!span || span.dataset.editableBound === '1') return;
  span.dataset.editableBound = '1';
  span.classList.add('board-card-assignee-compact-editable');
  span.addEventListener('click', function (e) {
    e.stopPropagation();
    e.preventDefault();
    if (card.querySelector('.board-card-assignee-compact-edit')) return;
    var current = (span.textContent || '').trim();
    if (current === 'None') current = '';
    var wasDraggable = card.draggable;
    card.draggable = false;
    var input = document.createElement('input');
    input.type = 'text';
    input.className = 'form-control form-control-sm board-card-assignee-compact-edit';
    input.placeholder = 'Unassigned';
    input.value = current;
    span.classList.add('d-none');
    span.parentNode.insertBefore(input, span);
    input.focus();
    input.select();
    input.addEventListener('click', function (ev) { ev.stopPropagation(); });
    input.addEventListener('mousedown', function (ev) { ev.stopPropagation(); });
    function restoreDraggable() {
      card.draggable = wasDraggable;
      if (wasDraggable) card.setAttribute('draggable', 'true');
    }
    function commit() {
      var val = (input.value || '').trim();
      span.textContent = val || 'None';
      span.classList.remove('d-none');
      input.remove();
      restoreDraggable();
      var detailAssignee = card.querySelector('.board-card-assignee');
      if (detailAssignee) detailAssignee.textContent = val || 'None';
      pushTaskFieldUpdate(card, { assignee: val || null });
    }
    input.addEventListener('blur', commit);
    input.addEventListener('keydown', function (ev) {
      ev.stopPropagation();
      if (ev.key === 'Enter') { ev.preventDefault(); input.blur(); }
      if (ev.key === 'Escape') { ev.preventDefault(); input.value = current; input.blur(); }
    });
  });
}

function createCardFromTask(task) {
  var template = document.getElementById('board-card-template');
  if (!template || !template.content) return null;
  var clone = template.content.cloneNode(true);
  var card = clone.querySelector && clone.querySelector('.board-card');
  if (!card) return null;
  var status = task.status || 'TODO';
  var points = (task.points !== null && task.points !== undefined) ? task.points : null;
  card.dataset.taskRef = task.ref || '';
  card.dataset.taskStatus = status;
  card.dataset.taskPoints = points !== null ? String(points) : '';
  setCardTaskRefDisplay(card, task.ref || '', task.id);
  var titleEl = card.querySelector('.board-card-title');
  if (titleEl) titleEl.textContent = task.title || 'Untitled';
  syncCardTitleLineTooltip(card);
  var descFull = card.querySelector('.board-card-description-full');
  if (descFull) setMarkdownElement(descFull, task.description || '');
  syncCompactDescription(card, task.description || '');
  setCardIcon(card, 'cloud-filled');
  var meta = card.querySelector('.board-card-meta');
  if (meta) {
    var badge = meta.querySelector('.badge');
    var assigneeSpan = meta.querySelector('.board-card-assignee-compact');
    var commentsSpan = meta.querySelector('.board-card-comments-count-meta') || meta.querySelector('.ms-auto');
    if (badge) {
      badge.textContent = task.priority || 'LOW';
      badge.className = 'badge badge-outline text-' + (task.priority === 'CRITICAL' ? 'danger' : task.priority === 'HIGH' ? 'warning' : 'secondary');
    }
    var pointsBadge = meta.querySelector('.board-card-points-badge');
    if (pointsBadge) {
      if (points !== null) {
        pointsBadge.textContent = points + ' pt' + (points !== 1 ? 's' : '');
        pointsBadge.classList.remove('d-none');
      } else {
        pointsBadge.textContent = '';
        pointsBadge.classList.add('d-none');
      }
    }
    if (assigneeSpan) assigneeSpan.textContent = task.assignee || 'None';
    if (commentsSpan) commentsSpan.textContent = commentCountLabel(task.comments_count || 0);
  }
  var details = card.querySelector('.board-card-details');
  if (details) {
    var dueDate = details.querySelector('.board-card-due-date');
    var updatedAt = details.querySelector('.board-card-updated-at');
    var statusEl = details.querySelector('.board-card-status');
    var priorityEl = details.querySelector('.board-card-priority');
    var pointsEl = details.querySelector('.board-card-points');
    var assigneeEl = details.querySelector('.board-card-assignee');
    var tagsEl = details.querySelector('.board-card-tags');
    if (dueDate) dueDate.textContent = task.due_date || 'None';
    if (updatedAt) updatedAt.textContent = task.updated_at || 'None';
    if (statusEl) statusEl.textContent = status;
    if (priorityEl) priorityEl.textContent = task.priority || 'LOW';
    if (pointsEl) pointsEl.textContent = points !== null ? String(points) : '–';
    if (assigneeEl) assigneeEl.textContent = task.assignee || 'None';
    if (tagsEl) tagsEl.textContent = task.tags || '';
    updateCardCommentCount(card, task.comments_count || 0);
  }
  bindCompactAssigneeEditable(card);
  return clone;
}

function groupTasksByStatus(tasks) {
  var byStatus = {};
  if (!Array.isArray(tasks)) return byStatus;
  tasks.forEach(function(task) {
    var s = task.status || 'TODO';
    if (!byStatus[s]) byStatus[s] = [];
    byStatus[s].push(task);
  });
  return byStatus;
}

export function loadTasksForBoard() {
  var ctx = getBoardContext();
  if (!ctx.project) return Promise.resolve();
  var listUrl = '/tasks/list?' + new URLSearchParams({ project: ctx.project, board: ctx.board }).toString();
  return fetch(listUrl).then(function(res) {
    if (!res.ok) return;
    return res.json();
  }).then(function(tasks) {
    if (!Array.isArray(tasks)) return;
    var byStatus = groupTasksByStatus(tasks);
    var columns = document.querySelectorAll('.board-column.dropzone');
    columns.forEach(function(column) {
      var status = column.dataset.status || 'TODO';
      var cardsContainer = column.querySelector('.board-column-cards');
      if (!cardsContainer) return;
      cardsContainer.innerHTML = '';
      (byStatus[status] || []).forEach(function(task) {
        var frag = createCardFromTask(task);
        if (frag) cardsContainer.appendChild(frag);
      });
      updateColumnBadge(column);
    });
    refreshBoardRefManifest();
  }).catch(function() {});
}

export function fetchBoardTasksJson() {
  var ctx = getBoardContext();
  if (!ctx.project) return Promise.resolve(null);
  var listUrl = '/tasks/list?' + new URLSearchParams({ project: ctx.project, board: ctx.board }).toString();
  return fetch(listUrl).then(function(res) {
    return res.ok ? res.json() : null;
  });
}

export function reorderBoardDomToTaskList(tasks) {
  if (!Array.isArray(tasks)) return;
  var byStatus = groupTasksByStatus(tasks);
  document.querySelectorAll('.board-column.dropzone').forEach(function(column) {
    var status = column.dataset.status || 'TODO';
    var cardsContainer = column.querySelector('.board-column-cards');
    if (!cardsContainer) return;
    var ordered = byStatus[status] || [];
    ordered.forEach(function(task) {
      if (!task.ref) return;
      var card = findBoardCardByTaskRef(task.ref);
      if (card) cardsContainer.appendChild(card);
    });
    updateColumnBadge(column);
  });
}

function addDefaultCard(ev) {
  if (ev.target.closest && ev.target.closest('.board-column-task-count')) return;
  var template = document.getElementById('board-card-template');
  if (!template || !template.content) return;
  var column = ev.currentTarget.closest('.board-column');
  var cardsContainer = column && column.querySelector('.board-column-cards');
  var boardColumns = document.querySelector('.board-columns');
  if (!cardsContainer || !boardColumns) return;
  var ctx = getBoardContext();
  var project = ctx.project;
  var board = ctx.board;
  if (!project) return;
  var clone = template.content.cloneNode(true);
  var card = clone.querySelector && clone.querySelector('.board-card');
  if (!card) return;
  var titleEl = card.querySelector('.board-card-title');
  if (titleEl) titleEl.textContent = 'New task';
  syncCardTitleLineTooltip(card);
  assignCloudIconToCard(card);
  bindCompactAssigneeEditable(card);
  cardsContainer.appendChild(clone);
  var countBadge = column.querySelector('.board-column-task-count');
  if (countBadge) {
    countBadge.textContent = cardsContainer.querySelectorAll('.board-card').length;
  }
  var status = column.dataset.status || 'TODO';
  setCardIcon(card, 'cloud-up');
  var createUrl = '/tasks/create?' + new URLSearchParams({
    project: project,
    board: board,
    title: 'New task',
    description: '',
    status: status,
    priority: 'LOW',
    assignee: '',
    due_date: ''
  }).toString();
  fetch(createUrl, { method: 'POST' }).then(function(res) {
    if (res.ok) {
      return res.json().then(function(body) {
        setCardIcon(card, 'cloud-filled');
        if (body.ref) {
          card.dataset.taskRef = body.ref;
          setCardTaskRefDisplay(card, body.ref);
        }
      });
    }
    if (res.status >= 400 && res.status < 600) {
      setCardIcon(card, 'cloud-exclamation');
    }
  }).catch(function() {
    setCardIcon(card, 'cloud-exclamation');
  });
}

export function bindAddCardButtons() {
  document.querySelectorAll('.board-column-add-card').forEach(function(btn) {
    btn.addEventListener('click', addDefaultCard);
  });
}