// Open Kanban - Pure JS implementation
// Uses the schema compatible with your prior board JSON and adds optional `meta` for history.

// ---- Utilities ----
function uuidv4() {
  // RFC4122 v4 - simplified
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    const r = (Math.random() * 16) | 0,
      v = c === 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

function deepClone(obj) {
  return structuredClone ? structuredClone(obj) : JSON.parse(JSON.stringify(obj));
}

function nowIso() {
  return new Date().toISOString();
}

function download(filename, text) {
  const element = document.createElement('a');
  element.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);
  element.style.display = 'none';
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

// ---- State ----
const state = {
  filename: '',
  dirty: false,
  board: null, // full schema
  selectedTaskId: null,
  lastLoadedSnapshot: null, // baseline for delta/diff exports (optional)
};

// App-level config (overridable by config.json)
const appConfig = {
  appTitle: 'Kanban',
  defaultFilename: 'kanban.json',
  autoLoadFile: '', // do not auto-load by default; can be set to e.g. 'sample-board.json'
};

// Default empty board
function makeEmptyBoard() {
  return {
    categories: [],
    stages: [],
    tasks: [],
    layout: { columns: [] },
    meta: {
      id: 'open-kanban',
      version: '1.0.0',
      createdAt: nowIso(),
      modifiedAt: nowIso(),
      actor: '',
      history: [],
    },
  };
}

// ---- DOM Refs ----
const el = {
  fileStatus: document.getElementById('fileStatus'),
  openFile: document.getElementById('openFile'),
  importFile: document.getElementById('importFile'),
  saveBtn: document.getElementById('saveBtn'),
  newBoardBtn: document.getElementById('newBoardBtn'),
  actorInput: document.getElementById('actorInput'),
  searchInput: document.getElementById('searchInput'),
  categoryFilter: document.getElementById('categoryFilter'),
  board: document.getElementById('board'),
  categoriesList: document.getElementById('categoriesList'),
  addCategoryBtn: document.getElementById('addCategoryBtn'),
  layoutInfo: document.getElementById('layoutInfo'),
  historyList: document.getElementById('historyList'),
  clearHistoryBtn: document.getElementById('clearHistoryBtn'),
  addStageBtn: document.getElementById('addStageBtn'),
  addColumnBtn: document.getElementById('addColumnBtn'),
  // Task modal
  taskModal: document.getElementById('taskModal'),
  taskModalClose: document.getElementById('taskModalClose'),
  taskTitleInput: document.getElementById('taskTitleInput'),
  taskCategorySelect: document.getElementById('taskCategorySelect'),
  taskDescInput: document.getElementById('taskDescInput'),
  stepsContainer: document.getElementById('stepsContainer'),
  addStepBtn: document.getElementById('addStepBtn'),
  deleteTaskBtn: document.getElementById('deleteTaskBtn'),
  taskSaveBtn: document.getElementById('taskSaveBtn'),
  // Merge modal
  mergeModal: document.getElementById('mergeModal'),
  mergeModalClose: document.getElementById('mergeModalClose'),
  mergePolicy: document.getElementById('mergePolicy'),
  mergeRemoveMissing: document.getElementById('mergeRemoveMissing'),
  diffSummary: document.getElementById('diffSummary'),
  diffDetails: document.getElementById('diffDetails'),
  applyMergeBtn: document.getElementById('applyMergeBtn'),
};

// ---- Helpers to access entities ----
function idxById(arr, id) {
  return arr.findIndex((x) => x.uuid === id);
}
function getCategory(id) {
  return state.board.categories.find((x) => x.uuid === id) || null;
}
function getStage(id) {
  return state.board.stages.find((x) => x.uuid === id) || null;
}
function getTask(id) {
  return state.board.tasks.find((x) => x.uuid === id) || null;
}

// ---- History ----
function logEvent(type, payload) {
  const actor = state.board?.meta?.actor || '';
  const entry = { id: uuidv4(), ts: nowIso(), actor, type, payload };
  state.board.meta.history.push(entry);
  state.board.meta.modifiedAt = nowIso();
  state.dirty = true;
  renderHistory();
  updateFileStatus();
}

// ---- Load / Save ----
function updateFileStatus() {
  const n = state.filename || '(未命名)';
  const a = state.board?.meta?.actor ? ` | 操作人：${state.board.meta.actor}` : '';
  el.fileStatus.textContent = `${n}${state.dirty ? ' *' : ''}${a}`;
}

function setBoard(newBoard, filename = '') {
  // normalize optional meta
  if (!newBoard.meta) {
    newBoard.meta = {
      id: 'open-kanban',
      version: '1.0.0',
      createdAt: nowIso(),
      modifiedAt: nowIso(),
      actor: state.actor || '',
      history: [],
    };
  }
  if (!newBoard.layout) newBoard.layout = { columns: [] };
  if (!newBoard.layout.columns) newBoard.layout.columns = [];
  state.board = newBoard;
  state.filename = filename;
  state.dirty = false;
  state.lastLoadedSnapshot = deepClone(newBoard);
  el.actorInput.value = state.board.meta.actor || '';
  populateCategoryFilter();
  renderAll();
}

async function loadConfig() {
  try {
    const res = await fetch('config.json', { cache: 'no-store' });
    if (res.ok) {
      const cfg = await res.json();
      if (cfg && typeof cfg === 'object') {
        if (cfg.appTitle) appConfig.appTitle = cfg.appTitle;
        if (cfg.defaultFilename) appConfig.defaultFilename = cfg.defaultFilename;
        if (typeof cfg.autoLoadFile === 'string') appConfig.autoLoadFile = cfg.autoLoadFile;
      }
    }
  } catch (_) {
    // ignore
  }
  // Apply title
  const titleEl = document.getElementById('appTitle');
  const pageTitle = document.getElementById('pageTitle');
  if (titleEl) titleEl.textContent = appConfig.appTitle;
  if (pageTitle) pageTitle.textContent = appConfig.appTitle;
  document.title = appConfig.appTitle;
}

function getQueryParam(name) {
  const url = new URL(window.location.href);
  return url.searchParams.get(name);
}

async function bootstrapLoad() {
  await loadConfig();
  const qp = getQueryParam('file');
  const fileToLoad = qp || appConfig.autoLoadFile || '';
  if (!fileToLoad) {
    setBoard(makeEmptyBoard());
    return;
  }
  try {
    const res = await fetch(fileToLoad, { cache: 'no-store' });
    if (res.ok) {
      const json = await res.json();
      setBoard(json, fileToLoad);
      logEvent('load-file', { name: fileToLoad, via: qp ? 'query' : 'config' });
      return;
    }
  } catch (_) {}
  setBoard(makeEmptyBoard());
}

function handleOpenFile(ev) {
  const file = ev.target.files?.[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = () => {
    try {
      const json = JSON.parse(String(reader.result));
      setBoard(json, file.name);
      logEvent('load-file', { name: file.name, size: file.size });
    } catch (e) {
      alert('解析 JSON 失败：' + e.message);
    }
  };
  reader.readAsText(file);
  // reset value to allow opening same file again
  ev.target.value = '';
}

function handleImportFile(ev) {
  const file = ev.target.files?.[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = () => {
    try {
      const imported = JSON.parse(String(reader.result));
      showMergePreview(imported, file.name);
    } catch (e) {
      alert('解析 JSON 失败：' + e.message);
    }
  };
  reader.readAsText(file);
  ev.target.value = '';
}

function handleSave() {
  if (!state.board) return;
  state.board.meta.actor = el.actorInput.value.trim();
  state.board.meta.modifiedAt = nowIso();
  const filename = state.filename || appConfig.defaultFilename || 'kanban.json';
  const text = JSON.stringify(state.board, null, 2);
  download(filename, text);
  state.dirty = false;
  updateFileStatus();
}

function handleNewBoard() {
  if (state.dirty && !confirm('当前更改尚未保存，确定新建吗？')) return;
  const board = makeEmptyBoard();
  setBoard(board);
  logEvent('new-board', {});
}

// ---- Renderers ----
function renderAll() {
  renderCategories();
  renderBoard();
  renderHistory();
  renderLayoutInfo();
  updateFileStatus();
}

function populateCategoryFilter() {
  const sel = el.categoryFilter;
  while (sel.firstChild) sel.removeChild(sel.firstChild);
  const optAll = document.createElement('option');
  optAll.value = '';
  optAll.textContent = '筛选：全部类别';
  sel.appendChild(optAll);
  state.board.categories.forEach((c) => {
    const op = document.createElement('option');
    op.value = c.uuid;
    op.textContent = c.title;
    sel.appendChild(op);
  });
}

function renderCategories() {
  const root = el.categoriesList;
  root.innerHTML = '';
  state.board.categories.forEach((c) => {
    const row = document.createElement('div');
    row.className = 'category-item';

    const sw = document.createElement('span');
    sw.className = 'swatch';
    sw.style.background = '#' + (c.color || '888888');
    row.appendChild(sw);

    const title = document.createElement('input');
    title.type = 'text';
    title.value = c.title;
    title.addEventListener('change', () => {
      c.title = title.value.trim() || c.title;
      state.dirty = true;
      populateCategoryFilter();
      renderBoard();
      logEvent('category-rename', { id: c.uuid, title: c.title });
    });
    row.appendChild(title);

    const color = document.createElement('input');
    color.type = 'text';
    color.value = c.color || '';
    color.placeholder = '颜色 hex (不含#)';
    color.style.width = '110px';
    color.addEventListener('change', () => {
      const v = color.value.replace(/#/g, '').slice(0, 6);
      c.color = v;
      sw.style.background = '#' + v;
      state.dirty = true;
      renderBoard();
      logEvent('category-color', { id: c.uuid, color: v });
    });
    row.appendChild(color);

    const del = document.createElement('button');
    del.className = 'btn small';
    del.textContent = '删除';
    del.addEventListener('click', () => {
      // only allow delete if unused
      const used = state.board.tasks.some((t) => t.category === c.uuid);
      if (used) return alert('该类别已被任务引用，无法删除');
      state.board.categories = state.board.categories.filter((x) => x.uuid !== c.uuid);
      state.dirty = true;
      populateCategoryFilter();
      renderCategories();
      logEvent('category-delete', { id: c.uuid });
    });
    row.appendChild(del);

    root.appendChild(row);
  });
}

function renderLayoutInfo() {
  const li = el.layoutInfo;
  const cols = state.board.layout?.columns || [];
  let txt = `列数：${cols.length}`;
  txt += '\n阶段总数：' + state.board.stages.length;
  li.textContent = txt;
}

function renderHistory() {
  const root = el.historyList;
  root.innerHTML = '';
  const hist = (state.board.meta && state.board.meta.history) || [];
  hist.slice().reverse().slice(0, 200).forEach((h) => {
    const div = document.createElement('div');
    div.className = 'event';
    const actor = h.actor ? `@${h.actor}` : '';
    div.textContent = `${h.ts} ${actor} ${h.type}`;
    root.appendChild(div);
  });
}

function createEl(tag, className, text) {
  const e = document.createElement(tag);
  if (className) e.className = className;
  if (text != null) e.textContent = String(text);
  return e;
}

function renderBoard() {
  const board = el.board;
  board.innerHTML = '';
  const filterText = el.searchInput.value.trim().toLowerCase();
  const filterCat = el.categoryFilter.value;

  const columns = state.board.layout?.columns || [];
  if (!columns.length) {
    // fallback: one column containing all stages by order
    const allStageIds = state.board.stages.map((s) => s.uuid);
    columns.push(allStageIds);
  }

  columns.forEach((stageIdList, colIdx) => {
    const col = createEl('div', 'board-column');
    stageIdList.forEach((sid) => {
      const s = getStage(sid);
      if (!s) return;
      const stageEl = createEl('div', 'stage');
      stageEl.dataset.stageId = s.uuid;

      const header = createEl('div', 'stage-header');
      const title = createEl('div', 'stage-title', s.title || '未命名阶段');
      header.appendChild(title);
      const actions = createEl('div', 'stage-actions');
      const addBtn = createEl('button', 'btn small', '添加任务');
      addBtn.addEventListener('click', () => addTaskIntoStage(s.uuid));
      const renameBtn = createEl('button', 'btn small', '重命名');
      renameBtn.addEventListener('click', () => renameStage(s.uuid));
      const moveBtn = createEl('button', 'btn small', '移列');
      moveBtn.addEventListener('click', () => moveStageToColumn(s.uuid));
      const delBtn = createEl('button', 'btn small', '删除');
      delBtn.addEventListener('click', () => deleteStage(s.uuid));
      actions.appendChild(addBtn);
      actions.appendChild(renameBtn);
      actions.appendChild(moveBtn);
      actions.appendChild(delBtn);
      header.appendChild(actions);
      stageEl.appendChild(header);

      const list = createEl('div', 'task-list');
      list.dataset.stageId = s.uuid;

      enableListDnd(list);

      // tasks in order
      (s.tasks || []).forEach((tid) => {
        const t = getTask(tid);
        if (!t) return;
        // filters
        const hitText = !filterText ||
          t.title?.toLowerCase().includes(filterText) ||
          t.description?.toLowerCase().includes(filterText);
        const hitCat = !filterCat || t.category === filterCat;
        if (!(hitText && hitCat)) return;
        const card = renderTaskCard(t);
        list.appendChild(card);
      });

      stageEl.appendChild(list);
      col.appendChild(stageEl);
    });
    board.appendChild(col);
  });
}

function categoryChip(catId) {
  const c = getCategory(catId);
  const span = createEl('span', 'chip');
  if (!c) {
    span.textContent = '未分类';
    return span;
  }
  span.textContent = c.title;
  span.style.background = '#' + (c.color || '888888') + '33';
  span.style.borderColor = '#' + (c.color || '888888');
  return span;
}

function stepStats(steps) {
  if (!Array.isArray(steps) || steps.length === 0) return '0/0';
  const done = steps.filter((s) => s.done).length;
  return `${done}/${steps.length}`;
}

function renderTaskCard(t) {
  const div = createEl('div', 'task');
  div.draggable = true;
  div.dataset.taskId = t.uuid;
  div.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/task', t.uuid);
    e.dataTransfer.effectAllowed = 'move';
  });

  const grab = createEl('div', 'grab', '⋮⋮');
  div.appendChild(grab);

  const mid = createEl('div');
  const title = createEl('div', 'title', t.title || '(无标题)');
  mid.appendChild(title);
  const meta = createEl('div', 'meta', `步骤: ${stepStats(t.steps || [])}`);
  mid.appendChild(meta);
  div.appendChild(mid);

  const right = createEl('div', 'actions');
  right.appendChild(categoryChip(t.category));
  const editBtn = createEl('button', 'btn small', '编辑');
  editBtn.addEventListener('click', () => openTaskModal(t.uuid));
  right.appendChild(editBtn);
  div.appendChild(right);

  return div;
}

// ---- DnD ----
function enableListDnd(listEl) {
  listEl.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    listEl.classList.add('drag-over');
  });
  listEl.addEventListener('dragleave', () => listEl.classList.remove('drag-over'));
  listEl.addEventListener('drop', (e) => {
    e.preventDefault();
    listEl.classList.remove('drag-over');
    const taskId = e.dataTransfer.getData('text/task');
    if (!taskId) return;
    const stageId = listEl.dataset.stageId;
    // compute index
    const children = Array.from(listEl.querySelectorAll('.task'));
    const y = e.clientY;
    let index = children.length;
    for (let i = 0; i < children.length; i++) {
      const rect = children[i].getBoundingClientRect();
      if (y < rect.top + rect.height / 2) {
        index = i;
        break;
      }
    }
    moveTaskToStage(taskId, stageId, index);
  });
}

