<script setup>
import { buildNavigationEditorTree, flattenNavigationEditorWrappers } from '~/lib/navigation-editor-tree.js'

definePageMeta({
  layout: 'admin'
})

const saving = ref(false)
const activeTab = ref('primary')
const { toast, showToast, clearToast } = useAdminToast()

const { data: navigationItems } = await useFetch('/admin/api/navigation', {
  default: () => []
})

const items = ref(navigationItems.value.map((item) => ({
  ...item,
  parentId: item.parentId ?? null,
  isFolder: Boolean(item.isFolder),
  isVisible: true
})))

const navDraggingId = ref('')
const navDragOverId = ref('')
/** 'before' | 'into' | 'after' — 행 위·중·아래 드롭 구역 */
const navDragOverZone = ref('')

const footerDraggingId = ref('')
const footerDragOverId = ref('')

const recommendedDraggingId = ref('')
const recommendedDragOverId = ref('')

/**
 * 네비게이션 항목을 저장 API와 동일한 형태로 직렬화한다.
 * @param {Array<Object>} list - 항목 목록
 * @returns {string} 비교용 JSON 문자열
 */
const serializeNavigationItems = (list) => JSON.stringify(
  [...list]
    .sort((a, b) => {
      if (a.location !== b.location) {
        return String(a.location).localeCompare(String(b.location))
      }
      return (a.sortOrder || 0) - (b.sortOrder || 0)
    })
    .map((item) => ({
      id: String(item.id || '').trim(),
      label: String(item.label || '').trim(),
      url: String(item.url || '').trim(),
      location: item.location,
      sortOrder: Number(item.sortOrder || 0),
      parentId: item.parentId ? String(item.parentId).trim() : null
    }))
)

/** 서버에서 불러온 네비게이션 직렬화 스냅샷 */
const navigationBaseline = ref(serializeNavigationItems(items.value))

/**
 * 현재 편집본이 서버 스냅샷과 다른지 여부
 * @returns {boolean} 변경 여부
 */
const isNavigationDirty = computed(() => serializeNavigationItems(items.value) !== navigationBaseline.value)

const primaryTree = computed(() => buildNavigationEditorTree(items.value, 'primary'))

const primaryRows = computed(() => flattenNavigationEditorWrappers(primaryTree.value))

/**
 * 상단 메뉴 평면 행에 표시할 개요 번호(예: 1, 2, 2.1, 2.2, 3)
 * @returns {string[]}
 */
const primaryOutlineLabels = computed(() => {
  const rows = primaryRows.value
  const labels = []
  /** @type {number[]} */
  const counters = []
  for (const row of rows) {
    const d = row.depth
    counters.length = d + 1
    counters[d] = (counters[d] || 0) + 1
    labels.push(counters.slice(0, d + 1).join('.'))
  }
  return labels
})

const footerItemsSorted = computed(() =>
  items.value
    .filter((item) => item.location === 'footer' && !item.parentId)
    .sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
)

const recommendedItemsSorted = computed(() =>
  items.value
    .filter((item) => item.location === 'recommended' && !item.parentId)
    .sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
)

/**
 * 하위 항목 id를 모두 모은 뒤 삭제한다.
 * @param {string} rootId - 루트 id
 * @returns {void}
 */
const removeItemCascade = (rootId) => {
  const toRemove = new Set([String(rootId)])
  let growing = true
  while (growing) {
    growing = false
    for (const it of items.value) {
      const pid = it.parentId ? String(it.parentId) : ''
      if (pid && toRemove.has(pid) && !toRemove.has(String(it.id))) {
        toRemove.add(String(it.id))
        growing = true
      }
    }
  }
  items.value = items.value.filter((i) => !toRemove.has(String(i.id)))
}

/**
 * 항목 id로 레코드를 찾는다.
 * @param {string} id - 항목 id
 * @returns {Object|undefined}
 */
const getNavItem = (id) => items.value.find((i) => String(i.id) === String(id))

/**
 * nodeId가 ancestorId의 하위(직·간접)인지
 * @param {string} nodeId - 후손 후보
 * @param {string} ancestorId - 조상 id
 * @returns {boolean}
 */
const isUnderTree = (nodeId, ancestorId) => {
  let cur = getNavItem(nodeId)
  while (cur) {
    const p = cur.parentId ? String(cur.parentId) : ''
    if (!p) {
      return false
    }
    if (p === String(ancestorId)) {
      return true
    }
    cur = getNavItem(p)
  }
  return false
}

