<template>
  <div class="page-menu-manager">
    <div class="page-header">
      <div class="header-left">
        <h2>{{ t('Menu Management') }}</h2>
        <p class="page-description">{{ t('Manage navigation menu items') }}</p>
      </div>
      <div class="header-right">
        <button class="reset-btn" @click="handleResetDefault">
          <i class="fa fa-undo"></i>
          {{ t('Reset to Default') }}
        </button>
        <button class="create-btn" @click="openCreate">
          <i class="fa fa-plus"></i>
          {{ t('Add Menu') }}
        </button>
      </div>
    </div>
    
    <div class="page-content">
      <n-space vertical :size="16">

        <n-data-table 
          :columns="columns" 
          :data="tableData" 
          :bordered="false"
          :row-key="(row: AppMenuItem) => row.id"
          :row-props="(row: AppMenuItem, index: number) => getRowProps(row, index)"
          @update:checked-row-keys="handleCheckedRowKeysChange"
        />
      </n-space>
    </div>

    <n-modal v-model:show="showModal" preset="dialog" :title="editing ? t('Edit Menu') : t('Add Menu')">
      <n-form :model="form" :rules="rules" label-width="100" ref="formRef">
        <n-form-item :label="t('Display Name')"><n-input v-model:value="form.label" /></n-form-item>
        
        <n-form-item :label="t('Menu Type')">
          <n-select 
            v-model:value="form.type" 
            :options="typeOptions" 
            :placeholder="t('Select Menu Type')"
            @update:value="onTypeChange"
          />
        </n-form-item>

        

        <!-- 上级菜单选择（所有类型都可选，默认为空） -->
        <n-form-item :label="t('Parent Menu')" path="parentId">
          <n-select
            v-model:value="(form as any).parentId"
            :options="parentMenuOptions"
            :placeholder="t('No parent (top-level)')"
            clearable
          />
        </n-form-item>
        
        <!-- 页面类型 -->
        <n-form-item v-if="form.type === 'pagetype'" :label="t('PageType Name')">
          <n-input 
            v-model:value="form.pagetype" 
            :placeholder="t('Enter PageType name, e.g.: Knowledge Base')"
            @input="onPageTypeChange"
          />
          <template #feedback>
            <n-text depth="3" style="font-size: 12px;">
              {{ t('Enter PageType name, system will auto-generate friendly URL') }}：{{ previewUrl }}
            </n-text>
          </template>
        </n-form-item>
        
        <!-- 路由名 -->
        <n-form-item v-if="form.type === 'route'" :label="t('Route Name')">
          <n-input 
            v-model:value="form.routeName" 
            :placeholder="t('Enter route name, e.g.: Dashboard')"
          />
        </n-form-item>
        
        <!-- URL路径 -->
        <n-form-item v-if="form.type === 'url'" :label="t('URL Path')">
          <n-input 
            v-model:value="form.url" 
            :placeholder="t('Enter complete URL path')"
          />
          <template #feedback>
            <n-text depth="3" style="font-size: 12px;">
              {{ t('Internal path: /app/knowledge-base') }} <br>
              {{ t('External link: starts with http:// or https://') }}
            </n-text>
          </template>
        </n-form-item>
        
        <!-- Workspace 名称 -->
        <n-form-item v-if="form.type === 'workspace'" :label="t('Workspace Name')">
          <n-input 
            v-model:value="(form as any).workspaceName" 
            :placeholder="t('e.g. Build or custom workspace name')"
          />
          <template #feedback>
            <n-text depth="3" style="font-size: 12px;">
              打开路径：/workspace/{{ pageTypeToSlug((form as any).workspaceName || '') }}
            </n-text>
          </template>
        </n-form-item>
        
        <n-form-item :label="t('Icon')">
          <IconPicker v-model="form.icon" />
        </n-form-item>
        <n-form-item :label="t('Order')"><n-input-number v-model:value="form.order" :min="0" /></n-form-item>
        <n-form-item :label="t('Hidden')"><n-switch v-model:value="form.hidden" /></n-form-item>
      </n-form>
      <template #action>
        <n-space>
          <n-button @click="showModal = false">{{ t('Cancel') }}</n-button>
          <n-button type="primary" @click="save">{{ t('Save') }}</n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
  