function moveTaskToStage(taskId, stageId, index) {
  const fromStage = state.board.stages.find((s) => (s.tasks || []).includes(taskId));
  const toStage = getStage(stageId);
  if (!toStage) return;
  if (fromStage && fromStage.uuid === toStage.uuid) {
    // reorder within same stage
    const arr = fromStage.tasks;
    const oldIdx = arr.indexOf(taskId);
    if (oldIdx === -1) return;
    arr.splice(oldIdx, 1);
    arr.splice(index > oldIdx ? index - 1 : index, 0, taskId);
    state.dirty = true;
    renderBoard();
    logEvent('task-reorder', { stage: toStage.uuid, task: taskId, toIndex: index });
    return;
  }
  // move across stages
  if (fromStage) {
    fromStage.tasks = (fromStage.tasks || []).filter((id) => id !== taskId);
  }
  if (!Array.isArray(toStage.tasks)) toStage.tasks = [];
  const clampedIndex = Math.max(0, Math.min(index, toStage.tasks.length));
  toStage.tasks.splice(clampedIndex, 0, taskId);
  state.dirty = true;
  renderBoard();
  logEvent('task-move', { task: taskId, from: fromStage?.uuid || null, to: toStage.uuid, toIndex: clampedIndex });
}

// ---- Task CRUD ----
function addTaskIntoStage(stageId) {
  const t = {
    uuid: uuidv4(),
    title: '新任务',
    description: '',
    category: state.board.categories[0]?.uuid || null,
    steps: [],
  };
  state.board.tasks.push(t);
  const s = getStage(stageId);
  if (s) {
    if (!Array.isArray(s.tasks)) s.tasks = [];
    s.tasks.push(t.uuid);
  }
  state.dirty = true;
  logEvent('task-add', { task: t.uuid, stage: stageId });
  renderBoard();
  openTaskModal(t.uuid);
}