/**
 * 동일 부모(primary) 형제들의 sortOrder를 10 간격으로 다시 부여한다.
 * @param {string|null|undefined} parentId - 부모 id, 루트면 null
 * @returns {void}
 */
const normalizeOrdersForParent = (parentId) => {
  const pid = parentId == null || parentId === '' ? null : String(parentId)
  const sibs = items.value
    .filter((i) => {
      if (i.location !== 'primary') {
        return false
      }
      const p = i.parentId ? String(i.parentId) : ''
      if (pid === null) {
        return !p
      }
      return p === pid
    })
    .sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
  sibs.forEach((row, idx) => {
    row.sortOrder = (idx + 1) * 10
  })
}

/**
 * 상단 메뉴 한 항목을 드롭 구역에 맞춰 이동·부모 변경한다.
 * @param {string} sourceId - 드래그한 항목 id
 * @param {string} targetId - 드롭 대상 행 id
 * @param {'before'|'into'|'after'} mode - 드롭 구역
 * @returns {boolean} 성공 여부
 */
const movePrimaryItem = (sourceId, targetId, mode) => {
  const src = getNavItem(sourceId)
  const tgt = getNavItem(targetId)
  if (!src || !tgt || src.location !== 'primary' || tgt.location !== 'primary') {
    return false
  }
  if (String(sourceId) === String(targetId)) {
    return false
  }

  if (mode === 'into') {
    if (tgt.parentId != null && String(tgt.parentId).trim() !== '') {
      showToast('error', '상단 메뉴는 하위 한 단계까지만 가능합니다. 루트 항목 가운데에만 하위로 넣을 수 있습니다.')
      return false
    }
    const srcHasPrimaryChildren = items.value.some(
      (i) => i.location === 'primary' && String(i.parentId || '') === String(sourceId)
    )
    if (srcHasPrimaryChildren) {
      showToast('error', '이미 하위 메뉴가 있는 항목은 다른 항목의 하위로 넣을 수 없습니다.')
      return false
    }
    if (isUnderTree(targetId, sourceId)) {
      showToast('error', '자신의 하위 메뉴 안으로는 옮길 수 없습니다.')
      return false
    }
    const oldPid = src.parentId ? String(src.parentId) : null
    const tgtId = String(tgt.id)
    src.parentId = tgtId
    const children = items.value.filter((i) => i.location === 'primary' && String(i.parentId || '') === tgtId)
    const maxOrder = Math.max(0, ...children.map((c) => c.sortOrder || 0))
    src.sortOrder = maxOrder + 10
    normalizeOrdersForParent(tgtId)
    if (String(oldPid || '') !== tgtId) {
      normalizeOrdersForParent(oldPid)
    }
    return true
  }

  if (isUnderTree(targetId, sourceId)) {
    showToast('error', '하위 메뉴와 같은 줄에 끼울 수 없습니다.')
    return false
  }
  if (String(tgt.parentId || '') === String(sourceId)) {
    showToast('error', '자신의 바로 아래 항목 앞·뒤로는 옮길 수 없습니다.')
    return false
  }

  const newParentId = tgt.parentId ?? null
  const newParentStr = newParentId ? String(newParentId) : ''
  if (newParentStr && isUnderTree(newParentStr, sourceId)) {
    showToast('error', '이동할 수 없는 위치입니다.')
    return false
  }

  const oldPid = src.parentId ? String(src.parentId) : null
  src.parentId = tgt.parentId ?? null

  const pKey = newParentStr
  const without = items.value
    .filter((i) => {
      if (i.location !== 'primary') {
        return false
      }
      const ip = i.parentId ? String(i.parentId) : ''
      if (!pKey) {
        return !ip
      }
      return ip === pKey
    })
    .filter((i) => String(i.id) !== String(sourceId))
    .sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))

  const ti = without.findIndex((i) => String(i.id) === String(targetId))
  if (ti < 0) {
    return false
  }
  const insertIdx = mode === 'before' ? ti : ti + 1
  const reordered = [...without.slice(0, insertIdx), src, ...without.slice(insertIdx)]
  reordered.forEach((row, idx) => {
    row.sortOrder = (idx + 1) * 10
  })
  normalizeOrdersForParent(oldPid)
  if (String(oldPid || '') !== String(newParentStr || '')) {
    normalizeOrdersForParent(newParentStr || null)
  }
  return true
}

