onMounted(() => {
  Sortable.create(document.getElementById("task-list"), {
    handle: ".drag-handle",
    animation: 150,
    forceFallback: true,
    onEnd(evt) {
      if (evt.newIndex === evt.oldIndex) return;
      const movedItem = tasks.value.splice(evt.oldIndex, 1)[0];
      tasks.value.splice(evt.newIndex, 0, movedItem);
      saveTasks(currentDate.value, tasks.value, false).catch((e) => {
        tasks.value.splice(evt.newIndex, 1);
        tasks.value.splice(evt.oldIndex, 0, movedItem);
      });
    },
  });
});

import { invoke } from "@tauri-apps/api/core";

export function saveTasks(date, tasks, append = true) {
  return new Promise((resolve, reject) => {
    invoke("save_tasks", {
      date: formatDate(date),
      tasks: reverseTransformTask(tasks),
      append,
    })
      .then(() => {
        resolve();
      })
      .catch((e) => {
        console.error("saveTasks error", e);
        showMessage("保存任务失败", "error");
        reject(e);
      });
  });
}

function dayClass(d) {
  const ds = formatDate(d);
  const task = taskMap.value.get(ds);

  const today = new Date();
  const isToday = ds === formatDate(today);

  if (isToday) return "today";
  if (!task) return "";
  const isOtherMonth = d.getMonth() !== currentDate.value.getMonth();
  let result = task.completed === task.total ? "complete" : "incomplete";
  return result + (isOtherMonth ? " other-month" : "");
}

export async function getThreeMonthsStats(date) {
  const curr = new Date(date);
  const last = new Date(date);
  const next = new Date(date);

  last.setMonth(last.getMonth() - 1);
  next.setMonth(next.getMonth() + 1);

  const [lastStats, currStats, nextStats] = await Promise.all([
    invoke("get_monthly_task_stats", ym(last)),
    invoke("get_monthly_task_stats", ym(curr)),
    invoke("get_monthly_task_stats", ym(next)),
  ]);

  return [lastStats, currStats, nextStats];
}

async function loadThreeMonthData(date) {
  const [prev, curr, next] = await getThreeMonthsStats(date);
  taskMap.value.clear();
  fillTaskMap([prev, curr, next]);
}

// 日期选择器切换月份时触发
async function onMonthChange({ instance, month, year }) {
  const d = new Date(year, month - 1);
  await loadThreeMonthData(d);
}

async function openCalendar() {
  loadThreeMonthData(currentDate.value);
}

import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
import { PhysicalPosition } from "@tauri-apps/api/dpi";

const state = {
  mouseStartX: 0,
  mouseStartY: 0,
  windowStartX: 0,
  windowStartY: 0,
  isDragging: false,
};

export function startDragEvent(event, windowLabel, mousemoveCallback, mouseupCallback) {
  if (event.button !== 0) return;
  state.mouseStartX = event.screenX;
  state.mouseStartY = event.screenY;
  state.isDragging = true;
  
  WebviewWindow.getByLabel(windowLabel).then(async (w) => {
    const pos = await w.outerPosition();
    state.windowStartX = pos.x;
    state.windowStartY = pos.y;

    const move = async (e2) => {
      if (!state.isDragging) return;
      const deltaX = e2.screenX - state.mouseStartX;
      const deltaY = e2.screenY - state.mouseStartY;
      const newPos = new PhysicalPosition(
        state.windowStartX + Math.floor(deltaX * window.devicePixelRatio),
        state.windowStartY + Math.floor(deltaY * window.devicePixelRatio)
      );
      w.setPosition(newPos);
      mousemoveCallback && mousemoveCallback(e2);
    };

    const up = e => {
      state.isDragging = false;
      window.removeEventListener("mousemove", move);
      window.removeEventListener("mouseup", up);
      mouseupCallback && mouseupCallback(e);
    };

    window.addEventListener("mousemove", move);
    window.addEventListener("mouseup", up);
  });
  return state;
}

<header class="header" @mousedown.self="(e) => startDragEvent(e, 'main')"></header>
<main class="main" @mousedown.self="(e) => startDragEvent(e, 'main')"></main>
<footer class="footer" @mousedown.self="(e) => startDragEvent(e, 'main')"></footer>

