// ❤️ 좋아요 / ⭐ 즐겨찾기 — 반응 상태를 한 곳(store)에서 관리한다.
// 같은 프로젝트가 여러 위치(피드 카드 버튼·내 프로젝트 통계 줄·상세 모달)에 렌더되므로,
// 값이 바뀌면 그 프로젝트를 그리는 '모든' DOM 을 자동으로 다시 칠해 항상 같은 값을 유지한다.
// 프레임워크 없이: 프로젝트별 {on,count} 를 Map 에 두고 변경 시 관련 DOM 만 갱신(점진적 향상).
import { $, $$, toast, burstSparkle } from "./util.js";

let starTaps = [];

// key = id + "|" + kind → { id, kind, on:boolean, count:number }
const store = new Map();
const keyOf = (id, kind) => id + "|" + kind;
function getState(id, kind) {
  return store.get(keyOf(id, kind)) || { id, kind, on: false, count: 0 };
}

// 한 (프로젝트, 종류)의 현재 상태를 그것을 표시하는 모든 라이브 DOM 에 반영.
// document 조회라 <template> 안(inert)은 대상이 아니다 — 모달은 마운트 시 applyReactions 로 칠한다.
function paint(id, kind) {
  const st = getState(id, kind);
  // 1) 토글 버튼(피드/열려 있는 모달): on 클래스 + 내부 카운트
  $$('[data-react][data-id="' + id + '"][data-kind="' + kind + '"]').forEach((b) => {
    b.classList.toggle("on", st.on);
    const c = $("[data-rcount]", b);
    if (c) c.textContent = st.count;
    // 인기순 정렬 기준(data-pop)도 좋아요 수에 맞춰 최신화 → 재정렬 시 순서가 맞는다.
    if (kind === "heart") {
      const card = b.closest("[data-pop]");
      if (card) card.setAttribute("data-pop", st.count);
    }
  });
  // 2) 표시 전용 카운터(내 프로젝트 통계 줄 등): 숫자만 갱신
  $$('[data-rcount][data-id="' + id + '"][data-kind="' + kind + '"]').forEach((c) => {
    c.textContent = st.count;
  });
}

// 상태를 갱신하고 즉시 다시 칠한다. (서버 응답의 확정 값으로 호출)
function setState(id, kind, on, count) {
  store.set(keyOf(id, kind), { id, kind, on: !!on, count: Number(count) || 0 });
  paint(id, kind);
}

// 로드 시 상세 모달 템플릿에서 모든 프로젝트의 서버 원본값(on/count)을 시드한다.
// 템플릿은 렌더되지 않지만 content 는 조회 가능 → 열람 가능한 전 프로젝트를 빠짐없이 담는다.
function seed() {
  $$("#detailStore template").forEach((tpl) => {
    $$("[data-react]", tpl.content).forEach((b) => {
      const id = b.getAttribute("data-id");
      const kind = b.getAttribute("data-kind");
      const c = $("[data-rcount]", b);
      store.set(keyOf(id, kind), {
        id, kind,
        on: b.classList.contains("on"),
        count: c ? parseInt(c.textContent, 10) || 0 : 0,
      });
    });
  });
  // 시드 값으로 라이브 DOM 을 한 번 정렬 — 통계 줄 등 초기 불일치가 있으면 여기서 맞춰진다.
  store.forEach((st) => paint(st.id, st.kind));
}

// 새로 마운트한 서브트리(상세 모달)의 반응 표시를 현재 store 값으로 칠한다.
// openDetail 이 템플릿을 복제해 넣은 직후 호출되어, 모달이 항상 최신 값을 보이게 한다.
export function applyReactions(root) {
  if (!root) return;
  $$("[data-react]", root).forEach((b) => {
    const st = getState(b.getAttribute("data-id"), b.getAttribute("data-kind"));
    b.classList.toggle("on", st.on);
    const c = $("[data-rcount]", b);
    if (c) c.textContent = st.count;
  });
  $$("[data-rcount][data-id][data-kind]", root).forEach((c) => {
    c.textContent = getState(c.getAttribute("data-id"), c.getAttribute("data-kind")).count;
  });
}

export function initReactions() {
  seed();
  document.addEventListener("click", (e) => {
    const btn = e.target.closest("[data-react]");
    if (!btn) return;
    e.preventDefault();
    e.stopPropagation();
    const id = btn.getAttribute("data-id");
    const kind = btn.getAttribute("data-kind"); // heart | star
    if (kind === "star") {
      starTaps = starTaps.filter((t) => Date.now() - t < 1400);
      starTaps.push(Date.now());
      if (starTaps.length >= 4) burstSparkle(e.clientX, e.clientY);
    }
    fetch("/projects/" + id + "/" + kind, {
      method: "POST",
      headers: { "X-Requested-With": "fetch", "Accept": "application/json" },
    })
      .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
      .then((data) => setState(id, kind, data.on, data.count))
      .catch(() => toast("처리에 실패했습니다. 다시 시도해 주세요."));
  });
}