/**
 * 입력·버튼 위에서는 행 드래그를 시작하지 않는다.
 * @param {DragEvent} event - 이벤트
 * @returns {boolean}
 */
const shouldBlockNavRowDrag = (event) => {
  const el = event.target
  if (!el || typeof el.closest !== 'function') {
    return false
  }
  return Boolean(el.closest('input, button, textarea, select, a'))
}

/**
 * 하단 메뉴 순서 변경
 * @param {string} sourceId - 이동할 id
 * @param {string} targetId - 기준 id
 * @returns {void}
 */
const reorderFooter = (sourceId, targetId) => {
  const list = footerItemsSorted.value.map((i) => i)
  const ids = list.map((s) => String(s.id))
  const si = ids.indexOf(String(sourceId))
  const ti = ids.indexOf(String(targetId))
  if (si < 0 || ti < 0 || si === ti) {
    return
  }
  const [mv] = list.splice(si, 1)
  list.splice(ti, 0, mv)
  list.forEach((row, idx) => {
    row.sortOrder = (idx + 1) * 10
  })
}

/**
 * 추천 사이트 순서 변경
 * @param {string} sourceId - 이동할 id
 * @param {string} targetId - 기준 id
 * @returns {void}
 */
const reorderRecommended = (sourceId, targetId) => {
  const list = recommendedItemsSorted.value.map((i) => i)
  const ids = list.map((s) => String(s.id))
  const si = ids.indexOf(String(sourceId))
  const ti = ids.indexOf(String(targetId))
  if (si < 0 || ti < 0 || si === ti) {
    return
  }
  const [mv] = list.splice(si, 1)
  list.splice(ti, 0, mv)
  list.forEach((row, idx) => {
    row.sortOrder = (idx + 1) * 10
  })
}

/**
 * 상단 행 드래그 시작
 * @param {DragEvent} event - 이벤트
 * @param {string} itemId - 항목 id
 * @returns {void}
 */
const onPrimaryDragStart = (event, itemId) => {
  if (shouldBlockNavRowDrag(event)) {
    event.preventDefault()
    return
  }
  if (!event.dataTransfer) {
    return
  }
  navDraggingId.value = itemId
  event.dataTransfer.effectAllowed = 'move'
}

/**
 * 상단 행 드래그 오버(행 높이 기준 위·중·아래 구역)
 * @param {DragEvent} event - 이벤트
 * @param {string} itemId - 행 id
 * @returns {void}
 */
const onPrimaryDragOverRow = (event, itemId) => {
  event.preventDefault()
  if (!navDraggingId.value) {
    return
  }
  const tr = event.currentTarget
  if (!(tr instanceof HTMLElement)) {
    return
  }
  const rect = tr.getBoundingClientRect()
  const y = event.clientY - rect.top
  const ratio = rect.height > 0 ? y / rect.height : 0.5
  let zone = 'into'
  if (ratio < 0.33) {
    zone = 'before'
  } else if (ratio > 0.66) {
    zone = 'after'
  }
  const overItem = getNavItem(itemId)
  if (zone === 'into' && overItem?.parentId != null && String(overItem.parentId).trim() !== '') {
    zone = ratio < 0.5 ? 'before' : 'after'
  }
  navDragOverId.value = itemId
  navDragOverZone.value = zone
}

/**
 * 상단 행 드롭
 * @param {DragEvent} event - 이벤트
 * @param {string} targetId - 대상 행 id
 * @returns {void}
 */
const onPrimaryDropRow = (event, targetId) => {
  event.preventDefault()
  if (!navDraggingId.value) {
    return
  }
  const mode = /** @type {'before'|'into'|'after'} */ (navDragOverZone.value || 'into')
  movePrimaryItem(navDraggingId.value, targetId, mode)
  onPrimaryDragEnd()
}

/**
 * 상단 트리 드래그 종료
 * @returns {void}
 */
const onPrimaryDragEnd = () => {
  navDraggingId.value = ''
  navDragOverId.value = ''
  navDragOverZone.value = ''
}

/**
 * 하단 행 드래그 시작
 * @param {DragEvent} event - 이벤트
 * @param {string} id - 항목 id
 * @returns {void}
 */
