<?php
$types = $types ?? [];
$list = $list ?? [];
$mtIdx = (int) ($mtIdx ?? 0);
$mtCode = (string) ($mtCode ?? '');
$levelNames = $levelNames ?? [];
$superAdminLevel = \Config\Roles::LEVEL_SUPER_ADMIN;
?>
<section class="border-b border-gray-300 p-2 shrink-0 bg-control-panel">
  <div class="flex flex-wrap items-center justify-between gap-y-2">
    <span class="text-sm font-bold text-gray-700">메뉴 관리</span>
    <div class="flex items-center gap-2">
      <?php if (! empty($types)): ?>
      <form method="get" action="<?= base_url('admin/menus') ?>" class="flex items-center gap-2">
        <label class="text-sm font-medium text-gray-700">메뉴 종류</label>
        <select name="mt_idx" onchange="this.form.submit()" class="border border-gray-300 rounded pl-2 pr-7 py-1 text-sm min-w-[8rem]">
          <?php foreach ($types as $t): ?>
          <option value="<?= (int) $t->mt_idx ?>" <?= $mtIdx === (int) $t->mt_idx ? 'selected' : '' ?>><?= esc($t->mt_name) ?></option>
          <?php endforeach; ?>
        </select>
      </form>
      <?php endif; ?>
    </div>
  </div>
</section>