</template>

<script setup lang="ts">
import { ref, h, computed } from 'vue'
import { NButton, NSpace, NDataTable, NModal, NForm, NFormItem, NInput, NSelect, NInputNumber, NSwitch, NText, useDialog, type FormInst, type FormRules } from 'naive-ui'
import { useMenuStore, type AppMenuItem } from '../../shared/stores/menu'
import { useAuthStore } from '../../shared/stores/auth'
import { pageTypeToSlug } from '../../shared/utils/slug'
import IconPicker from '../../core/components/IconPicker.vue'
import { t } from '../../shared/i18n'

const menuStore = useMenuStore()
const authStore = useAuthStore()
// 将扁平 items 构造成树形（不修改原数据）
function buildTree(items: AppMenuItem[]) {
  const byId: Record<string, AppMenuItem & { children?: AppMenuItem[] }> = {}
  items.forEach((i) => (byId[i.id] = { ...i, children: [] }))
  const roots: (AppMenuItem & { children?: AppMenuItem[] })[] = []
  items.forEach((i) => {
    const pid = (i as any).parentId as string | null | undefined
    if (pid && byId[pid]) {
      byId[pid].children!.push(byId[i.id])
    } else {
      roots.push(byId[i.id])
    }
  })
  
  // 清理空 children，Naive UI 会根据 children 是否存在渲染树
  const prune = (nodes: (AppMenuItem & { children?: AppMenuItem[] })[]) => {
    nodes.forEach((n) => {
      if (n.children && n.children.length) prune(n.children)
      else delete n.children
    })
  }
  prune(roots)
  return roots
}

// 根据用户类型过滤菜单项
const filteredItems = computed(() => {
  const userType = authStore.user?.user_type
  const isSystemUser = userType === 'System User'
  
  return menuStore.items.filter(m => {
    // 过滤隐藏的菜单项
    if (m.hidden) return false
    
    // 非 System User 的过滤逻辑
    if (!isSystemUser) {
      // 过滤掉 pagetype 和 workspace 类型
      if (m.type === 'pagetype' || m.type === 'workspace') {
        return false
      }
      
      // 只允许显示的根菜单：工具、开发
      const allowedRootMenus = ['tools', 'dev-group']
      if (!m.parentId && !allowedRootMenus.includes(m.id)) {
        return false
      }
      
      // 开发分组下只允许显示：工具市场（非 System User 不显示应用市场、节点市场、智能体市场）
      if (m.parentId === 'dev-group') {
        const allowedDevMenus = ['tool-marketplace']
        if (!allowedDevMenus.includes(m.id)) {
          return false
        }
      }
    }
    
    return true
  })
})

const displayItems = computed(() => (draggedItem.value ? previewItems.value : filteredItems.value))
const tableData = computed(() => buildTree(displayItems.value))
const dialog = useDialog()

const columns = [
  { title: t('Display Name'), key: 'label' },
  { title: t('Type'), key: 'type', render: (row: AppMenuItem) => {
    const typeMap = { 'pagetype': t('PageType'), 'route': t('Route'), 'url': t('URL'), 'workspace': t('Workspace'), 'group': t('Group') }
    return typeMap[row.type] || row.type
  }},
  
  { title: t('Parent Menu'), key: 'parentId', render: (row: AppMenuItem) => {
    if (!(row as any).parentId) return t('None')
    const p = menuStore.items.find(m => m.id === (row as any).parentId)
    return p ? p.label : t('None')
  }},
  { title: t('PageType'), key: 'pagetype' },
  { title: t('Workspace'), key: 'workspaceName' },
  { title: t('Route Name'), key: 'routeName' },
  { title: t('URL Path'), key: 'url' },
  { title: t('Icon'), key: 'icon' },
  { title: t('Order'), key: 'order' },
  { title: t('Hidden'), key: 'hidden', render: (row: AppMenuItem) => row.hidden ? t('Yes') : t('No') },
  { title: t('Actions'), key: 'actions', render: (row: AppMenuItem) => h(NSpace, {}, {
    default: () => [
      h(NButton, { size: 'small', onClick: () => openEdit(row) }, { default: () => t('Edit') }),
      h(NButton, { size: 'small', type: 'error', onClick: () => onRemove(row) }, { default: () => t('Delete') })
    ]
  }) }
]