const onFooterDragStart = (event, id) => {
  if (shouldBlockNavRowDrag(event)) {
    event.preventDefault()
    return
  }
  if (!event.dataTransfer) {
    return
  }
  footerDraggingId.value = id
  event.dataTransfer.effectAllowed = 'move'
}

/**
 * 하단 행 드래그 오버
 * @param {DragEvent} event - 이벤트
 * @param {string} id - 항목 id
 * @returns {void}
 */
const onFooterDragOver = (event, id) => {
  event.preventDefault()
  footerDragOverId.value = id
}

/**
 * 하단 행 드롭
 * @param {DragEvent} event - 이벤트
 * @param {string} targetId - 대상 id
 * @returns {void}
 */
const onFooterDrop = (event, targetId) => {
  event.preventDefault()
  if (!footerDraggingId.value) {
    return
  }
  reorderFooter(footerDraggingId.value, targetId)
  footerDraggingId.value = ''
  footerDragOverId.value = ''
}

/**
 * 하단 드래그 종료
 * @returns {void}
 */
const onFooterDragEnd = () => {
  footerDraggingId.value = ''
  footerDragOverId.value = ''
}

/**
 * 추천 사이트 행 드래그 시작
 * @param {DragEvent} event - 이벤트
 * @param {string} id - 항목 id
 * @returns {void}
 */
const onRecommendedDragStart = (event, id) => {
  if (shouldBlockNavRowDrag(event)) {
    event.preventDefault()
    return
  }
  if (!event.dataTransfer) {
    return
  }
  recommendedDraggingId.value = id
  event.dataTransfer.effectAllowed = 'move'
}

/**
 * 추천 사이트 행 드래그 오버
 * @param {DragEvent} event - 이벤트
 * @param {string} id - 항목 id
 * @returns {void}
 */
const onRecommendedDragOver = (event, id) => {
  event.preventDefault()
  recommendedDragOverId.value = id
}

/**
 * 추천 사이트 행 드롭
 * @param {DragEvent} event - 이벤트
 * @param {string} targetId - 대상 id
 * @returns {void}
 */
const onRecommendedDrop = (event, targetId) => {
  event.preventDefault()
  if (!recommendedDraggingId.value) {
    return
  }
  reorderRecommended(recommendedDraggingId.value, targetId)
  recommendedDraggingId.value = ''
  recommendedDragOverId.value = ''
}

/**
 * 추천 사이트 드래그 종료
 * @returns {void}
 */
const onRecommendedDragEnd = () => {
  recommendedDraggingId.value = ''
  recommendedDragOverId.value = ''
}

/**
 * 추천 사이트 행 하이라이트
 * @param {string} id - 항목 id
 * @returns {string}
 */
const recommendedRowClass = (id) => {
  const parts = []
  if (recommendedDragOverId.value === id) {
    parts.push('bg-[#f9f9f7]')
  }
  if (recommendedDraggingId.value === id) {
    parts.push('opacity-50')
  }
  return parts.join(' ')
}

/**
 * 하단 행 하이라이트(태그 관리와 동일)
 * @param {string} id - 항목 id
 * @returns {string}
 */
const footerRowClass = (id) => {
  const parts = []
  if (footerDragOverId.value === id) {
    parts.push('bg-[#f9f9f7]')
  }
  if (footerDraggingId.value === id) {
    parts.push('opacity-50')
  }
  return parts.join(' ')
}

/**
 * 드래그 중 대상 행에 표시할 드롭 구역 안내(형제 끼움 vs 하위 편입)
 * @param {string} rowId - 행 항목 id
 * @returns {string}
 */
const primaryDragZoneCaption = (rowId) => {
  if (!navDraggingId.value || navDragOverId.value !== rowId || !navDragOverZone.value) {
    return ''
  }
  const z = navDragOverZone.value
  if (z === 'before') {
    return '앞에 끼움'
  }
  if (z === 'after') {
    return '뒤에 끼움'
  }
  return '하위로 넣기'
}

/**
 * 상단 테이블 행 드래그·드롭 하이라이트(형제 구역=파랑 끝선, 하위=앰버 링)
 * @param {string} id - 항목 id
 * @returns {string}
 */