import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
import { PhysicalPosition } from "@tauri-apps/api/dpi";
import { startDragEvent } from "./drag.js";

/**
 * 悬浮窗口通用逻辑
 * @param {Object} options
 * @param {() => HTMLElement|null} options.getElement - 返回需要计算圆心和半径的 DOM（image / canvas）
 * @param {number|null} options.fixedRadius - 固定半径（如果 DOM 不规则大小/需要固定半径）
 * @param {string} options.dragKey - startDragEvent 的 key（float-ball / countdown）
 * @param {(e: MouseEvent) => boolean} [options.ignoreStartDrag] - 判断是否允许开始拖拽
 */
export function useFloatingWindow(options) {
  const win = WebviewWindow.getCurrent();
  let isVisible = false;

  // --- 鼠标拖拽 ---
  let dragData = { isDragging: false };

  const startDrag = (e) => {
    if (dragData.isDragging) return;
    if (options.ignoreStartDrag && options.ignoreStartDrag(e)) return;
    if (e.button !== 0) return;
    dragData = startDragEvent(e, options.dragKey, null, () => {
      clickThrough.update();
    });
  };

  // --- 悬浮圆检测 & 穿透点击 ---
  const clickThrough = {
    isIgnored: false,
    circleCenter: { x: 0, y: 0 },
    radius: options.fixedRadius || 0,
    r2: 0,
    update() {
      const el = options.getElement();
      if (!el) return;
      const rect = el.getBoundingClientRect();

      // DOM 模式
      let radius = options.fixedRadius ?? rect.height / 2;

      this.circleCenter = {
        x:
          (window.screenLeft + rect.left + rect.width / 2) *
          window.devicePixelRatio,
        y:
          (window.screenTop + rect.top + rect.height / 2) *
          window.devicePixelRatio,
      };

      this.radius = radius * window.devicePixelRatio;
      this.r2 = this.radius * this.radius;
    },
    isInCircle(x, y) {
      const dx = x - this.circleCenter.x;
      const dy = y - this.circleCenter.y;
      return dx * dx + dy * dy <= this.r2;
    },
  };

  // 公共入口注册函数
  function registerOpenEvent(eventName) {
    win.listen(eventName, ({ payload }) => {
      isVisible = true;
      win.setIgnoreCursorEvents(false);
      win.setIgnoreCursorEvents(true);
      win.setIgnoreCursorEvents(false);
      clickThrough.isIgnored = false;

      // 重新定位弹出窗
      let x = payload.x > 0 ? payload.x : 0;
      let y = payload.y > 0 ? payload.y : 0;
      x = x + 60 > window.screen.width ? x - 60 : x;
      y = y + 60 > window.screen.height ? y - 60 : y;

      win
        .setPosition(
          new PhysicalPosition(
            Math.floor(x * window.devicePixelRatio),
            Math.floor(y * window.devicePixelRatio)
          )
        )
        .then(() => {
          win.show();
          clickThrough.update();
        });
    });
  }

  // 鼠标区域检测逻辑
  win.listen("device-mouse-move", ({ payload }) => {
    if (!isVisible) return;
    const isInArea = clickThrough.isInCircle(payload.x, payload.y);
    const shouldIgnore = !dragData.isDragging && !isInArea;
    if (shouldIgnore !== clickThrough.isIgnored) {
      win.setIgnoreCursorEvents(shouldIgnore);
      clickThrough.isIgnored = shouldIgnore;
    }
  });

  return {
    startDrag,
    clickThrough,
    registerOpenEvent,
    setVisible(v) {
      isVisible = v;
    },
    getVisible() {
      return isVisible;
    }
  };
}

    win.setIgnoreCursorEvents(false);
    win.setIgnoreCursorEvents(true); // 这一步会触发重绘导致背景变白
    win.setIgnoreCursorEvents(false); // 再次设置回正常状态

