/* ═══════════════════════════════════════════════════════════════════════════
   ═══ ★ 대시보드 상태 관리 — 사용자가 직접 만드는 메뉴 ★ ═══
   ═══════════════════════════════════════════════════════════════════════════ */

const STORAGE_KEY = 'invyone-mockup-state-v2';

/* 시드 데이터 — 사용자가 이미 만들어둔 것처럼 보이는 3개 대시보드 */
const SEED_STATE = {
  activeId: 'dash-1',
  dashboards: [
    {
      id: 'dash-1',
      name: '인사 대시보드',
      icon: '👥',
      hasHrCard: true,                    // 인사정보 풀 카드 시드 여부
      cards: [
        { isDefault: true, left: 34, top: 22, width: 782, height: 560 }
      ]
    },
    {
      id: 'dash-2',
      name: '영업 현황',
      icon: '💰',
      cards: [
        { id:'c2-1', template:'sales-kpi',     left: 47,  top: 38,  width: 340, height: 240 },
        { id:'c2-2', template:'sales-chart',   left: 423, top: 24,  width: 420, height: 280 },
        { id:'c2-3', template:'notifications', left: 880, top: 56,  width: 300, height: 280 },
        { id:'c2-4', template:'hr-mini',       left: 73,  top: 320, width: 290, height: 290 }
      ]
    },
    {
      id: 'dash-3',
      name: '운영 모니터링',
      icon: '📊',
      cards: [
        { id:'c3-1', template:'attendance', left: 53,  top: 31, width: 310, height: 350 },
        { id:'c3-2', template:'sales-chart', left: 408, top: 47, width: 460, height: 300 }
      ]
    }
  ]
};

let state = JSON.parse(JSON.stringify(SEED_STATE));

/* 인사정보 풀 카드 (DOM) — detach/attach 로 재사용 */
let _hrFullCard = null;

/* 활성 대시보드 가져오기 */
function activeDash(){return state.dashboards.find(d=>d.id===state.activeId);}

/* 현재 캔버스 → state 로 스냅샷 저장 */
function snapshotCanvas(){
  const cv=document.getElementById('canvas');
  const dash=activeDash();
  if(!dash)return;
  const newCards=[];
  cv.querySelectorAll('.tpl-card').forEach(c=>{
    if(c.dataset.default==='1'){
      newCards.push({
        isDefault:true,
        left:c.offsetLeft, top:c.offsetTop,
        width:c.offsetWidth, height:c.offsetHeight,
        collapsed:c.classList.contains('collapsed')
      });
    } else {
      newCards.push({
        id:c.id, template:c.dataset.template,
        left:c.offsetLeft, top:c.offsetTop,
        width:c.offsetWidth, height:c.offsetHeight,
        collapsed:c.classList.contains('collapsed')
      });
    }
  });
  dash.cards=newCards;
}

/* 대시보드 캔버스 렌더 */
function renderCanvas(){
  const cv=document.getElementById('canvas');
  const dash=activeDash();
  if(!dash)return;
  // 현재 hr 카드가 캔버스에 붙어있으면 detach (보관)
  if(_hrFullCard && _hrFullCard.parentElement === cv){
    cv.removeChild(_hrFullCard);
  }
  cv.innerHTML='';
  // 빈 대시보드면 안내
  if(!dash.cards||dash.cards.length===0){
    cv.innerHTML = `
      <div class="canvas-empty">
        <div class="ce-icon">📋</div>
        <div class="ce-title">${dash.name}</div>
        <div class="ce-desc">아직 템플릿이 없습니다. 우측 상단의 <b>+ 템플릿 추가</b> 버튼으로 첫 카드를 배치하세요.</div>
        <button class="ce-btn" onclick="openLib()">＋ 템플릿 추가</button>
      </div>`;
  } else {
    dash.cards.forEach(c=>{
      if(c.isDefault && dash.hasHrCard){
        if(_hrFullCard){
          _hrFullCard.style.left=c.left+'px';
          _hrFullCard.style.top=c.top+'px';
          _hrFullCard.style.width=c.width+'px';
          _hrFullCard.style.height=c.height+'px';
          _hrFullCard.classList.toggle('collapsed',!!c.collapsed);
          cv.appendChild(_hrFullCard);
          applyClamp(_hrFullCard);
        }
      } else {
        const card = buildCardEl(c.template,c);
        if(card){
          cv.appendChild(card);
          makeDraggable(card);
          makeResizable(card);
          applyClamp(card);
        }
      }
    });
  }
  // 캔버스 메타 갱신
  document.querySelector('.cv-title').textContent=dash.name;
  document.querySelector('.cv-meta').textContent=`템플릿 ${dash.cards.length}개`;
  document.getElementById('breadcrumb').innerHTML='홈 &rsaquo; <b>'+dash.name+'</b>';
}