function openTaskModal(taskId) {
  state.selectedTaskId = taskId;
  const t = getTask(taskId);
  if (!t) return;
  el.taskTitleInput.value = t.title || '';
  el.taskDescInput.value = t.description || '';
  // categories
  while (el.taskCategorySelect.firstChild) el.taskCategorySelect.removeChild(el.taskCategorySelect.firstChild);
  const none = document.createElement('option');
  none.value = '';
  none.textContent = '未分类';
  el.taskCategorySelect.appendChild(none);
  state.board.categories.forEach((c) => {
    const op = document.createElement('option');
    op.value = c.uuid;
    op.textContent = c.title;
    el.taskCategorySelect.appendChild(op);
  });
  el.taskCategorySelect.value = t.category || '';

  // steps
  renderStepList(t);

  el.taskModal.classList.remove('hidden');
}

function renderStepList(t) {
  el.stepsContainer.innerHTML = '';
  const steps = Array.isArray(t.steps) ? t.steps : [];
  steps.forEach((step, idx) => {
    const row = createEl('div', 'step-item');
    const cb = document.createElement('input');
    cb.type = 'checkbox';
    cb.checked = !!step.done;
    cb.addEventListener('change', () => {
      step.done = cb.checked;
      state.dirty = true;
    });
    row.appendChild(cb);
    const txt = document.createElement('input');
    txt.type = 'text';
    txt.value = step.details || '';
    txt.addEventListener('change', () => {
      step.details = txt.value;
      state.dirty = true;
    });
    row.appendChild(txt);
    const del = document.createElement('button');
    del.className = 'icon-btn';
    del.textContent = '🗑';
    del.title = '删除步骤';
    del.addEventListener('click', () => {
      t.steps.splice(idx, 1);
      renderStepList(t);
      state.dirty = true;
    });
    row.appendChild(del);
    el.stepsContainer.appendChild(row);
  });
}

