/* 프로젝트 관리(아사나식) 모듈 — 프론트엔드.
 * 두 페이지에서 공용:
 *   - index.html (홈): 새 프로젝트 모달
 *   - project.html: 달력/타임라인/보드/리스트 뷰 + 업무 CRUD + 서브/멤버 관리
 * 의존: FullCalendar(전역), vis(전역). 둘 다 project.html 에서만 로드.
 */
(function () {
  "use strict";

  // ── 공용 fetch ─────────────────────────────────────────────
  async function api(method, url, body) {
    const opts = { method, headers: { "Content-Type": "application/json" } };
    if (body !== undefined) opts.body = JSON.stringify(body);
    const res = await fetch(url, opts);
    if (!res.ok) {
      let msg = res.statusText;
      try { msg = (await res.json()).detail || msg; } catch (_) {}
      throw new Error(msg);
    }
    if (res.status === 204) return null;
    return res.json();
  }

  function el(id) { return document.getElementById(id); }
  function openModal(m) { if (m) m.hidden = false; }
  function closeModal(m) { if (m) m.hidden = true; }

  function wireModalClose(modal) {
    if (!modal) return;
    modal.addEventListener("click", function (e) {
      if (e.target === modal || e.target.hasAttribute("data-close")) closeModal(modal);
    });
  }

  // ── 색상 팔레트 렌더 ───────────────────────────────────────
  function renderColorPalette(container, onPick, initial) {
    const colors = window.PJ_COLORS || ["#4573d2"];
    let selected = (initial && colors.indexOf(initial) >= 0) ? initial : colors[0];
    container.innerHTML = "";
    colors.forEach(function (c) {
      const b = document.createElement("button");
      b.type = "button";
      b.className = "pj-color-swatch";
      b.style.background = c;
      if (c === selected) b.classList.add("is-active");
      b.addEventListener("click", function () {
        selected = c;
        container.querySelectorAll(".pj-color-swatch").forEach(function (x) {
          x.classList.remove("is-active");
        });
        b.classList.add("is-active");
        if (onPick) onPick(c);
      });
      container.appendChild(b);
    });
    return function () { return selected; };
  }

  // ════════════════════════════════════════════════════════════
  // 홈 페이지 — 새 프로젝트
  // ════════════════════════════════════════════════════════════
  function initHome() {
    const grid = el("pj-project-grid");
    if (!grid && !el("pj-toggle-done")) return;  // 홈 아님
    const wrap = document.querySelector(".pj-wrap");
    const me = ((wrap && wrap.dataset.me) || "").toLowerCase();
    const isSuper = !!(wrap && wrap.dataset.isSuper === "true");
    function canDelete(createdBy) {
      if (isSuper) return true;
      const cb = (createdBy || "").toLowerCase();
      return !!cb && cb === me;
    }

    // ── 완료 프로젝트 숨기기 토글 (localStorage 기억) ──
    const toggleBtn = el("pj-toggle-done");
    if (toggleBtn) {
      const KEY = "pj_hide_done";
      function apply(hide) {
        if (grid) grid.classList.toggle("pj-hide-done", hide);
        const n = toggleBtn.dataset.count;
        toggleBtn.textContent = hide ? "완료 " + n + "개 보기" : "완료 " + n + "개 숨기기";
      }
      apply(localStorage.getItem(KEY) === "1");
      toggleBtn.addEventListener("click", function () {
        const hide = !(grid && grid.classList.contains("pj-hide-done"));
        try { localStorage.setItem(KEY, hide ? "1" : "0"); } catch (_) {}
        apply(hide);
      });
    }

    // ── 새 프로젝트 모달 ──
    const newBtn = el("pj-new-project");
    const modal = el("pj-modal-project");
    if (newBtn && modal) {
      wireModalClose(modal);
      const getColor = renderColorPalette(el("pj-f-colors"));
      newBtn.addEventListener("click", function () { openModal(modal); });
      el("pj-save-project").addEventListener("click", async function () {
        const name = el("pj-f-name").value.trim();
        if (!name) { alert("이름을 입력하세요."); return; }
        try {
          await api("POST", "/project/api/projects", {
            name: name,
            description: el("pj-f-desc").value.trim(),
            start_date: el("pj-f-start").value || null,
            due_date: el("pj-f-due").value || null,
            color: getColor(),
          });
          location.reload();
        } catch (e) { alert("생성 실패: " + e.message); }
      });
    }

    // ── 프로젝트 수정 모달 ──
    const editModal = el("pj-modal-edit");
    if (editModal && grid) {
      wireModalClose(editModal);
      let getEditColor = null;
      grid.querySelectorAll(".pj-card-edit").forEach(function (btn) {
        btn.addEventListener("click", function (e) {
          e.preventDefault(); e.stopPropagation();
          const card = btn.closest(".pj-project-card");
          el("pj-e-id").value = card.dataset.id;
          el("pj-e-name").value = card.dataset.name || "";
          el("pj-e-desc").value = card.dataset.desc || "";
          el("pj-e-start").value = card.dataset.start || "";
          el("pj-e-due").value = card.dataset.due || "";
          el("pj-e-done").checked = card.dataset.status === "completed";
          getEditColor = renderColorPalette(el("pj-e-colors"), null, card.dataset.color);
          openModal(editModal);
        });
      });
      el("pj-save-edit").addEventListener("click", async function () {
        const id = el("pj-e-id").value;
        const name = el("pj-e-name").value.trim();
        if (!name) { alert("이름을 입력하세요."); return; }
        try {
          await api("PUT", "/project/api/projects/" + id, {
            name: name,
            description: el("pj-e-desc").value.trim(),
            start_date: el("pj-e-start").value || null,
            due_date: el("pj-e-due").value || null,
            color: getEditColor ? getEditColor() : undefined,
            status: el("pj-e-done").checked ? "completed" : "active",
          });
          location.reload();
        } catch (e) { alert("저장 실패: " + e.message); }
      });
      el("pj-delete-project").addEventListener("click", async function () {
        const id = el("pj-e-id").value;
        const card = grid.querySelector('.pj-project-card[data-id="' + id + '"]');
        if (card && !canDelete(card.dataset.creator)) { alert("삭제는 만든 사람만 할 수 있습니다."); return; }
        if (!confirm("이 프로젝트를 삭제할까요? 안의 업무도 모두 삭제됩니다.")) return;
        try { await api("DELETE", "/project/api/projects/" + id); location.reload(); }
        catch (e) { alert("삭제 실패: " + e.message); }
      });
    }
  }

  // ════════════════════════════════════════════════════════════
  // 프로젝트 페이지
  // ════════════════════════════════════════════════════════════
  function initProject() {
    const root = document.querySelector(".pj-project-view");
    if (!root) return;
    const projectId = parseInt(root.dataset.projectId, 10);
    const canManage = root.dataset.canManage === "true";
    const isAdmin = root.dataset.isAdmin === "true";
    const me = (root.dataset.me || "").toLowerCase();
    const isSuper = root.dataset.isSuper === "true";
    // 삭제는 만든 사람만(슈퍼관리자 예외). created_by 없으면 서버가 최종 판정.
    function canDelete(createdBy) {
      if (isSuper) return true;
      const cb = (createdBy || "").toLowerCase();
      return !!cb && cb === me;
    }
    const DELETE_DENIED = "삭제는 만든 사람만 할 수 있습니다.";
    // 댓글 있으면 말풍선 아이콘(+개수). 색은 currentColor 상속(막대=흰, 카드/리스트=진회색).
    function cmtBadge(t, cls) {
      const n = t.comment_count || 0;
      if (!n) return "";
      return '<span class="pj-cmt-ic ' + (cls || "") +
        '" title="댓글 ' + n + '개">💬</span><span class="pj-cmt-n">' + n + "</span>";
    }

    const dataEl = el("pj-data");
    const data = JSON.parse(dataEl.textContent);
    let stages = data.stages || [];
    let tasks = data.tasks || [];
    const members = data.members || [];
    const priorityLabels = data.priorityLabels || {};
    // 전체 프로젝트 집계 데이터 — 4개 뷰는 전 프로젝트를 보여준다.
    const projectsMeta = data.projects || [];
    const stagesByProject = data.stagesByProject || {};
    const boardStages = data.boardStages || [];
    const avatars = data.avatars || {};
    // 담당자/작성자 아이콘 = 구글 프로필 이미지(원형). 없으면 기본 아이콘.
    function avatarHtml(email, cls) {
      const url = email ? avatars[String(email).toLowerCase()] : "";
      const c = cls || "";
      if (url) return '<img class="pj-avatar ' + c + '" src="' + escapeHtml(url) + '" alt="" referrerpolicy="no-referrer">';
      return '<span class="material-symbols-outlined pj-gicon ' + c + '">account_circle</span>';
    }

    let timeline = null;
    let currentView = "calendar";

    // ── 뷰 토글 ──
    const tabs = el("pj-view-tabs");
    tabs.addEventListener("click", function (e) {
      const btn = e.target.closest(".pj-tab");
      if (!btn) return;
      const view = btn.dataset.view;
      tabs.querySelectorAll(".pj-tab").forEach(function (t) {
        t.classList.toggle("is-active", t === btn);
      });
      document.querySelectorAll(".pj-view").forEach(function (v) {
        v.hidden = v.dataset.view !== view;
      });
      currentView = view;
      renderView(view);
    });

    function renderView(view) {
      if (view === "calendar") renderCalendar();
      else if (view === "timeline") renderTimeline();
      else if (view === "board") renderBoard();
      else if (view === "list") renderList();
    }

    // ════════════════════════════════════════════════════════════
    // 달력 — 구글 캘린더식. 막대(칩)는 클라이언트가 그린다.
    //  · 한 주에 표시 행 수 제한(MAX_LANES) → 넘치면 "+N" 칩, 클릭 시 그날 목록 팝오버
    //  · 드래그 이동: 낙관적 업데이트(즉시 다시 그림, 새로고침 없음) + 실패 시 롤백
    // ════════════════════════════════════════════════════════════
    const MAX_LANES = 3;

    function addDays(dstr, days) {
      if (!dstr) return null;
      const d = new Date(dstr + "T00:00:00");
      d.setDate(d.getDate() + days);
      const y = d.getFullYear(), m = String(d.getMonth() + 1).padStart(2, "0"), dd = String(d.getDate()).padStart(2, "0");
      return y + "-" + m + "-" + dd;
    }
    function dayDiff(a, b) {
      return Math.round((new Date(b + "T00:00:00") - new Date(a + "T00:00:00")) / 86400000);
    }
    function clearDropHL() {
      document.querySelectorAll(".pj-day.pj-drop-over").forEach(function (d) { d.classList.remove("pj-drop-over"); });
    }
    function dayCellAt(x, y) {
      const elAt = document.elementFromPoint(x, y);
      return elAt ? elAt.closest(".pj-day[data-date]") : null;
    }
    // 업무 표시 기간 [시작, 끝] (문자열, 끝>=시작). 둘 중 하나만 있으면 단일일.
    function taskSpan(t) {
      const s = t.start_date, d = t.due_date;
      if (s && d) return s <= d ? [s, d] : [d, s];
      if (s) return [s, s];
      if (d) return [d, d];
      return null;
    }

    // 업무마다 '한 달 전체' 기준으로 고정 레인(행) 배정 → 여러 주에 걸쳐도 같은 줄 유지.
    //  (주마다 따로 배치하면 첫주/다음주의 순서가 바뀌는 문제 방지)
    function computeLanes() {
      const items = [];
      tasks.forEach(function (t) {
        const sp = taskSpan(t);
        if (sp) items.push({ id: t.id, s: sp[0], e: sp[1] });
      });
      // 시작일 → 종료일 → id 순(결정적). 문자열 'YYYY-MM-DD' 사전식 비교.
      items.sort(function (a, b) {
        if (a.s !== b.s) return a.s < b.s ? -1 : 1;
        if (a.e !== b.e) return a.e < b.e ? -1 : 1;
        return a.id - b.id;
      });
      const laneEnd = [];   // lane 별 마지막 점유 종료일
      const map = {};
      items.forEach(function (it) {
        for (var i = 0; i < laneEnd.length; i++) {
          if (it.s > laneEnd[i]) { map[it.id] = i; laneEnd[i] = it.e; return; }
        }
        map[it.id] = laneEnd.length; laneEnd.push(it.e);
      });
      return map;
    }

    // 전체 달력 다시 그리기 — 서버가 그린 날짜 셀(.pj-day[data-date])을 읽어 주별로 막대 배치.
    function renderCalendar() {
      const cal = document.querySelector(".pj-cal");
      if (!cal) return;
      closeDayPop();
      const laneOf = computeLanes();
      cal.querySelectorAll(".pj-week").forEach(function (weekEl) {
        const dayEls = weekEl.querySelectorAll(".pj-day[data-date]");
        if (!dayEls.length) return;
        const weekStart = dayEls[0].dataset.date;
        const weekEnd = dayEls[dayEls.length - 1].dataset.date;

        // 이 주에 걸치는 업무 → 막대 세그먼트(레인은 전역 배정값 사용)
        const bars = [];
        tasks.forEach(function (t) {
          const sp = taskSpan(t);
          if (!sp) return;
          if (sp[1] < weekStart || sp[0] > weekEnd) return;
          const segStart = sp[0] < weekStart ? weekStart : sp[0];
          const segEnd = sp[1] > weekEnd ? weekEnd : sp[1];
          bars.push({
            t: t,
            startCol: dayDiff(weekStart, segStart),
            span: dayDiff(segStart, segEnd) + 1,
            cl: sp[0] < weekStart, cr: sp[1] > weekEnd,
            lane: laneOf[t.id] || 0,
          });
        });

        // 전역 레인 순서는 유지하되, 이 주에 실제 존재하는 레인만 0,1,2…로 압축
        // (빈 행 제거 → 헛된 '+N' 방지, 단 두 막대의 상하 순서는 항상 동일).
        const present = {};
        bars.forEach(function (b) { present[b.lane] = true; });
        const lanesSorted = Object.keys(present).map(Number).sort(function (a, b) { return a - b; });
        const rankOf = {};
        lanesSorted.forEach(function (l, i) { rankOf[l] = i; });

        const cont = weekEl.querySelector(".pj-week-bars");
        cont.innerHTML = "";
        const overflow = [0, 0, 0, 0, 0, 0, 0];
        bars.forEach(function (b) {
          const row = rankOf[b.lane];
          if (row >= MAX_LANES) {              // 넘침 → 그 칸들 +N 카운트
            for (var c = b.startCol; c < b.startCol + b.span; c++) overflow[c]++;
            return;
          }
          const div = document.createElement("div");
          div.className = "pj-bar" + (b.t.completed_at ? " pj-bar-done" : "") +
            (b.cl ? " pj-bar-l" : "") + (b.cr ? " pj-bar-r" : "");
          div.dataset.taskId = b.t.id;
          div.style.gridColumn = (b.startCol + 1) + " / span " + b.span;
          div.style.gridRow = (row + 1);
          div.style.background = b.t.completed_at ? "#9aa5b1" : (b.t.project_color || "#4573d2");
          div.title = "[" + (b.t.project_name || "") + "] " + (b.t.title || "") +
            (b.t.assignee_email ? " · " + idOf(b.t.assignee_email) : "");
          div.innerHTML = '<span class="pj-bar-label">' + escapeHtml(b.t.title || "") + "</span>" + cmtBadge(b.t);
          cont.appendChild(div);
        });
        for (var col = 0; col < 7; col++) {
          if (overflow[col] > 0) {
            const m = document.createElement("div");
            m.className = "pj-bar-more";
            m.style.gridColumn = (col + 1) + " / span 1";
            m.style.gridRow = (MAX_LANES + 1);
            m.dataset.date = dayEls[col].dataset.date;
            m.textContent = "+" + overflow[col] + " 더";
            cont.appendChild(m);
          }
        }
      });
      wireCalendarDrag(cal);
    }

    // 드래그(포인터 기반). 안 움직이면 클릭=모달, +N 칩 클릭=그날 팝오버.
    function wireCalendarDrag(cal) {
      cal.querySelectorAll(".pj-bar[data-task-id]").forEach(function (bar) {
        bar.addEventListener("mousedown", function (e) {
          if (e.button !== 0) return;
          e.preventDefault();
          const taskId = bar.dataset.taskId;
          const sx = e.clientX, sy = e.clientY;
          let dragging = false, ghost = null;
          function onMove(ev) {
            if (!dragging) {
              if (Math.abs(ev.clientX - sx) + Math.abs(ev.clientY - sy) < 5) return;
              dragging = true;
              cal.classList.add("pj-cal-dragging");
              if (canManage) {
                ghost = document.createElement("div");
                ghost.className = "pj-bar-ghost";
                ghost.textContent = (bar.textContent || "").trim();
                document.body.appendChild(ghost);
              }
            }
            if (ghost) { ghost.style.left = (ev.clientX + 10) + "px"; ghost.style.top = (ev.clientY + 12) + "px"; }
            clearDropHL();
            const cell = dayCellAt(ev.clientX, ev.clientY);
            if (cell) cell.classList.add("pj-drop-over");
          }
          function onUp(ev) {
            document.removeEventListener("mousemove", onMove);
            document.removeEventListener("mouseup", onUp);
            cal.classList.remove("pj-cal-dragging");
            if (ghost) ghost.remove();
            clearDropHL();
            const t = tasks.find(function (x) { return String(x.id) === String(taskId); });
            if (!dragging) { if (t && canManage) openTaskModal(t); return; }
            if (!canManage) return;
            const cell = dayCellAt(ev.clientX, ev.clientY);
            if (cell) moveTaskTo(taskId, cell.dataset.date);
          }
          document.addEventListener("mousemove", onMove);
          document.addEventListener("mouseup", onUp);
        });
      });
    }

    // 낙관적 이동 — 즉시 다시 그리고 백그라운드 저장, 실패 시 롤백.
    async function moveTaskTo(taskId, dropDate) {
      const t = tasks.find(function (x) { return String(x.id) === String(taskId); });
      if (!t) return;
      const anchor = t.start_date || t.due_date;
      if (!anchor) { alert("날짜가 없는 업무는 달력에서 이동할 수 없습니다."); return; }
      const delta = dayDiff(anchor, dropDate);
      if (delta === 0) return;
      const old = { s: t.start_date, d: t.due_date };
      t.start_date = t.start_date ? addDays(t.start_date, delta) : null;
      t.due_date = t.due_date ? addDays(t.due_date, delta) : null;
      renderCalendar();
      try {
        await api("PUT", "/project/api/tasks/" + taskId, { start_date: t.start_date, due_date: t.due_date });
      } catch (err) {
        t.start_date = old.s; t.due_date = old.d; renderCalendar();
        alert("이동 실패: " + err.message);
      }
    }

    // ── "+N 더" 그날 업무 팝오버 ──
    let dayPop = null;
    function closeDayPop() {
      if (dayPop) { dayPop.remove(); dayPop = null; document.removeEventListener("mousedown", onDocDown, true); }
    }
    function onDocDown(e) {
      if (dayPop && !dayPop.contains(e.target) && !e.target.closest(".pj-bar-more")) closeDayPop();
    }
    function openDayPopover(dateStr, anchorEl) {
      closeDayPop();
      const list = tasks.filter(function (t) {
        const sp = taskSpan(t); return sp && sp[0] <= dateStr && dateStr <= sp[1];
      });
      dayPop = document.createElement("div");
      dayPop.className = "pj-daypop";
      const head = document.createElement("div");
      head.className = "pj-daypop-head"; head.textContent = dateStr;
      dayPop.appendChild(head);
      list.forEach(function (t) {
        const row = document.createElement("div");
        row.className = "pj-daypop-item" + (t.completed_at ? " is-done" : "");
        row.innerHTML =
          '<span class="pj-daypop-dot" style="background:' +
          (t.completed_at ? "#9aa5b1" : (t.project_color || "#4573d2")) + '"></span>' +
          '<span class="pj-daypop-title">' + escapeHtml(t.title || "") + "</span>";
        row.addEventListener("click", function () { closeDayPop(); if (canManage) openTaskModal(t); });
        dayPop.appendChild(row);
      });
      document.body.appendChild(dayPop);
      const r = anchorEl.getBoundingClientRect();
      let left = window.scrollX + r.left;
      const top = window.scrollY + r.bottom + 4;
      left = Math.min(left, window.scrollX + document.documentElement.clientWidth - dayPop.offsetWidth - 8);
      dayPop.style.left = Math.max(8, left) + "px";
      dayPop.style.top = top + "px";
      setTimeout(function () { document.addEventListener("mousedown", onDocDown, true); }, 0);
    }
    (function () {
      const cal = document.querySelector(".pj-cal");
      if (cal) cal.addEventListener("click", function (e) {
        const more = e.target.closest(".pj-bar-more");
        if (more) openDayPopover(more.dataset.date, more);
      });
    })();

    // ── 타임라인 (vis-timeline) — 프로젝트별 행(그룹), 행마다 전체 일정 배경 + 업무 막대 ──
    function renderTimeline() {
      const node = el("pj-timeline");
      if (timeline) { timeline.destroy(); timeline = null; }
      const dated = tasks.filter(function (t) { return t.start_date || t.due_date; });
      if (!dated.length) { node.innerHTML = '<div class="pj-empty">기간이 설정된 업무가 없습니다.</div>'; return; }

      // 프로젝트 메타(시작/마감/색) 조회용
      const projById = {};
      projectsMeta.forEach(function (p) { projById[p.id] = p; });

      // 프로젝트별로 업무를 묶어 그룹(행) 생성
      const byProj = {};
      dated.forEach(function (t) { (byProj[t.project_id] = byProj[t.project_id] || []).push(t); });

      const items = [];
      const groupRows = [];
      Object.keys(byProj).forEach(function (pid) {
        const list = byProj[pid];
        const grp = "P" + pid;
        const meta = projById[pid] || {};
        const projColor = list[0].project_color || meta.color || "#4573d2";
        groupRows.push({ id: grp, content: list[0].project_name || meta.name || "프로젝트" });
        let minMs = Infinity, maxMs = -Infinity;
        list.forEach(function (t) {
          const s = t.start_date || t.due_date;
          const e = t.due_date || t.start_date;
          const startISO = s + (t.start_time ? "T" + t.start_time : "");
          const endISO = e + (t.due_time ? "T" + t.due_time : "");
          const isRange = (e !== s) || (!!t.start_time && !!t.due_time && t.start_time !== t.due_time);
          items.push({
            // vis 가 HTML 을 정화(sanitize)하므로 아이콘 폰트 대신 이모지로 댓글 표시.
            id: t.id, group: grp,
            content: (t.title || "") + (t.comment_count ? "  💬" + t.comment_count : ""),
            start: startISO, end: isRange ? endISO : undefined,
            type: isRange ? "range" : "point",
            style: "background-color:" + (t.completed_at ? "#9aa5b1" : projColor) + ";color:#fff;border:none;",
          });
          const sm = new Date(startISO).getTime();
          const em = new Date(endISO).getTime();
          if (sm < minMs) minMs = sm;
          if (em > maxMs) maxMs = em;
        });
        // 배경(프로젝트 전체 일정) = 프로젝트 자체 시작/마감일 우선, 없으면 업무 최소~최대.
        let bgStart = meta.start_date ? new Date(meta.start_date + "T00:00:00").getTime() : minMs;
        let bgEnd = meta.due_date ? new Date(meta.due_date + "T00:00:00").getTime() : maxMs;
        // 업무가 프로젝트 기간 밖에 있어도 가려지지 않게 범위를 넓힌다.
        bgStart = Math.min(bgStart, minMs);
        bgEnd = Math.max(bgEnd, maxMs);
        bgEnd += 86400000;   // 마지막 날 하루를 덮도록 +1일
        items.push({
          id: "bg" + pid, group: grp, type: "background",
          start: new Date(bgStart), end: new Date(bgEnd),
          style: "background-color:" + projColor + "22;",
        });
      });
      const groups = new vis.DataSet(groupRows);

      const koWd = function (d) { return ["일", "월", "화", "수", "목", "금", "토"][d.getDay()]; };
      const pad2 = function (n) { return ("0" + n).slice(-2); };
      // 저장된 보던 구간이 있으면 생성 옵션에 start/end 로 넣어 자동맞춤(autofit)을 막는다.
      //  (setWindow 로 나중에 바꾸면 초기 autofit 이 rangechanged 로 덮어써 초기화됨)
      const saved = loadTLWindow();
      const opts = {
        stack: true, height: "520px",
        horizontalScroll: true,     // 마우스 휠 = 좌우 이동(패닝)
        verticalScroll: false,
        zoomKey: "ctrlKey",         // 확대/축소는 Ctrl+휠
        margin: { item: 8 },
        format: {
          minorLabels: function (date, scale) {
            const d = new Date(date.valueOf());
            switch (scale) {
              case "millisecond": case "second": case "minute": case "hour":
                return pad2(d.getHours()) + ":" + pad2(d.getMinutes());
              case "weekday": case "day": return d.getDate() + "일 (" + koWd(d) + ")";
              case "week": return d.getDate() + "일";
              case "month": return (d.getMonth() + 1) + "월";
              case "year": return d.getFullYear() + "년";
              default: return d.getDate() + "일";
            }
          },
          majorLabels: function (date, scale) {
            const d = new Date(date.valueOf());
            switch (scale) {
              case "millisecond": case "second": case "minute": case "hour":
                return (d.getMonth() + 1) + "월 " + d.getDate() + "일 (" + koWd(d) + ")";
              case "weekday": case "day": case "week":
                return d.getFullYear() + "년 " + (d.getMonth() + 1) + "월";
              case "month": return d.getFullYear() + "년";
              default: return "";
            }
          },
        },
      };
      if (saved) { opts.start = new Date(saved.start); opts.end = new Date(saved.end); }
      timeline = new vis.Timeline(node, new vis.DataSet(items), groups, opts);
      timeline.on("select", function (props) {
        if (!canManage || !props.items.length) return;
        const t = tasks.find(function (x) { return x.id === props.items[0]; });
        if (t) openTaskModal(t);
      });
      // 사용자가 직접 확대/이동했을 때만 저장(autofit 등 프로그램 변경은 무시).
      timeline.on("rangechanged", function (p) { if (p.byUser) saveTLWindow(p.start, p.end); });
    }
    function loadTLWindow() {
      try {
        const r = JSON.parse(localStorage.getItem("pj_tl_window") || "null");
        return (r && r.start && r.end) ? r : null;
      } catch (_) { return null; }
    }
    function saveTLWindow(s, e) {
      try {
        localStorage.setItem("pj_tl_window",
          JSON.stringify({ start: new Date(s).toISOString(), end: new Date(e).toISOString() }));
      } catch (_) {}
    }

    // ── 보드 (칸반) — 전체 프로젝트를 단계 '이름' 기준 컬럼으로 묶음 ──
    function renderBoard() {
      const board = el("pj-board");
      board.innerHTML = "";
      // 컬럼 이름 = 서버가 정렬해준 전체 단계 이름 + 단계 미지정 업무용 '미지정'
      let names = boardStages.slice();
      const hasUnstaged = tasks.some(function (t) { return !t.stage_name; });
      if (hasUnstaged) names.push("미지정");
      names.forEach(function (name) {
        const col = document.createElement("div");
        col.className = "pj-col";
        col.dataset.stageName = name;
        col.innerHTML =
          '<div class="pj-col-head"><span class="pj-col-name">' + escapeHtml(name) + "</span>" +
          '<span class="pj-col-count"></span></div>' +
          '<div class="pj-col-body"></div>';
        const body = col.querySelector(".pj-col-body");
        const colTasks = tasks.filter(function (t) {
          return name === "미지정" ? !t.stage_name : (t.stage_name || "") === name;
        });
        col.querySelector(".pj-col-count").textContent = colTasks.length;
        colTasks.forEach(function (t) { body.appendChild(taskCard(t)); });
        if (canManage && name !== "미지정") enableDropByName(body, name);
        board.appendChild(col);
      });
    }

    function taskCard(t) {
      const card = document.createElement("div");
      card.className = "pj-card" + (t.completed_at ? " is-done" : "");
      card.draggable = canManage;
      card.dataset.taskId = t.id;
      card.innerHTML =
        (t.project_name
          ? '<div class="pj-card-proj" style="color:' + (t.project_color || "#4573d2") + '">● ' + escapeHtml(t.project_name) + "</div>"
          : "") +
        '<div class="pj-card-title">' + escapeHtml(t.title) + "</div>" +
        '<div class="pj-card-meta">' +
        (t.priority && t.priority !== "normal"
          ? '<span class="pj-pri pj-pri-' + t.priority + '">' + (priorityLabels[t.priority] || t.priority) + "</span>"
          : "") +
        (t.assignee_email
          ? '<span class="pj-assignee">' + avatarHtml(t.assignee_email, "pj-gicon-sm") +
            escapeHtml(idOf(t.assignee_email)) + "</span>"
          : "") +
        (t.due_date ? '<span class="pj-card-due">' + t.due_date + "</span>" : "") +
        (t.comment_count ? '<span class="pj-card-cmt">' + cmtBadge(t) + "</span>" : "") +
        "</div>";
      card.addEventListener("click", function () { if (canManage) openTaskModal(t); });
      if (canManage) {
        card.addEventListener("dragstart", function (e) {
          e.dataTransfer.setData("text/plain", String(t.id));
          card.classList.add("is-dragging");
        });
        card.addEventListener("dragend", function () { card.classList.remove("is-dragging"); });
      }
      return card;
    }

    // 보드 드롭 — 컬럼 이름(단계명)으로 옮긴다. 업무가 속한 '그 프로젝트'의
    // 동일 이름 단계 id 를 찾아 적용(프로젝트마다 단계 id 가 다르므로).
    function enableDropByName(body, name) {
      body.addEventListener("dragover", function (e) { e.preventDefault(); body.classList.add("is-over"); });
      body.addEventListener("dragleave", function () { body.classList.remove("is-over"); });
      body.addEventListener("drop", async function (e) {
        e.preventDefault();
        body.classList.remove("is-over");
        const taskId = parseInt(e.dataTransfer.getData("text/plain"), 10);
        const t = tasks.find(function (x) { return x.id === taskId; });
        if (!t || (t.stage_name || "") === name) return;
        const plist = stagesByProject[t.project_id] || [];
        const target = plist.find(function (s) { return s.name === name; });
        if (!target) { alert("'" + (t.project_name || "이 프로젝트") + "' 에는 '" + name + "' 단계가 없습니다."); return; }
        try {
          const res = await api("PUT", "/project/api/tasks/" + taskId, { stage_id: target.id });
          mergeTask(res.task);
          const m = tasks.find(function (x) { return x.id === taskId; });
          if (m) { m.stage_id = target.id; m.stage_name = name; }
          renderBoard();
        } catch (err) { alert("이동 실패: " + err.message); }
      });
    }

    // ── 리스트 (정렬·컬럼 너비 조절) ──
    const LIST_COLS = [
      { key: "project", label: "프로젝트", text: function (t) { return t.project_name || "-"; }, sort: function (t) { return (t.project_name || "").toLowerCase(); } },
      { key: "title", label: "업무", text: function (t) { return t.title; }, sort: function (t) { return (t.title || "").toLowerCase(); } },
      { key: "assignee", label: "담당자", text: function (t) { return t.assignee_email ? idOf(t.assignee_email) : "-"; }, sort: function (t) { return idOf(t.assignee_email || ""); } },
      { key: "stage", label: "단계", text: function (t) { return t.stage_name || "-"; }, sort: function (t) { return t.stage_name || ""; } },
      { key: "priority", label: "우선순위", text: function (t) { return priorityLabels[t.priority] || t.priority || "-"; }, sort: function (t) { return ({ low: 0, normal: 1, high: 2 })[t.priority]; } },
      { key: "start", label: "시작", text: function (t) { return t.start_date || "-"; }, sort: function (t) { return t.start_date || ""; } },
      { key: "due", label: "마감", text: function (t) { return t.due_date || "-"; }, sort: function (t) { return t.due_date || ""; } },
    ];
    let listSort = { key: null, dir: 1 };
    function listWidths() { try { return JSON.parse(localStorage.getItem("pj_list_widths") || "{}"); } catch (_) { return {}; } }
    function saveListWidth(key, w) { const m = listWidths(); m[key] = w; try { localStorage.setItem("pj_list_widths", JSON.stringify(m)); } catch (_) {} }

    function enableColResize(th, key) {
      const handle = th.querySelector(".pj-th-resize");
      if (!handle) return;
      handle.addEventListener("mousedown", function (e) {
        e.preventDefault(); e.stopPropagation();
        const startX = e.clientX, startW = th.offsetWidth;
        function mv(ev) { th.style.width = Math.max(60, startW + (ev.clientX - startX)) + "px"; }
        function up() { document.removeEventListener("mousemove", mv); document.removeEventListener("mouseup", up); saveListWidth(key, th.offsetWidth); }
        document.addEventListener("mousemove", mv);
        document.addEventListener("mouseup", up);
      });
    }

    function renderList() {
      const table = el("pj-list");
      table.classList.add("pj-table-fixed");
      const widths = listWidths();

      const trh = document.createElement("tr");
      LIST_COLS.forEach(function (col) {
        const th = document.createElement("th");
        th.dataset.key = col.key;
        if (widths[col.key]) th.style.width = widths[col.key] + "px";
        const arrow = listSort.key === col.key ? (listSort.dir > 0 ? "▲" : "▼") : "↕";
        th.innerHTML =
          '<span class="pj-th-label">' + escapeHtml(col.label) +
          ' <span class="pj-th-sort">' + arrow + "</span></span>" +
          '<span class="pj-th-resize"></span>';
        th.querySelector(".pj-th-label").addEventListener("click", function () {
          if (listSort.key === col.key) listSort.dir = -listSort.dir;
          else { listSort.key = col.key; listSort.dir = 1; }
          renderList();
        });
        enableColResize(th, col.key);
        trh.appendChild(th);
      });
      const thead = table.querySelector("thead");
      thead.innerHTML = "";
      thead.appendChild(trh);

      let rows = tasks.slice();
      if (listSort.key) {
        const col = LIST_COLS.find(function (c) { return c.key === listSort.key; });
        rows.sort(function (a, b) {
          let va = col.sort(a), vb = col.sort(b);
          if (va == null) va = -Infinity;
          if (vb == null) vb = -Infinity;
          if (va < vb) return -listSort.dir;
          if (va > vb) return listSort.dir;
          return 0;
        });
      }
      const tbody = table.querySelector("tbody");
      tbody.innerHTML = "";
      rows.forEach(function (t) {
        const tr = document.createElement("tr");
        if (t.completed_at) tr.className = "is-done";
        // 행 배경 = 프로젝트 색 연하게(10%)
        const pc = t.project_color || "#4573d2";
        tr.style.background = pc + "14";
        tr.innerHTML = LIST_COLS.map(function (c) {
          let inner = escapeHtml(String(c.text(t)));
          if (c.key === "title") inner += cmtBadge(t);
          if (c.key === "assignee" && t.assignee_email) {
            inner = '<span class="pj-assignee">' + avatarHtml(t.assignee_email, "pj-gicon-sm") + escapeHtml(idOf(t.assignee_email)) + "</span>";
          }
          return "<td>" + inner + "</td>";
        }).join("");
        if (canManage) { tr.style.cursor = "pointer"; tr.addEventListener("click", function () { openTaskModal(t); }); }
        tbody.appendChild(tr);
      });
    }

    function mergeTask(task) {
      const i = tasks.findIndex(function (x) { return x.id === task.id; });
      if (i >= 0) tasks[i] = Object.assign({}, tasks[i], task);
      else tasks.push(task);
    }

    function refreshActiveView() {
      // 모든 뷰 + 좌측 트리 클라이언트 재렌더(새로고침 없음).
      renderView(currentView);
      if (typeof renderTree === "function") renderTree();
    }

    // ── 업무 모달 ──
    const taskModal = el("pj-modal-task");
    wireModalClose(taskModal);
    let currentTaskId = null;

    // 단계 select 를 해당 업무가 속한 프로젝트의 단계로 채운다(전체 뷰에서 타 프로젝트 업무 편집 대비).
    function fillStageSelect(projId) {
      const sel = el("pj-t-stage");
      const list = (projId != null && stagesByProject[projId]) ? stagesByProject[projId] : stages;
      sel.innerHTML = list.map(function (s) {
        return '<option value="' + s.id + '">' + escapeHtml(s.name) + "</option>";
      }).join("");
    }

    function openTaskModal(task) {
      el("pj-task-modal-title").textContent = task ? "업무 편집" : "새 업무";
      el("pj-t-id").value = task ? task.id : "";
      el("pj-t-title").value = task ? task.title : "";
      el("pj-t-desc").value = task ? (task.description || "") : "";
      el("pj-t-assignee").value = task ? (task.assignee_email || "") : "";
      fillStageSelect(task ? task.project_id : projectId);
      el("pj-t-stage").value = task && task.stage_id ? task.stage_id : (stages[0] ? stages[0].id : "");
      el("pj-t-priority").value = task ? (task.priority || "normal") : "normal";
      el("pj-t-start").value = task ? (task.start_date || "") : "";
      el("pj-t-due").value = task ? (task.due_date || "") : "";
      // 시간 — 값이 있으면 '시간 지정' 체크 + 입력란 표시
      const useTime = !!(task && (task.start_time || task.due_time));
      el("pj-t-usetime").checked = useTime;
      el("pj-t-stime").value = task ? (task.start_time || "") : "";
      el("pj-t-dtime").value = task ? (task.due_time || "") : "";
      el("pj-t-stime").disabled = !useTime;
      el("pj-t-dtime").disabled = !useTime;
      el("pj-delete-task").hidden = !task;
      // 댓글·첨부는 기존 업무 편집 시에만
      currentTaskId = task ? task.id : null;
      el("pj-attach-block").hidden = !task;
      el("pj-comment-block").hidden = !task;
      if (task) { loadAttachments(task.id); loadComments(task.id); }
      openModal(taskModal);
    }

    // ── 첨부파일 ──
    function fmtSize(n) {
      if (n < 1024) return n + " B";
      if (n < 1048576) return (n / 1024).toFixed(1) + " KB";
      return (n / 1048576).toFixed(1) + " MB";
    }
    async function loadAttachments(taskId) {
      const ul = el("pj-attach-list");
      ul.innerHTML = "<li class='pj-empty-sm'>불러오는 중…</li>";
      try {
        const res = await api("GET", "/project/api/tasks/" + taskId + "/attachments");
        if (!res.attachments.length) { ul.innerHTML = "<li class='pj-empty-sm'>없음</li>"; return; }
        ul.innerHTML = "";
        res.attachments.forEach(function (a) {
          const li = document.createElement("li");
          li.className = "pj-attach-item";
          li.innerHTML =
            '<a href="/project/api/attachments/' + a.id + '/download">' + escapeHtml(a.filename) + "</a>" +
            '<span class="pj-attach-size">' + fmtSize(a.size_bytes) + "</span>" +
            (canManage ? '<button type="button" class="pj-icon-btn pj-attach-del" data-id="' + a.id + '">×</button>' : "");
          ul.appendChild(li);
        });
        ul.querySelectorAll(".pj-attach-del").forEach(function (b) {
          b.addEventListener("click", async function () {
            if (!confirm("이 첨부를 삭제할까요?")) return;
            try { await api("DELETE", "/project/api/attachments/" + b.dataset.id); loadAttachments(taskId); }
            catch (e) { alert("삭제 실패: " + e.message); }
          });
        });
      } catch (e) { ul.innerHTML = "<li class='pj-empty-sm'>불러오기 실패</li>"; }
    }
    const attachInput = el("pj-attach-input");
    if (attachInput) attachInput.addEventListener("change", async function () {
      if (!currentTaskId || !attachInput.files.length) return;
      const fd = new FormData();
      fd.append("file", attachInput.files[0]);
      try {
        const res = await fetch("/project/api/tasks/" + currentTaskId + "/attachments", { method: "POST", body: fd });
        if (!res.ok) { let m = res.statusText; try { m = (await res.json()).detail; } catch (_) {} throw new Error(m); }
        attachInput.value = "";
        loadAttachments(currentTaskId);
      } catch (e) { alert("업로드 실패: " + e.message); }
    });

    // ── 댓글 ──
    async function loadComments(taskId) {
      const ul = el("pj-comment-list");
      ul.innerHTML = "<li class='pj-empty-sm'>불러오는 중…</li>";
      try {
        const res = await api("GET", "/project/api/tasks/" + taskId + "/comments");
        // 메모리 업무의 댓글 수 동기화(아이콘 표시용)
        const tt = tasks.find(function (x) { return String(x.id) === String(taskId); });
        if (tt) tt.comment_count = res.comments.length;
        if (!res.comments.length) { ul.innerHTML = "<li class='pj-empty-sm'>댓글 없음</li>"; return; }
        ul.innerHTML = "";
        res.comments.forEach(function (c) {
          const li = document.createElement("li");
          li.className = "pj-comment-item";
          li.innerHTML =
            avatarHtml(c.author_email, "pj-gicon-sm") +
            '<div class="pj-comment-main"><div class="pj-comment-head">' +
            escapeHtml(idOf(c.author_email)) + ' <span class="pj-comment-time">' +
            (c.created_at || "").slice(0, 16).replace("T", " ") + "</span></div>" +
            '<div class="pj-comment-body"></div></div>' +
            '<span class="pj-comment-acts">' +
            '<button type="button" class="pj-icon-btn pj-comment-edit" title="수정">✎</button>' +
            '<button type="button" class="pj-icon-btn pj-comment-del" title="삭제">×</button>' +
            "</span>";
          li.querySelector(".pj-comment-body").textContent = c.body;  // XSS 안전(textContent)
          li.querySelector(".pj-comment-del").addEventListener("click", async function () {
            try { await api("DELETE", "/project/api/comments/" + c.id); loadComments(taskId); }
            catch (e) { alert("삭제 실패: " + e.message); }
          });
          li.querySelector(".pj-comment-edit").addEventListener("click", function () {
            editComment(li, c, taskId);
          });
          ul.appendChild(li);
        });
      } catch (e) { ul.innerHTML = "<li class='pj-empty-sm'>불러오기 실패</li>"; }
    }
    // 댓글 인라인 수정 — 본문을 textarea 로 교체, 저장/취소.
    function editComment(li, c, taskId) {
      const main = li.querySelector(".pj-comment-main");
      const bodyEl = li.querySelector(".pj-comment-body");
      const acts = li.querySelector(".pj-comment-acts");
      if (li.querySelector(".pj-comment-edit-box")) return;  // 중복 방지
      acts.style.visibility = "hidden";
      const box = document.createElement("div");
      box.className = "pj-comment-edit-box";
      const ta = document.createElement("textarea");
      ta.rows = 2; ta.value = c.body;
      const bar = document.createElement("div");
      bar.className = "pj-comment-edit-actions";
      const save = document.createElement("button");
      save.type = "button"; save.className = "pj-btn pj-btn-primary"; save.textContent = "저장";
      const cancel = document.createElement("button");
      cancel.type = "button"; cancel.className = "pj-btn"; cancel.textContent = "취소";
      bar.appendChild(cancel); bar.appendChild(save);
      box.appendChild(ta); box.appendChild(bar);
      bodyEl.style.display = "none";
      main.appendChild(box);
      ta.focus();
      cancel.addEventListener("click", function () {
        box.remove(); bodyEl.style.display = ""; acts.style.visibility = "";
      });
      save.addEventListener("click", async function () {
        const text = ta.value.trim();
        if (!text) { alert("내용을 입력하세요."); return; }
        try {
          await api("PUT", "/project/api/comments/" + c.id, { body: text });
          loadComments(taskId);
        } catch (e) { alert("수정 실패: " + e.message); }
      });
    }

    async function sendComment() {
      const inp = el("pj-comment-input");
      const body = inp.value.trim();
      if (!currentTaskId || !body) return;
      try {
        await api("POST", "/project/api/tasks/" + currentTaskId + "/comments", { body: body });
        inp.value = "";
        loadComments(currentTaskId);
      } catch (e) { alert("등록 실패: " + e.message); }
    }
    el("pj-comment-send").addEventListener("click", sendComment);
    el("pj-comment-input").addEventListener("keydown", function (e) {
      if (e.key === "Enter") { e.preventDefault(); sendComment(); }
    });

    const newTaskBtn = el("pj-new-task");
    if (newTaskBtn) newTaskBtn.addEventListener("click", function () { openTaskModal(null); });

    // '시간 지정' 체크 → 시간 입력란 활성/비활성
    el("pj-t-usetime").addEventListener("change", function () {
      el("pj-t-stime").disabled = !this.checked;
      el("pj-t-dtime").disabled = !this.checked;
    });
    // 시간 입력란 클릭 시 즉시 시간 피커 드롭다운 열기
    ["pj-t-stime", "pj-t-dtime"].forEach(function (id) {
      const inp = el(id);
      if (inp) inp.addEventListener("click", function () {
        try { this.showPicker(); } catch (_) {}
      });
    });

    el("pj-save-task").addEventListener("click", async function () {
      const id = el("pj-t-id").value;
      const assigneeSel = el("pj-t-assignee");
      const assigneeName = assigneeSel.selectedOptions[0] ? (assigneeSel.selectedOptions[0].dataset.name || "") : "";
      const useTime = el("pj-t-usetime").checked;
      const payload = {
        title: el("pj-t-title").value.trim(),
        description: el("pj-t-desc").value.trim(),
        assignee_email: assigneeSel.value,
        assignee_name: assigneeName,
        stage_id: parseInt(el("pj-t-stage").value, 10) || null,
        priority: el("pj-t-priority").value,
        start_date: el("pj-t-start").value || null,
        due_date: el("pj-t-due").value || null,
        // 시간 미지정(체크 해제) = 종일 → null 전송
        start_time: useTime ? (el("pj-t-stime").value || null) : null,
        due_time: useTime ? (el("pj-t-dtime").value || null) : null,
      };
      if (!payload.title) { alert("제목을 입력하세요."); return; }
      try {
        let res;
        if (id) res = await api("PUT", "/project/api/tasks/" + id, payload);
        else res = await api("POST", "/project/api/projects/" + projectId + "/tasks", payload);
        mergeTask(res.task);
        // 새 업무는 해당 프로젝트 트리를 펼쳐 바로 보이게.
        if (!id) treeSaveOpen((res.task && res.task.project_id) || projectId, true);
        closeModal(taskModal);
        refreshActiveView();
      } catch (e) { alert("저장 실패: " + e.message); }
    });

    el("pj-delete-task").addEventListener("click", async function () {
      const id = el("pj-t-id").value;
      if (!id) return;
      const t = tasks.find(function (x) { return String(x.id) === String(id); });
      if (t && !canDelete(t.created_by)) { alert(DELETE_DENIED); return; }
      if (!confirm("이 업무를 삭제할까요?")) return;
      try {
        await api("DELETE", "/project/api/tasks/" + id);
        tasks = tasks.filter(function (x) { return String(x.id) !== String(id); });
        closeModal(taskModal);
        refreshActiveView();
      } catch (e) { alert("삭제 실패: " + e.message); }
    });

    // ── 프로젝트 트리 (아사나식) — tasks 로부터 클라이언트 렌더(업무 추가 즉시 반영) ──
    function setTreeOpen(li, open) {
      const children = li.querySelector(":scope > .pj-tree-children");
      const caret = li.querySelector(":scope > .pj-tree-row > .pj-tree-caret");
      if (!children) return;
      children.hidden = !open;
      if (caret) { caret.setAttribute("aria-expanded", open ? "true" : "false"); caret.classList.toggle("is-open", open); }
    }
    function treeOpenSet() {
      try { return new Set(JSON.parse(localStorage.getItem("pj_tree_open") || "[]")); }
      catch (_) { return new Set(); }
    }
    function treeSaveOpen(id, open) {
      const s = treeOpenSet();
      if (open) s.add(String(id)); else s.delete(String(id));
      try { localStorage.setItem("pj_tree_open", JSON.stringify(Array.from(s))); } catch (_) {}
    }

    function treeTaskLi(t, pid) {
      return '<li class="pj-tree-li pj-tree-task"><div class="pj-tree-row" style="--pj-indent: 1">' +
        '<span class="pj-tree-caret-spacer"></span>' +
        '<a class="pj-tree-link pj-tree-tasklink" href="/project/p/' + pid + '?task=' + t.id +
        '" data-project="' + pid + '" data-task="' + t.id + '">' +
        '<span class="pj-tree-icon material-symbols-outlined" style="color:' + (t.project_color || "#4573d2") + '">' +
        (t.completed_at ? "task_alt" : "radio_button_unchecked") + "</span>" +
        '<span class="pj-tree-name ' + (t.completed_at ? "pj-tree-done" : "") + '">' + escapeHtml(t.title || "") + "</span>" +
        "</a></div></li>";
    }
    function treeProjLi(p) {
      const ptasks = tasks.filter(function (t) { return t.project_id === p.id; });
      const has = ptasks.length > 0;
      const caret = has
        ? '<button type="button" class="pj-tree-caret" aria-expanded="false" title="펼치기/접기"><span class="material-symbols-outlined">chevron_right</span></button>'
        : '<span class="pj-tree-caret-spacer"></span>';
      const del = isAdmin
        ? '<span class="pj-tree-acts"><button type="button" class="pj-icon-btn pj-tree-del" data-id="' + p.id +
          '" data-name="' + escapeHtml(p.name) + '" data-creator="' + escapeHtml(p.created_by || "") + '" title="프로젝트 삭제">×</button></span>'
        : "";
      let h = '<li class="pj-tree-li" data-id="' + p.id + '"><div class="pj-tree-row ' + (p.id === projectId ? "is-active" : "") + '">' +
        caret + '<a class="pj-tree-link" href="/project/p/' + p.id + '">' +
        '<span class="pj-tree-icon material-symbols-outlined" style="color:' + (p.color || "#4573d2") + '">folder</span>' +
        '<span class="pj-tree-name">' + escapeHtml(p.name) + "</span></a>" + del + "</div>";
      if (has) h += '<div class="pj-tree-children" hidden><ul class="pj-tree">' +
        ptasks.map(function (t) { return treeTaskLi(t, p.id); }).join("") + "</ul></div>";
      return h + "</li>";
    }
    function wireTreeHandlers(rootUl) {
      rootUl.querySelectorAll(".pj-tree-caret").forEach(function (caret) {
        caret.addEventListener("click", function (e) {
          e.preventDefault(); e.stopPropagation();
          const li = caret.closest(".pj-tree-li");
          const children = li.querySelector(":scope > .pj-tree-children");
          const open = children.hidden;
          setTreeOpen(li, open);
          treeSaveOpen(li.dataset.id, open);
        });
      });
      rootUl.querySelectorAll(".pj-tree-del").forEach(function (b) {
        b.addEventListener("click", async function (e) {
          e.preventDefault(); e.stopPropagation();
          if (!canDelete(b.dataset.creator)) { alert(DELETE_DENIED); return; }
          if (!confirm("'" + (b.dataset.name || "") + "' 프로젝트를 삭제할까요? 안의 업무도 모두 삭제됩니다.")) return;
          try {
            await api("DELETE", "/project/api/projects/" + b.dataset.id);
            if (String(b.dataset.id) === String(projectId)) location.href = "/project/";
            else location.reload();
          } catch (err) { alert("삭제 실패: " + err.message); }
        });
      });
    }
    function restoreTreeState() {
      const openSet = treeOpenSet();
      document.querySelectorAll(".pj-tree-li").forEach(function (li) {
        if (openSet.has(String(li.dataset.id))) setTreeOpen(li, true);
      });
      const active = document.querySelector(".pj-tree-row.is-active");
      let box = active ? active.closest(".pj-tree-children") : null;
      while (box) {
        box.hidden = false;
        const li = box.closest(".pj-tree-li");
        if (li) setTreeOpen(li, true);
        box = li ? (li.parentElement ? li.parentElement.closest(".pj-tree-children") : null) : null;
      }
    }
    function renderTree() {
      const rootUl = el("pj-tree-root");
      if (!rootUl) return;
      rootUl.innerHTML = projectsMeta.map(treeProjLi).join("");
      wireTreeHandlers(rootUl);
      restoreTreeState();
    }
    renderTree();

    // 새 최상위 프로젝트 (관리자)
    const newProjSide = el("pj-new-project-side");
    if (newProjSide) newProjSide.addEventListener("click", async function () {
      const name = prompt("새 프로젝트 이름");
      if (!name || !name.trim()) return;
      try {
        await api("POST", "/project/api/projects", { name: name.trim() });
        location.reload();
      } catch (e) { alert("생성 실패: " + e.message); }
    });

    // ── 멤버 배정/제외 (관리자) ──
    const memberModal = el("pj-modal-member");
    wireModalClose(memberModal);
    const addMemberBtn = el("pj-add-member");
    if (addMemberBtn) addMemberBtn.addEventListener("click", async function () {
      const sel = el("pj-m-user");
      openModal(memberModal);
      sel.innerHTML = '<option value="">불러오는 중…</option>';
      try {
        const res = await api("GET", "/project/api/assignable-users");
        const existing = new Set(members.map(function (m) { return m.user_email; }));
        const opts = res.users
          .filter(function (u) { return !existing.has(u.email); })
          .map(function (u) {
            return '<option value="' + u.email + '" data-name="' + escapeHtml(u.name) + '">' +
                   escapeHtml(u.id) + " (" + escapeHtml(u.email) + ")</option>";
          });
        sel.innerHTML = opts.length
          ? opts.join("")
          : '<option value="">배정 가능한 직원이 없습니다(권한 미부여 또는 전원 배정됨)</option>';
      } catch (e) {
        sel.innerHTML = '<option value="">불러오기 실패: ' + escapeHtml(e.message) + "</option>";
      }
    });
    const saveMemberBtn = el("pj-save-member");
    if (saveMemberBtn) saveMemberBtn.addEventListener("click", async function () {
      const sel = el("pj-m-user");
      if (!sel.value) { alert("직원을 선택하세요."); return; }
      const name = sel.selectedOptions[0] ? (sel.selectedOptions[0].dataset.name || "") : "";
      try {
        await api("POST", "/project/api/projects/" + projectId + "/members", {
          user_email: sel.value, user_name: name, role: el("pj-m-role").value,
        });
        location.reload();
      } catch (e) { alert("배정 실패: " + e.message); }
    });
    document.querySelectorAll(".pj-del-member").forEach(function (b) {
      b.addEventListener("click", async function () {
        if (!confirm("이 멤버를 프로젝트에서 제외할까요?")) return;
        try {
          await api("DELETE", "/project/api/projects/" + projectId + "/members/" + encodeURIComponent(b.dataset.email));
          location.reload();
        } catch (e) { alert("제외 실패: " + e.message); }
      });
    });

    // 최초 렌더 — 달력 막대 그리기 + 드래그 연결
    renderCalendar();

    // 사이드 트리에서 업무 클릭(?task=ID)으로 들어오면 해당 업무 모달 자동 열기.
    // 단, 처리 후 URL 에서 task 파라미터를 제거한다 — 드래그 이동 후 location.reload()
    // 시 이 파라미터가 남아 모달이 다시 뜨는 것을 방지.
    const params = new URLSearchParams(location.search);
    const taskParam = params.get("task");
    if (taskParam) {
      params.delete("task");
      const qs = params.toString();
      history.replaceState({}, "", location.pathname + (qs ? "?" + qs : ""));
      const t = tasks.find(function (x) { return String(x.id) === String(taskParam); });
      if (t) openTaskModal(t);
    }
  }

  function idOf(email) {
    return String(email == null ? "" : email).split("@")[0];
  }

  function escapeHtml(s) {
    return String(s == null ? "" : s)
      .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;").replace(/'/g, "&#39;");
  }

  // ── 알림 벨 (미읽음 배지) ──
  async function initBell() {
    const badge = document.getElementById("pj-bell-badge");
    if (!badge) return;
    const bell = badge.closest(".pj-bell");
    try {
      const res = await fetch("/project/api/notifications/unread-count");
      if (!res.ok) return;
      const d = await res.json();
      if (d.unread > 0) {
        badge.textContent = d.unread > 99 ? "99+" : d.unread;
        badge.hidden = false;
        if (bell) bell.classList.add("has-unread");   // 종 흔들림 애니메이션
      }
    } catch (_) {}
  }

  // ── 알림센터 페이지 ──
  function initInbox() {
    const inbox = document.getElementById("pj-inbox");
    const readAll = document.getElementById("pj-readall");
    if (!inbox && !readAll) return;
    if (readAll) readAll.addEventListener("click", async function () {
      try { await fetch("/project/api/notifications/read-all", { method: "POST" }); location.reload(); }
      catch (e) { alert("실패: " + e.message); }
    });
    if (inbox) inbox.querySelectorAll(".pj-inbox-item").forEach(function (li) {
      li.addEventListener("click", async function (e) {
        if (e.target.closest("a")) return;            // '이동' 링크는 통과
        if (!li.classList.contains("is-unread")) return;
        try {
          await fetch("/project/api/notifications/" + li.dataset.id + "/read", { method: "POST" });
          li.classList.remove("is-unread");
        } catch (_) {}
      });
    });
  }

  document.addEventListener("DOMContentLoaded", function () {
    initHome();
    initProject();
    initBell();
    initInbox();
  });
})();