// 传入菜单数组，每个元素格式:
// { label: "xxxx" 或 "<b>HTML</b>", onClick: () => {} }
export async function openMenu(menuItems, x, y) {
  const label = "custom-context-menu";

  // 如果已经有菜单存在 → 先关闭
  const exists = await WebviewWindow.getByLabel(label);
  if (exists) {
    await exists.close();
  }

  const labelList = menuItems.map((item) => item.label);
  const callbackList = menuItems.map((item) =>
    typeof item.onClick === "function" ? item.onClick : null
  );

  // 创建新菜单窗口
  const menuWin = new WebviewWindow(label, {
    url: `/src/html/custom-context-menu.html?data=${encodeURIComponent(
      JSON.stringify(labelList)
    )}`,
    decorations: false,
    transparent: true,
    alwaysOnTop: true,
    skipTaskbar: true,
    resizable: false,
    shadow: false,
    visible: false, // 防止闪烁，先隐藏，等内容加载完再显示
    width: 200,
    height: menuItems.length * 40 + 16,
    x,
    y,
  });
  menuWin.once("tauri://error", function (e) {
    console.error(e);
  });

  let unlisten = null;
  // 监听菜单项点击事件
  unlisten = await listen("context-menu-item-click", async (event) => {
    const index = event.payload.index;
    if (index >= 0 && index < menuItems.length) {
      const callback = callbackList[index];
      if (callback) {
        callback();
      }
    }
    if (unlisten) {
      unlisten();
    }
  });

  return menuWin;
}

const { startDrag, clickThrough, registerOpenEvent, setVisible } = useFloatingWindow({
  fixedRadius: 130,
  dragKey: "countdown",
  getElement: () => canvas.value,
  ignoreStartDrag: (e) => ["BUTTON", "INPUT"].includes(e.target.tagName),
});

const drawCircle = () => {
  const ctx = canvas.value.getContext("2d");
  const radius = circleRadius;
  ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);

  ctx.lineWidth = 10;
  ctx.strokeStyle = "#e0e0e0";
  ctx.beginPath();
  ctx.arc(150, 150, radius, 0, Math.PI * 2);
  ctx.stroke();

  if (!state.value.isRunning && !state.value.isFlashing) return;

  if (state.value.isFlashing) {
    ctx.strokeStyle = state.value.flashState ? "#31ddf4" : "#e0e0e0";
    ctx.beginPath();
    ctx.arc(150, 150, radius, 0, Math.PI * 2);
    ctx.stroke();
    return;
  }

  const progress = 1 - remainingSeconds / totalSeconds;
  const start = -Math.PI / 2;
  const end = start + Math.PI * 2 * progress;

  const red = Math.min(255, 255 * progress);
  const green = Math.min(255, 255 * (1 - progress));
  ctx.strokeStyle = state.value.isPaused ? "#FFC107" : `rgb(${red},${green},0)`;

  ctx.beginPath();
  ctx.arc(150, 150, radius, start, end);
  ctx.stroke();
};

const state = ref({
  isRunning: false,
  isPaused: false,
  isFlashing: false,
  flashState: false,
});

const startCountdown = () => {
  stopFlashing();
  remainingSeconds = inputTime.value.minutes * 60 + inputTime.value.seconds;
  totalSeconds = remainingSeconds;
  if (totalSeconds <= 0) return;

  state.value.isRunning = true;
  state.value.isPaused = false;

  interval = setInterval(updateCountdown, 1000);
  updateDisplayTime();
  drawCircle();
};

const updateCountdown = () => {
  remainingSeconds--;
  drawCircle();
  updateDisplayTime();

  if (remainingSeconds <= 0) {
    clearInterval(interval);
    state.value.isRunning = false;
    startFlashing();
  }
};

const pauseCountdown = () => {
  if (state.value.isPaused) {
    interval = setInterval(updateCountdown, 1000);
  } else {
    clearInterval(interval);
  }
  state.value.isPaused = !state.value.isPaused;
  drawCircle();
};

const stopCountdown = () => {
  clearInterval(interval);
  stopFlashing();
  state.value.isRunning = false;
  state.value.isPaused = false;
  remainingSeconds = 0;
  drawCircle();
};

const startFlashing = () => {
  state.value.isFlashing = true;
  flashInterval = setInterval(() => {
    state.value.flashState = !state.value.flashState;
    drawCircle();
  }, 500);
};

const stopFlashing = () => {
  state.value.isFlashing = false;
  state.value.flashState = false;
  clearInterval(flashInterval);
};