function closeTaskModal() {
  el.taskModal.classList.add('hidden');
  state.selectedTaskId = null;
}

function saveTaskFromModal() {
  const id = state.selectedTaskId;
  const t = getTask(id);
  if (!t) return;
  const prev = deepClone(t);
  t.title = el.taskTitleInput.value.trim() || t.title;
  t.description = el.taskDescInput.value;
  t.category = el.taskCategorySelect.value || null;
  // steps already bound
  state.dirty = true;
  renderBoard();
  logEvent('task-edit', { id, before: prev, after: t });
  closeTaskModal();
}

function deleteTask() {
  const id = state.selectedTaskId;
  if (!id) return;
  if (!confirm('删除该任务？此操作不可撤销')) return;
  // remove from stages
  state.board.stages.forEach((s) => {
    s.tasks = (s.tasks || []).filter((tid) => tid !== id);
  });
  // remove task
  const idx = idxById(state.board.tasks, id);
  const prev = state.board.tasks[idx];
  state.board.tasks.splice(idx, 1);
  state.dirty = true;
  logEvent('task-delete', { id, task: prev });
  renderBoard();
  closeTaskModal();
}

// ---- Stage CRUD ----
function addStage() {
  const title = prompt('阶段名称？');
  if (!title) return;
  let colIndex = 0;
  if (state.board.layout.columns.length > 1) {
    const ans = prompt(`放入第几列（1 - ${state.board.layout.columns.length}）？`, '1');
    const n = Math.max(1, Math.min(Number(ans) || 1, state.board.layout.columns.length));
    colIndex = n - 1;
  }
  const s = { uuid: uuidv4(), title: title.trim(), tasks: [] };
  state.board.stages.push(s);
  if (!state.board.layout.columns.length) state.board.layout.columns.push([]);
  state.board.layout.columns[colIndex].push(s.uuid);
  state.dirty = true;
  renderBoard();
  renderLayoutInfo();
  logEvent('stage-add', { id: s.uuid, title: s.title, col: colIndex });
}