/* 사이드바의 대시보드 목록 동적 렌더 */
function renderSidebar(){
  const list=document.getElementById('dashboard-list');
  if(!list)return;
  list.innerHTML='';
  state.dashboards.forEach(d=>{
    const si=document.createElement('div');
    si.className='si'+(d.id===state.activeId?' on':'');
    si.dataset.name=d.name;
    si.dataset.id=d.id;
    si.innerHTML=`
      <span class="ic">${d.icon||'📋'}</span>
      <span>${d.name}</span>
      <div class="si-actions">
        <button class="si-act" title="이름 변경" onclick="event.stopPropagation();renameDashboard('${d.id}')"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
        <button class="si-act danger" title="삭제" onclick="event.stopPropagation();deleteDashboard('${d.id}')"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
      </div>`;
    si.addEventListener('click',()=>switchDashboard(d.id));
    list.appendChild(si);
  });
}

/* 대시보드 전환 */
function switchDashboard(id){
  if(state.activeId===id)return;
  snapshotCanvas();
  state.activeId=id;
  renderCanvas();
  renderSidebar();
  // 편집 모드는 끄기 (전환 시 정리)
  document.getElementById('canvas').classList.remove('edit-mode');
  document.getElementById('btn-edit-mode').classList.remove('on');
  toast('"'+activeDash().name+'" 으로 전환','info');
}

/* 새 대시보드 추가 */
let _dashCounter=4;
function addDashboard(){
  const name=prompt('새 대시보드 이름:', '새 대시보드 '+_dashCounter);
  if(!name)return;
  const icons=['📊','📈','💼','🎯','🛠','🧭','🌐','⚡'];
  const newDash={
    id:'dash-'+(_dashCounter++),
    name:name.trim(),
    icon:icons[Math.floor(Math.random()*icons.length)],
    cards:[]
  };
  snapshotCanvas();
  state.dashboards.push(newDash);
  state.activeId=newDash.id;
  renderCanvas();
  renderSidebar();
  toast('"'+newDash.name+'" 대시보드를 만들었습니다','success');
}

/* 대시보드 이름 변경 */
function renameDashboard(id){
  const d=state.dashboards.find(x=>x.id===id);
  if(!d)return;
  const newName=prompt('새 이름:', d.name);
  if(!newName||!newName.trim())return;
  d.name=newName.trim();
  renderSidebar();
  if(state.activeId===id){
    document.querySelector('.cv-title').textContent=d.name;
    document.getElementById('breadcrumb').innerHTML='홈 &rsaquo; <b>'+d.name+'</b>';
  }
  toast('이름 변경됨','success');
}

/* 대시보드 삭제 */
function deleteDashboard(id){
  if(state.dashboards.length<=1){toast('마지막 대시보드는 삭제할 수 없습니다','warn');return;}
  const d=state.dashboards.find(x=>x.id===id);
  if(!d)return;
  if(d.hasHrCard){
    if(!confirm('"'+d.name+'" 은 인사정보 풀 카드를 가진 시드 대시보드입니다. 정말 삭제할까요?'))return;
  } else {
    if(!confirm('"'+d.name+'" 을 삭제합니다. 안의 카드 '+d.cards.length+'개도 함께 사라집니다.'))return;
  }
  state.dashboards=state.dashboards.filter(x=>x.id!==id);
  if(state.activeId===id){
    state.activeId=state.dashboards[0].id;
    renderCanvas();
  }
  renderSidebar();
  toast('"'+d.name+'" 삭제됨','info');
}

/* ═══════════════════════════════════════════════════════════════════════════
   ═══ 저장 / 복원 / 초기화 (localStorage) ═══
   ═══════════════════════════════════════════════════════════════════════════ */

function saveLayout(){
  snapshotCanvas();
  localStorage.setItem(STORAGE_KEY, JSON.stringify({state, savedAt:Date.now(), dashCounter:_dashCounter}));
  toast(`${state.dashboards.length}개 대시보드 저장됨`,'success');
  const meta=document.querySelector('.cv-meta');
  const dash=activeDash();
  if(meta&&dash)meta.textContent=`템플릿 ${dash.cards.length}개 · 마지막 저장: 방금`;
}

function loadLayout(){
  const raw=localStorage.getItem(STORAGE_KEY);
  if(!raw)return false;
  try{
    const data=JSON.parse(raw);
    if(!data.state||!data.state.dashboards)return false;
    state=data.state;
    if(data.dashCounter)_dashCounter=data.dashCounter;
    renderCanvas();
    renderSidebar();
    return true;
  }catch(e){console.error(e);return false;}
}

function resetLayout(){
  if(!confirm('레이아웃을 시드 상태로 초기화합니다. 변경사항이 모두 사라집니다.'))return;
  localStorage.removeItem(STORAGE_KEY);
  state=JSON.parse(JSON.stringify(SEED_STATE));
  _dashCounter=4;
  renderCanvas();
  renderSidebar();
  toast('초기화 완료','info');
}