const showModal = ref(false)
const editing = ref<AppMenuItem | null>(null)
const form = ref<AppMenuItem>({ 
  id: '', 
  key: '', 
  label: '', 
  icon: 'MenuOutlined', 
  type: 'pagetype',  // 默认选择页面类型
  pagetype: '',
  routeName: '', 
  url: '', 
  order: 0, 
  hidden: false 
})

const formRef = ref<FormInst | null>(null)

const rules: FormRules = {
  label: [{ required: true, message: t('Please enter display name') }],
  type: [{ required: true, message: t('Please select menu type') }],
}

const typeOptions = computed(() => {
  const userType = authStore.user?.user_type
  const isSystemUser = userType === 'System User'
  
  const allOptions = [
    { label: t('PageType'), value: 'pagetype' },
    { label: t('Route'), value: 'route' },
    { label: t('URL'), value: 'url' },
    { label: t('Workspace'), value: 'workspace' },
    { label: t('Group'), value: 'group' }
  ]
  
  // 非 System User 过滤掉 pagetype 和 workspace 选项
  if (!isSystemUser) {
    return allOptions.filter(opt => opt.value !== 'pagetype' && opt.value !== 'workspace')
  }
  
  return allOptions
})

 

const parentMenuOptions = computed(() => {
  // 使用过滤后的菜单项作为父菜单选项
  const opts = filteredItems.value.map(m => ({ label: m.label, value: m.id }))
  return [{ label: t('None'), value: null as any }].concat(opts)
})

// 预览URL
const previewUrl = computed(() => {
  if (form.value.type === 'pagetype' && form.value.pagetype) {
    const slug = pageTypeToSlug(form.value.pagetype)
    return `/app/${slug}`
  }
  return ''
})

function openCreate() {
  editing.value = null
  const userType = authStore.user?.user_type
  const isSystemUser = userType === 'System User'
  
  form.value = { 
    id: '', 
    key: '', 
    label: '', 
    icon: '', 
    type: isSystemUser ? 'pagetype' : 'route',  // 根据用户类型设置默认类型
    pagetype: '',
    routeName: '', 
    url: '', 
    order: 0, 
    hidden: false,
    parentId: null
  }
  showModal.value = true
}

function openEdit(row: AppMenuItem) {
  editing.value = row
  form.value = { ...row }
  showModal.value = true
}

// 类型变化处理
function onTypeChange() {
  // 清空其他字段
  form.value.pagetype = ''
  form.value.routeName = ''
  form.value.url = ''
  ;(form.value as any).workspaceName = ''
  
}

// PageType变化处理
function onPageTypeChange() {
  if (form.value.type === 'pagetype' && form.value.pagetype) {
    const slug = pageTypeToSlug(form.value.pagetype)
    form.value.url = `/app/${slug}`
  }
}

