/* ═══════════════════════════════════════════════════════════════════════════
   ═══ ★ DASHBOARD CANVAS — 편집 / 드래그 / 리사이즈 / 추가 / 삭제 / 저장 ★ ═══
   ═══════════════════════════════════════════════════════════════════════════ */

let _idCounter = 100;
function nextId(){return 'card-'+(++_idCounter);}

/* ─── Toast ─── */
function toast(msg, kind){
  let t = document.querySelector('.toast');
  if(!t){t=document.createElement('div');t.className='toast';document.body.appendChild(t);}
  t.className='toast '+(kind||'info');
  t.textContent=msg;
  requestAnimationFrame(()=>t.classList.add('show'));
  clearTimeout(window._toastT);
  window._toastT=setTimeout(()=>t.classList.remove('show'),2200);
}

/* ─── 편집 모드 토글 ─── */
function toggleEditMode(){
  const cv=document.getElementById('canvas');
  const btn=document.getElementById('btn-edit-mode');
  const on=cv.classList.toggle('edit-mode');
  btn.classList.toggle('on',on);
  toast(on?'편집 모드 켜짐 — 카드 드래그/리사이즈 가능':'편집 모드 꺼짐','info');
}

/* ─── 캔버스 경계 clamp (★ 카드가 캔버스 밖으로 나가지 않게) ─── */
function clampToCanvas(l,t,w,h){
  const cv=document.getElementById('canvas');
  const cw=cv.clientWidth, ch=cv.clientHeight;
  // 카드가 캔버스보다 크면 캔버스 사이즈로 줄임
  w=Math.min(w,cw);
  h=Math.min(h,ch);
  // 좌상단 0 이상
  l=Math.max(0,l);
  t=Math.max(0,t);
  // 우/하단 캔버스 안
  l=Math.min(l,cw-w);
  t=Math.min(t,ch-h);
  return {l,t,w,h};
}
function applyClamp(card){
  const c=clampToCanvas(card.offsetLeft,card.offsetTop,card.offsetWidth,card.offsetHeight);
  card.style.left=c.l+'px';
  card.style.top=c.t+'px';
  card.style.width=c.w+'px';
  card.style.height=c.h+'px';
}

/* ─── 드래그 (★ snap 없음, 캔버스 경계 안) ─── */
function makeDraggable(card){
  card.addEventListener('mousedown',function(e){
    if(!document.getElementById('canvas').classList.contains('edit-mode'))return;
    if(e.target.closest('.tpl-head-btn')||e.target.closest('.resize-handle')||e.target.closest('button')||e.target.closest('input')||e.target.closest('select'))return;
    e.preventDefault();
    const startX=e.clientX, startY=e.clientY;
    const startL=card.offsetLeft, startT=card.offsetTop;
    const cardW=card.offsetWidth, cardH=card.offsetHeight;
    card.classList.add('dragging');
    function move(ev){
      const dx=ev.clientX-startX, dy=ev.clientY-startY;
      // ★ snap 없음, 픽셀 단위. 단 캔버스 경계 안에서만.
      const c=clampToCanvas(startL+dx,startT+dy,cardW,cardH);
      card.style.left=c.l+'px';
      card.style.top=c.t+'px';
    }
    function up(){
      card.classList.remove('dragging');
      document.removeEventListener('mousemove',move);
      document.removeEventListener('mouseup',up);
    }
    document.addEventListener('mousemove',move);
    document.addEventListener('mouseup',up);
  });
}

/* ─── 리사이즈 (★ snap 없음, 캔버스 경계 안) ─── */
function makeResizable(card){
  let h=card.querySelector('.resize-handle');
  if(!h){h=document.createElement('div');h.className='resize-handle';card.appendChild(h);}
  h.addEventListener('mousedown',function(e){
    if(!document.getElementById('canvas').classList.contains('edit-mode'))return;
    e.preventDefault();e.stopPropagation();
    const startX=e.clientX, startY=e.clientY;
    const startW=card.offsetWidth, startH=card.offsetHeight;
    const cardL=card.offsetLeft, cardT=card.offsetTop;
    card.classList.add('resizing');
    function move(ev){
      let nw=Math.max(220,startW+(ev.clientX-startX));
      let nh=Math.max(140,startH+(ev.clientY-startY));
      // ★ 캔버스 우/하단을 넘지 않게
      const c=clampToCanvas(cardL,cardT,nw,nh);
      card.style.width=c.w+'px';
      card.style.height=c.h+'px';
    }
    function up(){
      card.classList.remove('resizing');
      document.removeEventListener('mousemove',move);
      document.removeEventListener('mouseup',up);
    }
    document.addEventListener('mousemove',move);
    document.addEventListener('mouseup',up);
  });
}

/* ─── 카드 접기 / 삭제 ─── */
function toggleCollapse(btn){
  const card=btn.closest('.tpl-card');
  if(!card)return;
  // ★ 미니 모드 진입/탈출 — height 는 그대로 유지. 본문만 풀↔미니 전환
  // 미니 모드에서 카드가 너무 크면 보기 어색하니 자동으로 적당한 사이즈로 축소
  const goingMini = !card.classList.contains('collapsed');
  if(goingMini){
    if(!card.dataset.fullW)card.dataset.fullW=card.offsetWidth;
    if(!card.dataset.fullH)card.dataset.fullH=card.offsetHeight;
    // 미니 사이즈 — 너무 크면 최대 340x200 으로
    const targetW=Math.min(card.offsetWidth,340);
    const targetH=Math.min(card.offsetHeight,200);
    card.style.width=targetW+'px';
    card.style.height=targetH+'px';
    card.classList.add('collapsed');
    applyClamp(card);
  } else {
    // 풀 사이즈 복원
    card.classList.remove('collapsed');
    if(card.dataset.fullW)card.style.width=card.dataset.fullW+'px';
    if(card.dataset.fullH)card.style.height=card.dataset.fullH+'px';
    // ★ 펴면서 캔버스 밖으로 나가면 캔버스 안으로 끌어들임
    applyClamp(card);
  }
}
function removeCard(btn){
  const card=btn.closest('.tpl-card');
  if(!card)return;
  if(card.dataset.default==='1'&&!confirm('기본 인사정보 카드를 삭제하시겠습니까?'))return;
  card.style.transition='all .25s';
  card.style.transform='scale(.9)';
  card.style.opacity='0';
  setTimeout(()=>{card.remove();toast('카드를 삭제했습니다','info');},250);
}
