<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import type { NodeInfo } from '../types'

const props = defineProps<{
  nodes: NodeInfo[]
  selectedNodeId: string | null
  page: number
  pageSize: number
  total: number
  loading: boolean
  isAdmin: boolean
}>()

const emit = defineEmits<{
  'select-node': [nodeId: string]
  'page-change': [page: number]
  'delete-node': [nodeId: string]
}>()

const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))
const canPrev = computed(() => props.page > 1)
const canNext = computed(() => props.page < totalPages.value)
const menuNode = ref<NodeInfo | null>(null)
const menuX = ref(0)
const menuY = ref(0)

function formatTime(value: string): string {
  return new Date(value).toLocaleString()
}

function closeNodeMenu() {
  menuNode.value = null
}

function nodeDetailHref(nodeId: string): string {
  return `/detailed/${encodeURIComponent(nodeId)}`
}

function openNodeMenu(node: NodeInfo, event: MouseEvent) {
  emit('select-node', node.node_id)
  menuNode.value = node
  menuX.value = event.clientX
  menuY.value = event.clientY
}

function deleteSelectedNode() {
  if (menuNode.value) {
    emit('delete-node', menuNode.value.node_id)
  }
  closeNodeMenu()
}

function handleKeydown(event: KeyboardEvent) {
  if (event.key === 'Escape') {
    closeNodeMenu()
  }
}

onMounted(() => {
  window.addEventListener('click', closeNodeMenu)
  window.addEventListener('keydown', handleKeydown)
})

onBeforeUnmount(() => {
  window.removeEventListener('click', closeNodeMenu)
  window.removeEventListener('keydown', handleKeydown)
})
</script>

<template>
  <section class="node-list-panel panel">
    <div class="panel-header">
      <div>
        <p class="eyebrow">NodeInfo</p>
        <h2>节点列表</h2>
      </div>
      <span class="badge">共 {{ total }} 条</span>
    </div>

    <div class="node-table-wrap" @scroll="closeNodeMenu">
      <table class="node-table">
        <thead>
          <tr>
            <th>Node ID</th>
            <th>Long Name</th>
            <th>Short Name</th>
            <th>硬件</th>
            <th>角色</th>
            <th>Public Key</th>
            <th>更新时间</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="node in nodes"
            :key="node.node_id"
            class="node-row"
            :class="{ selected: selectedNodeId === node.node_id }"
            @click="emit('select-node', node.node_id)"
            @contextmenu.prevent.stop="openNodeMenu(node, $event)"
          >
            <td>{{ node.node_id }}</td>
            <td>{{ node.long_name || '-' }}</td>
            <td>{{ node.short_name || '-' }}</td>
            <td>{{ node.hw_model || '-' }}</td>
            <td>{{ node.role || '-' }}</td>
            <td>{{ node.public_key || '-' }}</td>
            <td>{{ formatTime(node.updated_at) }}</td>
          </tr>
        </tbody>
      </table>
      <div v-if="nodes.length === 0" class="empty">暂无节点数据</div>
    </div>

    <div
      v-if="menuNode"
      class="context-menu"
      :style="{ left: `${menuX}px`, top: `${menuY}px` }"
      @click.stop
    >
      <a :href="nodeDetailHref(menuNode.node_id)">节点详细</a>
      <button v-if="isAdmin" class="danger" type="button" @click="deleteSelectedNode">删除</button>
    </div>

    <div class="pagination">
      <button :disabled="loading || !canPrev" @click="emit('page-change', page - 1)">上一页</button>
      <span>第 {{ page }} / {{ totalPages }} 页</span>
      <span>每页 {{ pageSize }} 条</span>
      <button :disabled="loading || !canNext" @click="emit('page-change', page + 1)">下一页</button>
    </div>
  </section>
</template>