function save() {
  const data = { ...form.value }
  
  // 验证：非 System User 不允许保存 pagetype 和 workspace 类型
  const userType = authStore.user?.user_type
  const isSystemUser = userType === 'System User'
  if (!isSystemUser && (data.type === 'pagetype' || data.type === 'workspace')) {
    dialog.error({
      title: t('Permission Denied'),
      content: t('Non-System User cannot create or edit pagetype and workspace menu items'),
      positiveText: t('OK')
    })
    return
  }
  
  // 根据类型设置key
  if (data.type === 'pagetype' && data.pagetype) {
    data.key = pageTypeToSlug(data.pagetype)
    data.url = `/app/${data.key}`
  } else if (data.type === 'workspace' && (data as any).workspaceName) {
    data.key = pageTypeToSlug((data as any).workspaceName)
    data.url = `/workspace/${data.key}`
  } else if (data.type === 'route' && data.routeName) {
    data.key = data.routeName
  } else if (data.type === 'url' && data.url) {
    data.key = data.url
  } else if (data.type === 'group') {
    data.key = data.key || `group_${Date.now()}`
  }
  
  formRef.value?.validate((errors) => {
    if (errors) return
    if (editing.value) {
      menuStore.updateMenu(editing.value.id, data)
    } else {
      data.id = ''
      menuStore.addMenu(data)
    }
    showModal.value = false
  })
}

function onRemove(row: AppMenuItem) {
  dialog.warning({
    title: t('Confirm Delete'),
    content: `${t('Are you sure you want to delete menu')}"${row.label}"？`,
    positiveText: t('Delete'),
    negativeText: t('Cancel'),
    onPositiveClick: () => menuStore.removeMenu(row.id)
  })
}

function handleResetDefault() {
  dialog.warning({
    title: t('Reset to Default'),
    content: t('Are you sure to reset menus to default? This will overwrite current settings.'),
    positiveText: t('Confirm'),
    negativeText: t('Cancel'),
    onPositiveClick: () => menuStore.resetDefault()
  })
}

// 拖拽排序 - 实时预览
const draggedItem = ref<AppMenuItem | null>(null)
const dropIndex = ref<number>(-1)
const previewItems = ref<AppMenuItem[]>([])

function getRowProps(row: AppMenuItem, _index: number) {
  // 计算在扁平数组中的真实索引
  const flatIndex = menuStore.items.findIndex(item => item.id === row.id)
  
  return {
    draggable: true,
    class: {
      'draggable-row': true,
      'drag-over': dropIndex.value === flatIndex,
      'dragging': draggedItem.value?.id === row.id
    },
    onDragstart: (e: DragEvent) => {
      draggedItem.value = row
      previewItems.value = [...menuStore.items]
      e.dataTransfer!.effectAllowed = 'move'
    },
    onDragover: (e: DragEvent) => {
      e.preventDefault()
      if (draggedItem.value && dropIndex.value !== flatIndex) {
        dropIndex.value = flatIndex
        updatePreview()
      }
    },
    onDragleave: () => {
      // 延迟清除，避免快速移动时闪烁
      setTimeout(() => {
        if (!draggedItem.value) {
          dropIndex.value = -1
          previewItems.value = [...menuStore.items]
        }
      }, 50)
    },
    onDrop: (e: DragEvent) => {
      e.preventDefault()
      if (draggedItem.value && dropIndex.value !== -1) {
        applyReorder()
      }
      resetDragState()
    },
    onDragend: resetDragState
  }
}

function updatePreview() {
  if (!draggedItem.value || dropIndex.value === -1) return
  
  const items = [...menuStore.items]
  const currentIndex = items.findIndex(i => i.id === draggedItem.value!.id)
  
  if (currentIndex === -1 || currentIndex === dropIndex.value) return
  
  // 移除并重新插入
  items.splice(currentIndex, 1)
  // 如果目标位置在当前位置之后，需要调整插入位置
  const insertIndex = dropIndex.value > currentIndex ? dropIndex.value - 1 : dropIndex.value
  items.splice(insertIndex, 0, draggedItem.value)
  
  previewItems.value = items
}