function renameStage(stageId) {
  const s = getStage(stageId);
  if (!s) return;
  const title = prompt('新的阶段名称？', s.title || '');
  if (!title) return;
  const prev = s.title;
  s.title = title.trim();
  state.dirty = true;
  renderBoard();
  logEvent('stage-rename', { id: s.uuid, from: prev, to: s.title });
}

function deleteStage(stageId) {
  const s = getStage(stageId);
  if (!s) return;
  if ((s.tasks || []).length) return alert('阶段非空，暂不支持删除非空阶段');
  if (!confirm(`删除阶段“${s.title}”？`)) return;
  state.board.stages = state.board.stages.filter((x) => x.uuid !== stageId);
  // remove from layout columns
  state.board.layout.columns = state.board.layout.columns.map((col) => col.filter((id) => id !== stageId));
  state.dirty = true;
  renderBoard();
  renderLayoutInfo();
  logEvent('stage-delete', { id: stageId });
}

function addColumn() {
  if (!state.board.layout.columns) state.board.layout.columns = [];
  state.board.layout.columns.push([]);
  state.dirty = true;
  renderBoard();
  renderLayoutInfo();
  logEvent('column-add', { count: state.board.layout.columns.length });
}

function moveStageToColumn(stageId) {
  const cols = state.board.layout.columns;
  if (!cols || !cols.length) return alert('暂无列');
  const ans = prompt(`移动到第几列（1 - ${cols.length}）?`, '1');
  let target = Math.max(1, Math.min(Number(ans) || 1, cols.length)) - 1;
  // remove from any column first
  cols.forEach((col, i) => {
    const idx = col.indexOf(stageId);
    if (idx !== -1) col.splice(idx, 1);
  });
  cols[target].push(stageId);
  state.dirty = true;
  renderBoard();
  renderLayoutInfo();
  logEvent('stage-move-column', { id: stageId, to: target });
}