const primaryRowClass = (id) => {
  const parts = ['cursor-move', 'relative']
  if (navDragOverId.value === id) {
    if (navDragOverZone.value === 'before') {
      parts.push('border-t-[3px] border-blue-600 bg-blue-50/40')
    } else if (navDragOverZone.value === 'after') {
      parts.push('border-b-[3px] border-blue-600 bg-blue-50/40')
    } else if (navDragOverZone.value === 'into') {
      parts.push('bg-amber-50/50 ring-2 ring-inset ring-amber-500')
    }
  }
  if (navDraggingId.value === id) {
    parts.push('opacity-50')
  }
  return parts.join(' ')
}

/**
 * 상단 루트 항목 추가
 * @returns {void}
 */
const addPrimaryRoot = () => {
  const roots = items.value.filter((i) => i.location === 'primary' && !i.parentId)
  const maxOrder = Math.max(0, ...roots.map((r) => r.sortOrder || 0))
  items.value.push({
    id: crypto.randomUUID(),
    label: '새 메뉴',
    url: '/',
    location: 'primary',
    parentId: null,
    sortOrder: maxOrder + 10,
    isVisible: true,
    isFolder: false
  })
}

/**
 * 하단 항목 추가
 * @returns {void}
 */
const addFooterItem = () => {
  const list = items.value.filter((i) => i.location === 'footer' && !i.parentId)
  const maxOrder = Math.max(0, ...list.map((r) => r.sortOrder || 0))
  items.value.push({
    id: crypto.randomUUID(),
    label: '',
    url: '/',
    location: 'footer',
    parentId: null,
    sortOrder: maxOrder + 10,
    isVisible: true,
    isFolder: false
  })
}

/**
 * 추천 사이트 항목 추가
 * @returns {void}
 */
const addRecommendedItem = () => {
  const list = items.value.filter((i) => i.location === 'recommended' && !i.parentId)
  const maxOrder = Math.max(0, ...list.map((r) => r.sortOrder || 0))
  items.value.push({
    id: crypto.randomUUID(),
    label: '',
    url: 'https://',
    location: 'recommended',
    parentId: null,
    sortOrder: maxOrder + 10,
    isVisible: true,
    isFolder: false
  })
}

/**
 * 네비게이션 항목 목록 저장
 * @returns {Promise<void>} 저장 결과
 */
const saveNavigation = async () => {
  if (saving.value || !isNavigationDirty.value) {
    return
  }

  saving.value = true
  clearToast()
  showToast('info', '네비게이션을 저장하는 중입니다.')

  try {
    const savedItems = await $fetch('/admin/api/navigation', {
      method: 'PUT',
      body: {
        items: items.value.map((item) => ({
          id: item.id,
          label: item.label,
          url: item.url,
          location: item.location,
          sortOrder: Number(item.sortOrder || 0),
          isVisible: true,
          parentId: item.parentId ?? null,
          isFolder: Boolean(item.isFolder)
        }))
      }
    })

    items.value = savedItems.map((item) => ({
      ...item,
      parentId: item.parentId ?? null,
      isFolder: Boolean(item.isFolder),
      isVisible: true
    }))
    navigationBaseline.value = serializeNavigationItems(items.value)
    showToast('success', '네비게이션이 저장되었습니다.')
  } catch (error) {
    const msg = error?.data?.message || error?.message || '네비게이션을 저장하지 못했습니다.'
    showToast('error', msg)
  } finally {
    saving.value = false
  }
}
</script>