function applyReorder() {
  if (!draggedItem.value || dropIndex.value === -1) return
  
  const items = [...previewItems.value]
  
  // 分层重新计算order值
  const rootMenus = items.filter(item => !item.parentId)
  const childMenus = items.filter(item => item.parentId)
  
  // 重新分配根菜单的order
  rootMenus.forEach((item, index) => {
    item.order = index + 1
  })
  
  // 重新分配子菜单的order（按父菜单分组）
  const groupedChildren = childMenus.reduce((acc, child) => {
    const parentId = child.parentId!
    if (!acc[parentId]) acc[parentId] = []
    acc[parentId].push(child)
    return acc
  }, {} as Record<string, AppMenuItem[]>)
  
  Object.values(groupedChildren).forEach(children => {
    children.forEach((child, index) => {
      child.order = index + 1
    })
  })
  
  menuStore.items = items
  menuStore.persist()
}

function resetDragState() {
  draggedItem.value = null
  dropIndex.value = -1
  previewItems.value = [...menuStore.items]
}

function handleCheckedRowKeysChange(keys: (string | number)[]) {
  // 处理选中行变化（如果需要的话）
  console.log('Selected rows:', keys)
}
</script>

<style scoped>
.page-menu-manager {
  width: 100%;
  padding: 16px;
}

/* 页面头部样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.header-left h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.page-description {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 恢复默认按钮 */
.reset-btn {
  height: 36px;
  padding: 0 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.reset-btn:hover {
  background: #f9fafb;
  color: #374151;
  border-color: #9ca3af;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.reset-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.reset-btn i {
  font-size: 12px;
}

/* 新增菜单按钮 - 使用柔和的品牌色系，与pagetype列表页创建按钮一致 */
.create-btn {
  height: 36px; 
  padding: 0 16px; 
  border: 1px solid #1fc76f; 
  border-radius: 8px; 
  background: #e6f8f0;
  color: #0d684b; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  gap: 6px;
  font-size: 14px; 
  font-weight: 500; 
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; 
  overflow: hidden;
}

.create-btn:hover { 
  background: #dcfce7; 
  border-color: #1fc76f;
  color: #166534; 
  transform: translateY(-1px); 
  box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15); 
}

.create-btn:active { 
  background: #1fc76f; 
  border-color: #1fc76f;
  color: white;
  transform: translateY(0); 
  box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2); 
}

.create-btn:disabled { 
  background: #f1f5f9; 
  border-color: #e2e8f0;
  color: #94a3b8; 
  opacity: 0.6; 
  cursor: not-allowed; 
  transform: none; 
  box-shadow: none; 
}

.create-btn:disabled:hover { 
  background: #f1f5f9; 
  border-color: #e2e8f0;
  color: #94a3b8; 
  transform: none; 
  box-shadow: none; 
}

.create-btn i { 
  font-size: 12px; 
}

/* 页面内容区域 */
.page-content {
  margin-top: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-menu-manager {
    padding: 12px;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .header-right {
    width: 100%;
    justify-content: flex-end;
  }
  
  .header-left h2 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .page-menu-manager {
    padding: 8px;
  }
  
  .header-right {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  
  .reset-btn,
  .create-btn {
    width: 100%;
    justify-content: center;
  }
  
  .header-left h2 {
    font-size: 18px;
  }
}

/* 拖拽行 - 实时预览设计 */
:deep(.draggable-row) {
  cursor: grab;
  transition: opacity 0.2s ease;
}

:deep(.draggable-row:hover) {
  background-color: #f8fafc;
}

:deep(.draggable-row:active) {
  cursor: grabbing;
}

/* 拖拽中 - 实时预览效果 */
:deep(.draggable-row.dragging) {
  opacity: 0.7;
  background-color: #f0f9ff;
  border: 1px dashed #3b82f6;
}

/* 拖拽目标 - 清晰指示 */
:deep(.draggable-row.drag-over) {
  border-top: 2px solid #3b82f6;
}

/* 表格样式 */
:deep(.n-data-table) {
  border-radius: 8px;
}

/* 禁用文本选择 */
:deep(.draggable-row *) {
  user-select: none;
}

/* 拖拽时的平滑过渡 */
:deep(.n-data-table-tbody tr) {
  transition: all 0.2s ease;
}
</style>