// ---- Categories CRUD ----
function addCategory() {
  const title = prompt('类别名称？');
  if (!title) return;
  const color = prompt('颜色 hex（不含 #），例如 ff0000？', '70bafa') || '70bafa';
  const c = { uuid: uuidv4(), title: title.trim(), color: color.replace(/#/g, '').slice(0, 6) };
  state.board.categories.push(c);
  state.dirty = true;
  populateCategoryFilter();
  renderCategories();
  renderBoard();
  logEvent('category-add', { id: c.uuid, title: c.title });
}

// ---- Import / Merge ----
function idSet(arr) {
  const s = new Set();
  arr.forEach((x) => s.add(x.uuid));
  return s;
}

function diffArrays(a, b) {
  // arrays of ids
  const sa = new Set(a);
  const sb = new Set(b);
  const added = b.filter((x) => !sa.has(x));
  const removed = a.filter((x) => !sb.has(x));
  const changedOrder = JSON.stringify(a) !== JSON.stringify(b);
  return { added, removed, changedOrder };
}

function diffBoards(cur, imp) {
  const diff = { tasks: {}, stages: {}, categories: {}, layout: { changed: false } };
  // tasks
  const curTasks = idSet(cur.tasks);
  const impTasks = idSet(imp.tasks);
  diff.tasks.added = imp.tasks.filter((t) => !curTasks.has(t.uuid)).map((t) => t.uuid);
  diff.tasks.removed = cur.tasks.filter((t) => !impTasks.has(t.uuid)).map((t) => t.uuid);
  diff.tasks.modified = [];
  cur.tasks.forEach((t) => {
    if (!impTasks.has(t.uuid)) return;
    const it = imp.tasks.find((x) => x.uuid === t.uuid);
    const fields = [];
    if ((t.title || '') !== (it.title || '')) fields.push('title');
    if ((t.description || '') !== (it.description || '')) fields.push('description');
    if ((t.category || '') !== (it.category || '')) fields.push('category');
    if (JSON.stringify(t.steps || []) !== JSON.stringify(it.steps || [])) fields.push('steps');
    if (fields.length) diff.tasks.modified.push({ id: t.uuid, fields });
  });

  // categories
  const curCats = idSet(cur.categories);
  const impCats = idSet(imp.categories);
  diff.categories.added = imp.categories.filter((c) => !curCats.has(c.uuid)).map((c) => c.uuid);
  diff.categories.removed = cur.categories.filter((c) => !impCats.has(c.uuid)).map((c) => c.uuid);
  diff.categories.modified = [];
  cur.categories.forEach((c) => {
    if (!impCats.has(c.uuid)) return;
    const ic = imp.categories.find((x) => x.uuid === c.uuid);
    const fields = [];
    if ((c.title || '') !== (ic.title || '')) fields.push('title');
    if ((c.color || '') !== (ic.color || '')) fields.push('color');
    if (fields.length) diff.categories.modified.push({ id: c.uuid, fields });
  });

  // stages
  const curStages = idSet(cur.stages);
  const impStages = idSet(imp.stages);
  diff.stages.added = imp.stages.filter((s) => !curStages.has(s.uuid)).map((s) => s.uuid);
  diff.stages.removed = cur.stages.filter((s) => !impStages.has(s.uuid)).map((s) => s.uuid);
  diff.stages.modified = [];
  cur.stages.forEach((s) => {
    if (!impStages.has(s.uuid)) return;
    const is = imp.stages.find((x) => x.uuid === s.uuid);
    const fields = [];
    if ((s.title || '') !== (is.title || '')) fields.push('title');
    const da = diffArrays(s.tasks || [], is.tasks || []);
    if (da.added.length || da.removed.length || da.changedOrder) fields.push('tasks');
    if (fields.length) diff.stages.modified.push({ id: s.uuid, fields });
  });

  // layout
  diff.layout.changed = JSON.stringify(cur.layout || {}) !== JSON.stringify(imp.layout || {});

  return diff;
}

function showMergePreview(imported, importedName = '导入文件') {
  const cur = state.board || makeEmptyBoard();
  const diff = diffBoards(cur, imported);
  // Summary
  el.diffSummary.innerHTML = '';
  const items = [
    { title: '任务新增', num: diff.tasks.added.length },
    { title: '任务删除', num: diff.tasks.removed.length },
    { title: '任务修改', num: diff.tasks.modified.length },
    { title: '阶段新增', num: diff.stages.added.length },
    { title: '阶段删除', num: diff.stages.removed.length },
    { title: '阶段修改', num: diff.stages.modified.length },
  ];
  items.forEach((it) => {
    const card = createEl('div', 'summary-card');
    card.appendChild(createEl('h4', null, it.title));
    card.appendChild(createEl('div', 'num', it.num));
    el.diffSummary.appendChild(card);
  });

  // Details
  const det = [];
  det.push(`[文件] ${importedName}`);
  det.push(`Tasks: +${diff.tasks.added.length} -${diff.tasks.removed.length} ~${diff.tasks.modified.length}`);
  if (diff.tasks.added.length) det.push('  新增: ' + diff.tasks.added.join(', '));
  if (diff.tasks.removed.length) det.push('  删除: ' + diff.tasks.removed.join(', '));
  diff.tasks.modified.forEach((m) => det.push(`  修改: ${m.id} -> ${m.fields.join(', ')}`));
  det.push(`Stages: +${diff.stages.added.length} -${diff.stages.removed.length} ~${diff.stages.modified.length}`);
  if (diff.stages.added.length) det.push('  新增: ' + diff.stages.added.join(', '));
  if (diff.stages.removed.length) det.push('  删除: ' + diff.stages.removed.join(', '));
  diff.stages.modified.forEach((m) => det.push(`  修改: ${m.id} -> ${m.fields.join(', ')}`));
  det.push(`Layout changed: ${diff.layout.changed}`);
  el.diffDetails.textContent = det.join('\n');

  // Save imported data holder on modal element
  el.mergeModal.dataset.payload = JSON.stringify(imported);
  el.mergeModal.classList.remove('hidden');
}

function closeMergeModal() {
  el.mergeModal.classList.add('hidden');
  el.mergeModal.dataset.payload = '';
}

function applyMerge() {
  const imported = JSON.parse(el.mergeModal.dataset.payload || '{}');
  if (!imported || !imported.tasks) return;
  const policy = el.mergePolicy.value; // 'prefer-import' | 'prefer-current'
  const removeMissing = el.mergeRemoveMissing.checked;

  const cur = state.board;
  const imp = imported;

  // Merge categories
  const curCatMap = Object.fromEntries(cur.categories.map((c) => [c.uuid, c]));
  const impCatMap = Object.fromEntries(imp.categories.map((c) => [c.uuid, c]));
  // add new
  imp.categories.forEach((c) => {
    if (!curCatMap[c.uuid]) cur.categories.push(deepClone(c));
  });
  // update existing
  cur.categories.forEach((c) => {
    const ic = impCatMap[c.uuid];
    if (!ic) return;
    if (policy === 'prefer-import') {
      c.title = ic.title;
      c.color = ic.color;
    }
  });
  if (removeMissing) {
    cur.categories = cur.categories.filter((c) => !!impCatMap[c.uuid]);
  }

  // Merge tasks
  const curTaskMap = Object.fromEntries(cur.tasks.map((t) => [t.uuid, t]));
  const impTaskMap = Object.fromEntries(imp.tasks.map((t) => [t.uuid, t]));
  // add new
  imp.tasks.forEach((t) => {
    if (!curTaskMap[t.uuid]) cur.tasks.push(deepClone(t));
  });
  // update existing
  cur.tasks.forEach((t) => {
    const it = impTaskMap[t.uuid];
    if (!it) return;
    if (policy === 'prefer-import') {
      t.title = it.title;
      t.description = it.description;
      t.category = it.category;
      t.steps = deepClone(it.steps || []);
    }
  });
  if (removeMissing) {
    const keep = new Set(imp.tasks.map((t) => t.uuid));
    cur.tasks = cur.tasks.filter((t) => keep.has(t.uuid));
  }

  // Merge stages
  const curStageMap = Object.fromEntries(cur.stages.map((s) => [s.uuid, s]));
  const impStageMap = Object.fromEntries(imp.stages.map((s) => [s.uuid, s]));
  // add new
  imp.stages.forEach((s) => {
    if (!curStageMap[s.uuid]) cur.stages.push(deepClone(s));
  });
  // update existing
  cur.stages.forEach((s) => {
    const is = impStageMap[s.uuid];
    if (!is) return;
    if (policy === 'prefer-import') {
      s.title = is.title;
      s.tasks = deepClone(is.tasks || []);
    }
  });
  if (removeMissing) {
    const keep = new Set(imp.stages.map((s) => s.uuid));
    cur.stages = cur.stages.filter((s) => keep.has(s.uuid));
  }

  // layout
  if (policy === 'prefer-import') {
    cur.layout = deepClone(imp.layout || { columns: [] });
  }

  state.dirty = true;
  renderAll();
  logEvent('merge-apply', { policy, removeMissing });
  closeMergeModal();
}

// ---- Event wiring ----
el.openFile.addEventListener('change', handleOpenFile);
el.importFile.addEventListener('change', handleImportFile);
el.saveBtn.addEventListener('click', handleSave);
el.newBoardBtn.addEventListener('click', handleNewBoard);
el.actorInput.addEventListener('change', () => {
  if (!state.board?.meta) return;
  state.board.meta.actor = el.actorInput.value.trim();
  state.dirty = true;
  updateFileStatus();
});
el.searchInput.addEventListener('input', renderBoard);
el.categoryFilter.addEventListener('change', renderBoard);
el.addCategoryBtn.addEventListener('click', addCategory);
el.clearHistoryBtn.addEventListener('click', () => {
  if (confirm('清空历史记录？将写入文件。')) {
    state.board.meta.history = [];
    state.board.meta.modifiedAt = nowIso();
    state.dirty = true;
    renderHistory();
    logEvent('history-clear', {});
  }
});
el.addStageBtn.addEventListener('click', addStage);
el.addColumnBtn.addEventListener('click', addColumn);

// Task modal events
el.taskModalClose.addEventListener('click', closeTaskModal);
el.addStepBtn.addEventListener('click', () => {
  const t = getTask(state.selectedTaskId);
  if (!t) return;
  if (!Array.isArray(t.steps)) t.steps = [];
  t.steps.push({ details: '新步骤', done: false });
  state.dirty = true;
  renderStepList(t);
});
el.taskSaveBtn.addEventListener('click', saveTaskFromModal);
el.deleteTaskBtn.addEventListener('click', deleteTask);

// Merge modal events
el.mergeModalClose?.addEventListener('click', closeMergeModal);
el.applyMergeBtn?.addEventListener('click', applyMerge);

// Bootstrap
bootstrapLoad();