<template>
  <section class="admin-navigation bg-paper p-6">
    <div class="admin-navigation__header mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
      <div>
        <p class="admin-navigation__eyebrow text-xs font-semibold uppercase text-muted">
          Navigation
        </p>
        <h1 class="admin-navigation__title mt-2 text-3xl font-semibold">
          메뉴 관리
        </h1>
        <p class="admin-navigation__lead mt-2 max-w-xl text-sm text-muted">
          상단은 <span class="font-semibold text-ink">상단 메뉴 추가</span>로만 항목을 만들고, 행을 드래그해 순서·깊이를 정합니다. 상단 메뉴는 <span class="font-semibold text-ink">루트 아래 한 단계</span>만 허용됩니다(하위 항목 행에는 가운데 드롭이 적용되지 않으며, 이미 하위가 있는 항목은 다른 항목의 하위로 넣을 수 없습니다). 같은 행의 <span class="font-semibold text-ink">위쪽 1/3</span>에 놓으면 앞에 끼우고, <span class="font-semibold text-ink">아래쪽 1/3</span>이면 뒤에 끼우며, <span class="font-semibold text-ink">가운데</span>에 놓으면 <span class="font-semibold text-ink">루트 항목</span>의 하위로만 들어갑니다. 드래그 중에는 행 끝의 <span class="font-semibold text-blue-700">파란 선</span>이 형제 앞·뒤 끼움, <span class="font-semibold text-amber-800">앰버 테두리</span>가 하위 편입을 뜻하며, 개요 열에 짧은 안내가 함께 뜹니다. 왼쪽 개요 번호는 <span class="font-semibold text-ink">1 · 2.1 · 2.2</span>처럼 깊이별로 이어 붙입니다. 입력란 위에서는 드래그가 시작되지 않습니다. 하단·추천 사이트 탭은 평면 목록만 드래그로 순서 변경합니다. 추천 사이트는 공개 홈 우측 사이드 Recommended에 카드 형태로 노출되며, <span class="font-semibold text-ink">https://</span> 주소는 저장 후 브라우저에서 Google 파비콘 프록시 URL로 아이콘을 불러옵니다.
        </p>
      </div>
      <div class="admin-navigation__header-actions flex flex-wrap gap-2">
        <button
          class="admin-navigation__submit rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
          type="button"
          :disabled="saving || !isNavigationDirty"
          @click="saveNavigation"
        >
          {{ saving ? '저장 중' : '메뉴 저장' }}
        </button>
      </div>
    </div>

    <div class="admin-navigation__tabs mb-6 flex gap-2 border-b border-line">
      <button
        class="admin-navigation__tab -mb-px border-b-2 px-4 py-2 text-sm font-semibold transition-colors"
        :class="activeTab === 'primary' ? 'border-ink text-ink' : 'border-transparent text-muted hover:text-ink'"
        type="button"
        @click="activeTab = 'primary'"
      >
        상단 네비게이션
      </button>
      <button
        class="admin-navigation__tab -mb-px border-b-2 px-4 py-2 text-sm font-semibold transition-colors"
        :class="activeTab === 'footer' ? 'border-ink text-ink' : 'border-transparent text-muted hover:text-ink'"
        type="button"
        @click="activeTab = 'footer'"
      >
        하단 네비게이션
      </button>
      <button
        class="admin-navigation__tab -mb-px border-b-2 px-4 py-2 text-sm font-semibold transition-colors"
        :class="activeTab === 'recommended' ? 'border-ink text-ink' : 'border-transparent text-muted hover:text-ink'"
        type="button"
        @click="activeTab = 'recommended'"
      >
        추천 사이트
      </button>
    </div>

    <div v-show="activeTab === 'primary'" class="admin-navigation__panel-primary space-y-4">
      <div class="flex flex-wrap gap-2">
        <button
          class="admin-navigation__add rounded border border-line bg-white px-4 py-2 text-sm font-semibold"
          type="button"
          @click="addPrimaryRoot"
        >
          상단 메뉴 추가
        </button>
      </div>

      <div v-if="primaryTree.length === 0" class="admin-navigation__empty rounded border border-dashed border-line bg-white p-8 text-center text-sm text-muted">
        상단 메뉴가 없습니다. 위 버튼으로 항목을 추가하세요.
      </div>

      <div v-else class="admin-navigation__primary-table overflow-hidden rounded border border-line bg-white">
        <table class="admin-navigation__primary-table-inner w-full border-collapse text-left text-sm">
          <thead class="admin-navigation__primary-head bg-[#f5f5f2] text-xs uppercase text-muted">
            <tr>
              <th class="admin-navigation__primary-cell px-3 py-3">
                개요
              </th>
              <th class="admin-navigation__primary-cell px-4 py-3">
                라벨
              </th>
              <th class="admin-navigation__primary-cell px-4 py-3">
                URL
              </th>
              <th class="admin-navigation__primary-cell px-4 py-3">
                관리
              </th>
            </tr>
          </thead>
          <tbody class="admin-navigation__primary-body divide-y divide-line bg-white">
            <tr
              v-for="(row, index) in primaryRows"
              :key="row.item.id"
              class="admin-navigation__primary-row"
              :class="primaryRowClass(row.item.id)"
              draggable="true"
              @dragstart="onPrimaryDragStart($event, row.item.id)"
              @dragover="onPrimaryDragOverRow($event, row.item.id)"
              @drop="onPrimaryDropRow($event, row.item.id)"
              @dragend="onPrimaryDragEnd"
            >
              <td
                class="admin-navigation__primary-cell w-[5.75rem] min-w-[5.75rem] px-3 py-3 align-middle"
              >
                <div class="admin-navigation__primary-outline flex flex-col items-end gap-0.5">
                  <span class="tabular-nums text-sm font-medium text-ink">
                    {{ primaryOutlineLabels[index] }}
                  </span>
                  <span
                    v-if="primaryDragZoneCaption(row.item.id)"
                    class="admin-navigation__primary-drop-hint max-w-[5.5rem] text-right text-[10px] font-semibold leading-tight"
                    :class="navDragOverZone === 'into' ? 'text-amber-800' : 'text-blue-700'"
                  >
                    {{ primaryDragZoneCaption(row.item.id) }}
                  </span>
                </div>
              </td>
              <td
                class="admin-navigation__primary-cell px-4 py-3 align-middle"
                :style="{ paddingLeft: `${16 + row.depth * 28}px` }"
              >
                <input
                  v-model="row.item.label"
                  class="admin-navigation__primary-label w-full min-w-[8rem] rounded border border-line px-3 py-2 text-sm outline-none focus:border-[#8e9cac]"
                  type="text"
                  placeholder="라벨"
                  required
                >
              </td>
              <td class="admin-navigation__primary-cell px-4 py-3 align-middle">
                <input
                  v-model="row.item.url"
                  class="admin-navigation__primary-url w-full min-w-[10rem] rounded border border-line px-3 py-2 font-mono text-sm outline-none focus:border-[#8e9cac]"
                  type="text"
                  placeholder="URL (# 또는 /경로)"
                  required
                >
              </td>
              <td class="admin-navigation__primary-cell px-4 py-3 align-middle">
                <button
                  class="admin-navigation__primary-remove rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700"
                  type="button"
                  @click="removeItemCascade(row.item.id)"
                >
                  삭제
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div v-show="activeTab === 'footer'" class="admin-navigation__panel-footer space-y-4">
      <div class="flex flex-wrap gap-2">
        <button
          class="admin-navigation__add rounded border border-line bg-white px-4 py-2 text-sm font-semibold"
          type="button"
          @click="addFooterItem"
        >
          하단 메뉴 추가
        </button>
      </div>

      <div v-if="footerItemsSorted.length === 0" class="admin-navigation__empty rounded border border-dashed border-line bg-white p-8 text-center text-sm text-muted">
        하단 메뉴가 없습니다.
      </div>

      <div v-else class="admin-navigation__footer-table overflow-hidden rounded border border-line">
        <table class="admin-navigation__footer-table-inner w-full border-collapse text-left text-sm">
          <thead class="admin-navigation__footer-head bg-[#f5f5f2] text-xs uppercase text-muted">
            <tr>
              <th class="admin-navigation__footer-cell px-4 py-3">
                #
              </th>
              <th class="admin-navigation__footer-cell px-4 py-3">
                라벨
              </th>
              <th class="admin-navigation__footer-cell px-4 py-3">
                URL
              </th>
              <th class="admin-navigation__footer-cell px-4 py-3">
                관리
              </th>
            </tr>
          </thead>
          <tbody class="admin-navigation__footer-body divide-y divide-line bg-white">
            <tr
              v-for="(item, index) in footerItemsSorted"
              :key="item.id"
              class="admin-navigation__footer-row cursor-move"
              :class="footerRowClass(item.id)"
              draggable="true"
              @dragstart="onFooterDragStart($event, item.id)"
              @dragover="onFooterDragOver($event, item.id)"
              @drop="onFooterDrop($event, item.id)"
              @dragend="onFooterDragEnd"
            >
              <td class="admin-navigation__footer-cell px-4 py-4 text-muted">
                {{ index + 1 }}
              </td>
              <td class="admin-navigation__footer-cell px-4 py-4">
                <input
                  v-model="item.label"
                  class="w-full min-w-[8rem] rounded border border-line px-3 py-2 text-sm outline-none focus:border-[#8e9cac]"
                  type="text"
                  placeholder="라벨"
                  required
                >
              </td>
              <td class="admin-navigation__footer-cell px-4 py-4">
                <input
                  v-model="item.url"
                  class="w-full min-w-[10rem] rounded border border-line px-3 py-2 font-mono text-sm outline-none focus:border-[#8e9cac]"
                  type="text"
                  placeholder="URL"
                  required
                >
              </td>
              <td class="admin-navigation__footer-cell px-4 py-4">
                <button
                  class="rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700"
                  type="button"
                  @click="removeItemCascade(item.id)"
                >
                  삭제
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div v-show="activeTab === 'recommended'" class="admin-navigation__panel-recommended space-y-4">
      <p class="admin-navigation__recommended-note max-w-xl text-sm text-muted">
        공개 홈 우측 사이드바 Recommended 영역에 표시됩니다. <code class="rounded bg-[#f0f1f3] px-1 py-0.5 text-xs">https://</code> 링크는 아이콘에 Google 파비콘 프록시를 사용합니다(내부 경로 <code class="rounded bg-[#f0f1f3] px-1 py-0.5 text-xs">/</code>만 있으면 아이콘은 생략).
      </p>
      <div class="flex flex-wrap gap-2">
        <button
          class="admin-navigation__add rounded border border-line bg-white px-4 py-2 text-sm font-semibold"
          type="button"
          @click="addRecommendedItem"
        >
          추천 사이트 추가
        </button>
      </div>

      <div v-if="recommendedItemsSorted.length === 0" class="admin-navigation__empty rounded border border-dashed border-line bg-white p-8 text-center text-sm text-muted">
        추천 사이트가 없습니다.
      </div>

      <div v-else class="admin-navigation__recommended-table overflow-hidden rounded border border-line">
        <table class="admin-navigation__recommended-table-inner w-full border-collapse text-left text-sm">
          <thead class="admin-navigation__recommended-head bg-[#f5f5f2] text-xs uppercase text-muted">
            <tr>
              <th class="admin-navigation__recommended-cell px-4 py-3">
                #
              </th>
              <th class="admin-navigation__recommended-cell px-4 py-3">
                제목
              </th>
              <th class="admin-navigation__recommended-cell px-4 py-3">
                URL
              </th>
              <th class="admin-navigation__recommended-cell px-4 py-3">
                관리
              </th>
            </tr>
          </thead>
          <tbody class="admin-navigation__recommended-body divide-y divide-line bg-white">
            <tr
              v-for="(item, index) in recommendedItemsSorted"
              :key="item.id"
              class="admin-navigation__recommended-row cursor-move"
              :class="recommendedRowClass(item.id)"
              draggable="true"
              @dragstart="onRecommendedDragStart($event, item.id)"
              @dragover="onRecommendedDragOver($event, item.id)"
              @drop="onRecommendedDrop($event, item.id)"
              @dragend="onRecommendedDragEnd"
            >
              <td class="admin-navigation__recommended-cell px-4 py-4 text-muted">
                {{ index + 1 }}
              </td>
              <td class="admin-navigation__recommended-cell px-4 py-4">
                <input
                  v-model="item.label"
                  class="w-full min-w-[8rem] rounded border border-line px-3 py-2 text-sm outline-none focus:border-[#8e9cac]"
                  type="text"
                  placeholder="사이트 이름"
                  required
                >
              </td>
              <td class="admin-navigation__recommended-cell px-4 py-4">
                <input
                  v-model="item.url"
                  class="w-full min-w-[10rem] rounded border border-line px-3 py-2 font-mono text-sm outline-none focus:border-[#8e9cac]"
                  type="text"
                  placeholder="https://…"
                  required
                >
              </td>
              <td class="admin-navigation__recommended-cell px-4 py-4">
                <button
                  class="rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700"
                  type="button"
                  @click="removeItemCascade(item.id)"
                >
                  삭제
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div
      v-if="toast"
      class="admin-navigation__toast fixed right-5 top-5 z-[100] max-w-sm rounded border px-4 py-3 text-sm font-semibold shadow-lg"
      :class="{
        'border-green-200 bg-green-50 text-green-800': toast.type === 'success',
        'border-red-200 bg-red-50 text-red-800': toast.type === 'error',
        'border-line bg-white text-ink': toast.type === 'info'
      }"
      role="status"
    >
      {{ toast.message }}
    </div>
  </section>
</template>