<div class="flex gap-4 mt-2 flex-wrap">
  <div class="border border-gray-300 bg-white rounded p-4 flex-1 min-w-0" style="min-width: 320px;">
    <h3 class="text-sm font-bold text-gray-700 mb-2">메뉴 목록</h3>
    <?php if ($mtIdx <= 0): ?>
    <p class="text-sm text-gray-600">메뉴 종류를 선택하세요.</p>
    <?php elseif (empty($list)): ?>
    <p class="text-sm text-gray-600">등록된 메뉴가 없습니다. 아래에서 등록하세요.</p>
    <?php else: ?>
    <form id="menu-move-form" method="post" action="<?= base_url('admin/menus/move') ?>">
      <?= csrf_field() ?>
      <input type="hidden" name="mt_idx" value="<?= $mtIdx ?>"/>
      <table class="data-table w-full">
        <thead>
          <tr>
            <th class="w-20 text-center text-xs font-medium text-gray-600">순서변경</th>
            <th class="w-10">#</th>
            <th>메뉴명</th>
            <th>링크</th>
            <th>노출 대상</th>
            <th>사용</th>
            <th class="w-24">작업</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($list as $i => $row): ?>
          <tr class="menu-row" data-mm-idx="<?= (int) $row->mm_idx ?>" data-mm-pidx="<?= (int) $row->mm_pidx ?>" data-mm-dep="<?= (int) $row->mm_dep ?>">
            <td class="text-center align-middle">
              <span class="menu-drag-handle cursor-move text-gray-400 select-none" title="드래그해서 순서를 변경하세요">↕</span>
            </td>
            <td class="text-center">
              <input type="hidden" name="mm_idx[]" value="<?= (int) $row->mm_idx ?>"/>
              <span class="menu-order-no"><?= (int) $row->mm_num + 1 ?></span>
            </td>
            <td class="text-left pl-2" style="padding-left: <?= (int) $row->mm_dep * 12 + 8 ?>px;">
              <?php $dep = (int) $row->mm_dep; ?>
              <span class="text-xs text-gray-400">
                <?php if ($dep === 0): ?>
                  ●
                <?php elseif ($dep === 1): ?>
                  └
                <?php else: ?>
                  └─
                <?php endif; ?>
              </span>
              <span class="ml-1"><?= esc($row->mm_name) ?></span>
            </td>
            <td class="text-left pl-2 text-xs"><?= esc($row->mm_link) ?></td>
            <td class="text-left pl-2 text-xs">
              <?php
              if ((string) $row->mm_level === '') {
                  echo '전체';
              } else {
                  $levels = array_filter(explode(',', $row->mm_level), fn ($lv) => (int) trim($lv) !== $superAdminLevel);
                  $labels = array_map(fn ($lv) => $levelNames[trim($lv)] ?? trim($lv), $levels);
                  echo esc(implode(', ', $labels) ?: '전체');
              }
              ?>
            </td>
            <td class="text-center"><?= (string) $row->mm_is_view === 'Y' ? 'Y' : 'N' ?></td>
            <td class="text-center">
              <button type="button"
                      class="text-blue-600 hover:underline text-sm menu-edit"
                      data-id="<?= (int) $row->mm_idx ?>"
                      data-name="<?= esc($row->mm_name) ?>"
                      data-link="<?= esc($row->mm_link) ?>"
                      data-level="<?= esc($row->mm_level) ?>"
                      data-view="<?= (string) $row->mm_is_view ?>"
                      data-dep="<?= (int) $row->mm_dep ?>">
                수정
              </button>
              <?php if ($dep === 0): ?>
              <button type="button"
                      class="text-green-700 hover:underline text-sm ml-1 menu-add-child"
                      data-id="<?= (int) $row->mm_idx ?>"
                      data-dep="<?= (int) $row->mm_dep ?>">
                하위 메뉴 추가
              </button>
              <?php endif; ?>
              <form action="<?= base_url('admin/menus/delete/' . (int) $row->mm_idx) ?>" method="post" class="inline ml-1" onsubmit="return confirm('이 메뉴를 삭제하시겠습니까?');">
                <?= csrf_field() ?>
                <button type="submit" class="text-red-600 hover:underline text-sm">삭제</button>
              </form>
            </td>
          </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
      <div class="mt-2">
        <button type="submit" class="bg-gray-600 text-white px-3 py-1 rounded text-sm">순서 적용</button>
      </div>
    </form>
    <?php endif; ?>
  </div>

  <div class="border border-gray-300 bg-white rounded p-4 w-80 shrink-0">
    <h3 class="text-sm font-bold text-gray-700 mb-2" id="form-title">메뉴 등록</h3>
    <form id="menu-form" method="post" action="<?= base_url('admin/menus/store') ?>">
      <?= csrf_field() ?>
      <input type="hidden" name="mt_idx" value="<?= $mtIdx ?>"/>
      <input type="hidden" name="mm_pidx" value="0"/>
      <input type="hidden" name="mm_dep" value="0"/>
      <input type="hidden" name="mm_idx_edit" id="mm_idx_edit" value=""/>

      <div class="space-y-2 mb-3">
        <label class="block text-sm font-medium text-gray-700">메뉴명</label>
        <input type="text" name="mm_name" id="mm_name" required class="border border-gray-300 rounded px-2 py-1 w-full text-sm" placeholder="예: 대시보드"/>
      </div>
      <div class="space-y-2 mb-3">
        <label class="block text-sm font-medium text-gray-700">링크</label>
        <input type="text" name="mm_link" id="mm_link" class="border border-gray-300 rounded px-2 py-1 w-full text-sm" placeholder="예: admin/users"/>
      </div>
      <div class="space-y-2 mb-3">
        <label class="block text-sm font-medium text-gray-700">노출 대상</label>
        <?php if ($mtCode === 'admin'): ?>
          <p class="text-sm text-gray-600">관리자 메뉴는 <b>지자체관리자</b>에게만 노출됩니다. (고정)</p>
        <?php else: ?>
          <div class="flex flex-wrap gap-x-4 gap-y-1">
            <label class="inline-flex items-center gap-1">
              <input type="checkbox" name="mm_level_all" id="mm_level_all" value="1" checked/>
              <span class="text-sm">전체</span>
            </label>
            <?php foreach ($levelNames as $lv => $name): ?>
            <?php if ((int) $lv === $superAdminLevel) { continue; } ?>
            <label class="inline-flex items-center gap-1 mm-level-label">
            <input type="checkbox" name="mm_level[]" value="<?= (int) $lv ?>" class="mm-level-cb"/>
              <span class="text-sm"><?= esc($name) ?></span>
            </label>
            <?php endforeach; ?>
          </div>
        <?php endif; ?>
      </div>
      <div class="space-y-2 mb-3">
        <label class="inline-flex items-center gap-1">
          <input type="checkbox" name="mm_is_view" value="1" id="mm_is_view" checked/>
          <span class="text-sm">노출</span>
        </label>
      </div>
      <div class="flex gap-2">
        <button type="submit" class="bg-btn-search text-white px-4 py-1.5 rounded text-sm" id="btn-submit">등록</button>
        <button type="button" class="bg-gray-200 text-gray-700 px-4 py-1.5 rounded text-sm" id="btn-cancel-edit" style="display:none;">취소</button>
      </div>
    </form>
  </div>
</div>

<style>
  tr.menu-row.dragging {
    opacity: 0.35;
  }
  body.menu-row-dragging {
    user-select: none;
    cursor: move;
  }
  tr.menu-drop-placeholder td {
    padding: 0;
    border: 0;
  }
  .menu-drop-placeholder-box {
    margin: 4px 0;
    height: 34px;
    border: 2px dashed #60a5fa;
    border-radius: 6px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

<script>
(function(){
  const form = document.getElementById('menu-form');
  const formTitle = document.getElementById('form-title');
  const btnSubmit = document.getElementById('btn-submit');
  const btnCancel = document.getElementById('btn-cancel-edit');
  const editIdInput = document.getElementById('mm_idx_edit');
  const mmPidxInput = form.querySelector('[name="mm_pidx"]');
  const mmDepInput = form.querySelector('[name="mm_dep"]');
  const levelAll = document.getElementById('mm_level_all');
  const levelCbs = document.querySelectorAll('.mm-level-cb');
  const isAdminType = '<?= esc($mtCode) ?>' === 'admin';
  const moveForm = document.getElementById('menu-move-form');
  const tbody = moveForm ? moveForm.querySelector('tbody') : null;
  let draggingRow = null;

  if (!isAdminType && levelAll) {
    // "전체" 체크 시: 다른 체크 해제
    levelAll.addEventListener('change', function(){
      if (levelAll.checked) {
        levelCbs.forEach(function(cb){ cb.checked = false; });
      }
    });

    // 다른 체크 선택 시: "전체" 자동 해제
    levelCbs.forEach(function(cb){
      cb.addEventListener('change', function(){
        if (cb.checked) levelAll.checked = false;
      });
    });

    form.addEventListener('submit', function(){
      if (!levelAll.checked) {
        var checked = [];
        levelCbs.forEach(function(cb){ if (cb.checked) checked.push(cb.value); });
        if (checked.length === 0) levelAll.checked = true;
      }
    });
  }

  document.querySelectorAll('.menu-edit').forEach(function(btn){
    btn.addEventListener('click', function(){
      const id = this.dataset.id;
      const name = this.dataset.name;
      const link = this.dataset.link || '';
      const level = (this.dataset.level || '').toString().trim();
      const view = this.dataset.view || 'Y';
      const dep = parseInt(this.dataset.dep || '0', 10);
      form.action = '<?= base_url('admin/menus/update/') ?>' + id;
      form.querySelector('[name="mm_name"]').value = name;
      form.querySelector('[name="mm_link"]').value = link;
      mmPidxInput.value = '0';
      mmDepInput.value = String(dep);
      if (!isAdminType && levelAll) {
        levelAll.checked = (level === '');
        levelCbs.forEach(function(cb){
          cb.checked = level !== '' && level.split(',').indexOf(cb.value) >= 0;
          cb.setAttribute('name', 'mm_level[]');
        });
        if (level !== '' && !Array.prototype.some.call(levelCbs, function(cb){ return cb.checked; })) {
          levelAll.checked = true;
          levelCbs.forEach(function(cb){ cb.checked = false; });
        }
      }
      form.querySelector('[name="mm_is_view"]').checked = (view === 'Y');
      editIdInput.value = id;
      formTitle.textContent = '메뉴 수정';
      btnSubmit.textContent = '수정';
      btnCancel.style.display = 'inline-block';
    });
  });

  // 하위 메뉴 추가
  document.querySelectorAll('.menu-add-child').forEach(function(btn){
    btn.addEventListener('click', function(){
      const parentId = this.dataset.id;
      const parentDep = parseInt(this.dataset.dep || '0', 10);
      form.action = '<?= base_url('admin/menus/store') ?>';
      form.reset();
      form.querySelector('[name="mt_idx"]').value = '<?= $mtIdx ?>';
      mmPidxInput.value = parentId;
      mmDepInput.value = String(parentDep + 1);
      editIdInput.value = '';
      formTitle.textContent = '하위 메뉴 등록';
      btnSubmit.textContent = '등록';
      btnCancel.style.display = 'inline-block';
      // 노출 기본값 재설정
      form.querySelector('[name="mm_is_view"]').checked = true;
      if (!isAdminType && levelAll) {
        levelAll.checked = true;
        levelCbs.forEach(function(cb){
          cb.checked = false;
          cb.setAttribute('name', 'mm_level[]');
        });
      }
      document.getElementById('mm_name').focus();
    });
  });

  btnCancel.addEventListener('click', function(){
    form.action = '<?= base_url('admin/menus/store') ?>';
    form.reset();
    form.querySelector('[name="mt_idx"]').value = '<?= $mtIdx ?>';
    mmPidxInput.value = '0';
    mmDepInput.value = '0';
    form.querySelector('[name="mm_is_view"]').checked = true;
    if (!isAdminType && levelAll) {
      levelAll.checked = true;
      levelCbs.forEach(function(cb){ cb.checked = false; cb.setAttribute('name', 'mm_level[]'); });
    }
    editIdInput.value = '';
    formTitle.textContent = '메뉴 등록';
    btnSubmit.textContent = '등록';
    btnCancel.style.display = 'none';
  });

  // 메뉴 목록 행 드래그 정렬 (마우스 이벤트 기반)
  if (tbody) {
    const colCount = document.querySelectorAll('.data-table thead th').length || 7;
    const makePlaceholder = function() {
      const tr = document.createElement('tr');
      tr.className = 'menu-drop-placeholder';
      const td = document.createElement('td');
      td.colSpan = colCount;
      td.innerHTML = '<div class="menu-drop-placeholder-box">여기에 놓기</div>';
      tr.appendChild(td);
      return tr;
    };

    const refreshOrderNos = function() {
      tbody.querySelectorAll('tr.menu-row').forEach(function(row, idx){
        const noEl = row.querySelector('.menu-order-no');
        if (noEl) noEl.textContent = String(idx + 1);
      });
    };

    let placeholderRow = null;
    let originalOrderIds = [];
    let rafId = null;
    let lastClientY = 0;
    let draggingActive = false;

    const collectCurrentOrderIds = function() {
      return Array.prototype.slice.call(tbody.querySelectorAll('tr.menu-row')).map(function(row){
        const idInput = row.querySelector('input[name="mm_idx[]"]');
        return idInput ? idInput.value : '';
      }).filter(Boolean);
    };

    const restoreOrderByIds = function(ids) {
      if (!ids.length) return;
      const rowMap = {};
      tbody.querySelectorAll('tr.menu-row').forEach(function(row){
        const idInput = row.querySelector('input[name="mm_idx[]"]');
        if (idInput) rowMap[idInput.value] = row;
      });
      ids.forEach(function(id){
        if (rowMap[id]) tbody.appendChild(rowMap[id]);
      });
      refreshOrderNos();
    };

    const updatePlaceholderPosition = function() {
      rafId = null;
      if (!draggingActive || !draggingRow || !placeholderRow) return;
      const rows = Array.prototype.slice.call(tbody.querySelectorAll('tr.menu-row:not(.dragging)'));
      let placed = false;
      for (var i = 0; i < rows.length; i += 1) {
        var box = rows[i].getBoundingClientRect();
        var triggerY = box.top + (box.height * 0.25);
        if (lastClientY < triggerY) {
          if (placeholderRow !== rows[i]) {
            tbody.insertBefore(placeholderRow, rows[i]);
          }
          placed = true;
          break;
        }
      }
      if (!placed) {
        tbody.appendChild(placeholderRow);
      }
    };

    const onMouseMove = function(e) {
      if (!draggingActive) return;
      lastClientY = e.clientY;
      if (!rafId) {
        rafId = window.requestAnimationFrame(updatePlaceholderPosition);
      }
    };

    const clearDragState = function() {
      if (rafId) {
        window.cancelAnimationFrame(rafId);
        rafId = null;
      }
      document.body.classList.remove('menu-row-dragging');
      window.removeEventListener('mousemove', onMouseMove);
      window.removeEventListener('mouseup', onMouseUp);
      if (draggingRow) {
        draggingRow.classList.remove('dragging');
      }
      if (placeholderRow && placeholderRow.parentNode) {
        placeholderRow.parentNode.removeChild(placeholderRow);
      }
      placeholderRow = null;
      draggingRow = null;
      draggingActive = false;
    };

    var onMouseUp = function() {
      if (!draggingActive || !draggingRow || !placeholderRow) {
        clearDragState();
        return;
      }
      var prevRow = placeholderRow.previousElementSibling;
      tbody.insertBefore(draggingRow, placeholderRow);
      refreshOrderNos();

      var draggedDep = parseInt(draggingRow.dataset.mmDep || '0', 10);
      var draggedPidx = parseInt(draggingRow.dataset.mmPidx || '0', 10);

      if (draggedDep > 0) {
        var valid = false;
        if (prevRow && prevRow.classList.contains('menu-row')) {
          var prevIdx = parseInt(prevRow.dataset.mmIdx || '0', 10);
          var prevPidx = parseInt(prevRow.dataset.mmPidx || '0', 10);
          if (prevRow === draggingRow) {
            valid = true;
          } else if (prevIdx === draggedPidx || prevPidx === draggedPidx) {
            valid = true;
          }
        }
        if (!valid) {
          alert('하위 메뉴는 다른 상위 메뉴에는 들어갈 수 없습니다.');
          restoreOrderByIds(originalOrderIds);
          clearDragState();
          return;
        }
      }

      const approved = window.confirm('변경한 순서를 적용할까요?');
      if (!approved) {
        restoreOrderByIds(originalOrderIds);
      } else {
        moveForm.submit();
      }
      clearDragState();
    };

    tbody.querySelectorAll('.menu-drag-handle').forEach(function(handle){
      handle.addEventListener('mousedown', function(e){
        if (e.button !== 0) return;
        const row = handle.closest('tr.menu-row');
        if (!row) return;
        e.preventDefault();
        originalOrderIds = collectCurrentOrderIds();
        draggingRow = row;
        placeholderRow = makePlaceholder();
        draggingActive = true;
        row.classList.add('dragging');
        document.body.classList.add('menu-row-dragging');
        tbody.insertBefore(placeholderRow, row.nextSibling);
        lastClientY = e.clientY;
        updatePlaceholderPosition();
        window.addEventListener('mousemove', onMouseMove, { passive: true });
        window.addEventListener('mouseup', onMouseUp);
      });
    });
  }
})();
</script>
