<template>
  <a-modal 
    :visible="visible"
    title="全局动作"
    :width="800"
    :footer="false"
    @cancel="handleCancel"
    class="global-action-dialog"
  >
    <div class="global-action-content">
      <!-- 搜索和筛选区域 -->
      <div class="search-section">
        <div class="search-filters">
          <a-input-search
            v-model="searchKeyword"
            placeholder="搜索动作或站源..."
            allow-clear
            class="action-search"
          />
          <a-select
            v-model="selectedSiteKey"
            placeholder="选择站源"
            allow-clear
            class="site-filter"
          >
            <a-option value="">全部站源</a-option>
            <a-option 
              v-for="site in sitesWithActions" 
              :key="site.key" 
              :value="site.key"
            >
              {{ site.name }} ({{ getSiteActionCount(site.key) }})
            </a-option>
          </a-select>
        </div>
      </div>

      <!-- 动作列表 -->
      <div class="action-list-container">
        <div v-if="filteredActions.length === 0" class="empty-state">
          <div class="empty-icon">
            <icon-thunderbolt />
          </div>
          <div class="empty-text">
            {{ getEmptyStateText() }}
          </div>
          <div class="empty-hint">
            {{ getEmptyStateHint() }}
          </div>
        </div>

        <div v-else class="action-list">
          <div 
            v-for="action in filteredActions" 
            :key="`${action.siteKey}-${action.name}`"
            class="action-item"
            @click="handleActionClick(action)"
          >
            <div class="action-main">
              <div class="action-name">
                <icon-thunderbolt class="action-icon" />
                {{ action.name }}
              </div>
              <div class="action-source">
                <icon-desktop class="source-icon" />
                {{ action.siteName }}
              </div>
            </div>
            <div class="action-arrow">
              <icon-right />
            </div>
          </div>
        </div>
      </div>

      <!-- 统计信息 -->
      <div class="action-stats">
        <div class="stats-item">
          <span class="stats-label">总动作数：</span>
          <span class="stats-value">{{ allActions.length }}</span>
        </div>
        <div class="stats-item">
          <span class="stats-label">站源数：</span>
          <span class="stats-value">{{ sitesWithActions.length }}</span>
        </div>
        <div v-if="selectedSiteKey" class="stats-item">
          <span class="stats-label">当前站源：</span>
          <span class="stats-value">{{ getSelectedSiteName() }}</span>
        </div>
        <div v-if="searchKeyword || selectedSiteKey" class="stats-item">
          <span class="stats-label">筛选结果：</span>
          <span class="stats-value">{{ filteredActions.length }}</span>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import { Actions } from '@/components/actions'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  sites: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:visible', 'action-executed'])

const searchKeyword = ref('')
const selectedSiteKey = ref('')

// 计算所有可用的动作
const allActions = computed(() => {
  const actions = []
  
  props.sites.forEach(site => {
    if (site.more && site.more.actions && Array.isArray(site.more.actions)) {
      site.more.actions.forEach(action => {
        actions.push({
          ...action,
          siteKey: site.key,
          siteName: site.name,
          siteApi: site.api,
          siteExt: site.ext
        })
      })
    }
  })
  
  return actions
})

// 计算有动作的站源数量
const sitesWithActions = computed(() => {
  return props.sites.filter(site => 
    site.more && 
    site.more.actions && 
    Array.isArray(site.more.actions) && 
    site.more.actions.length > 0
  )
})

// 过滤后的动作列表
const filteredActions = computed(() => {
  let actions = allActions.value
  
  // 按站源筛选
  if (selectedSiteKey.value) {
    actions = actions.filter(action => action.siteKey === selectedSiteKey.value)
  }
  
  // 按关键词搜索
  if (searchKeyword.value.trim()) {
    const keyword = searchKeyword.value.toLowerCase().trim()
    actions = actions.filter(action => 
      action.name.toLowerCase().includes(keyword) ||
      action.siteName.toLowerCase().includes(keyword)
    )
  }
  
  return actions
})

// 获取指定站源的动作数量
const getSiteActionCount = (siteKey) => {
  return allActions.value.filter(action => action.siteKey === siteKey).length
}

// 获取选中站源的名称
const getSelectedSiteName = () => {
  if (!selectedSiteKey.value) return ''
  const site = sitesWithActions.value.find(site => site.key === selectedSiteKey.value)
  return site ? site.name : ''
}

// 获取空状态文本
const getEmptyStateText = () => {
  if (allActions.value.length === 0) {
    return '暂无可用的全局动作'
  }
  
  if (selectedSiteKey.value && searchKeyword.value.trim()) {
    return '在当前站源中未找到匹配的动作'
  }
  
  if (selectedSiteKey.value) {
    return '当前站源暂无可用动作'
  }
  
  if (searchKeyword.value.trim()) {
    return '未找到匹配的动作'
  }
  
  return '暂无可用的全局动作'
}

// 获取空状态提示
const getEmptyStateHint = () => {
  if (allActions.value.length === 0) {
    return '请确保站源配置中包含动作信息'
  }
  
  if (selectedSiteKey.value && searchKeyword.value.trim()) {
    return '请尝试其他关键词或切换站源'
  }
  
  if (selectedSiteKey.value) {
    return '请选择其他站源或清除筛选条件'
  }
  
  if (searchKeyword.value.trim()) {
    return '请尝试其他关键词或清除搜索条件'
  }
  
  return '请确保站源配置中包含动作信息'
}

// 处理动作点击
const handleActionClick = async (action) => {
  try {
    console.log('执行全局动作:', action)
    
    // 添加安全检查，防止null引用错误
    if (!action || typeof action !== 'object') {
      throw new Error('无效的动作对象')
    }
    
    // 解析动作配置
    let actionConfig
    if (typeof action.action === 'string') {
      try {
        // 尝试解析JSON字符串
        actionConfig = JSON.parse(action.action.replace(/'/g, '"'))
      } catch (parseError) {
        // 如果不是JSON，则作为简单字符串处理
        actionConfig = {
          actionId: action.action,
          type: 'msgbox',
          title: action.name || '未知动作',
          msg: `执行动作: ${action.action}`
        }
      }
    } else if (typeof action.action === 'object' && action.action !== null) {
      actionConfig = action.action
    } else {
      throw new Error('无效的动作配置')
    }

    // 添加站源信息到配置中
    actionConfig.siteKey = action.siteKey
    actionConfig.siteName = action.siteName
    actionConfig.siteApi = action.siteApi
    actionConfig.siteExt = action.siteExt

    // 根据动作类型执行相应的操作
    let result
    switch (actionConfig.type) {
      case 'input':
        result = await Actions.input(actionConfig)
        break
      case 'multiInput':
        result = await Actions.multiInput(actionConfig)
        break
      case 'multiInputX':
        result = await Actions.multiInputX(actionConfig)
        break
      case 'menu':
        result = await Actions.menu(actionConfig)
        break
      case 'select':
        result = await Actions.select(actionConfig)
        break
      case 'msgbox':
        result = await Actions.msgBox(actionConfig)
        break
      case 'webview':
        result = await Actions.webView(actionConfig)
        break
      case 'help':
        result = await Actions.help(actionConfig)
        break
      default:
        // 对于未知类型，显示错误信息
        result = await Actions.error(`不支持的动作类型: ${actionConfig.type}`)
        break
    }

    // 发送动作执行完成事件
    emit('action-executed', {
      action,
      result,
      success: true
    })

    Message.success(`动作 "${action.name}" 执行成功`)
    
    // 关闭弹窗
    handleCancel()

  } catch (error) {
    console.error('执行全局动作失败:', error)
    
    // 发送动作执行失败事件
    emit('action-executed', {
      action,
      error: error.message,
      success: false
    })

    if (error.type !== 'cancel') {
      Message.error(`动作 "${action.name}" 执行失败: ${error.message}`)
    }
  }
}

// 处理取消
const handleCancel = () => {
  emit('update:visible', false)
  searchKeyword.value = ''
  selectedSiteKey.value = ''
}

// 监听弹窗显示状态，重置搜索和筛选
watch(() => props.visible, (newVisible) => {
  if (newVisible) {
    searchKeyword.value = ''
    selectedSiteKey.value = ''
  }
})
</script>

<style scoped>
.global-action-dialog :deep(.arco-modal-header) {
  border-bottom: 1px solid var(--color-border-2);
  padding: 16px 24px;
}

.global-action-dialog :deep(.arco-modal-body) {
  padding: 0;
  max-height: 70vh;
  overflow: hidden;
}

.global-action-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 搜索和筛选区域 */
.search-section {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border-2);
  background: var(--color-bg-1);
}

.search-filters {
  display: flex;
  gap: 12px;
  align-items: center;
}

.action-search {
  flex: 2;
  min-width: 60%;
}

.site-filter {
  flex: 1;
  min-width: 100px;
  max-width: 120px;
}

/* 动作列表容器 */
.action-list-container {
  flex: 1;
  overflow-y: auto;
  min-height: 300px;
  max-height: 400px;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  color: var(--color-text-4);
  margin-bottom: 16px;
}

.empty-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-2);
  margin-bottom: 8px;
}

.empty-hint {
  font-size: 14px;
  color: var(--color-text-3);
}

/* 动作列表 */
.action-list {
  padding: 8px 0;
}

.action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--color-border-1);
}

.action-item:hover {
  background: var(--color-bg-2);
}

.action-item:last-child {
  border-bottom: none;
}

.action-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.action-name {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-1);
  flex: 1;
  min-width: 0;
}

.action-icon {
  margin-right: 8px;
  color: var(--color-primary-6);
  font-size: 16px;
  flex-shrink: 0;
}

.action-source {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-3);
  margin-left: 16px;
  flex-shrink: 0;
}

.source-icon {
  margin-right: 4px;
  font-size: 14px;
}

.action-arrow {
  margin-left: 16px;
  color: var(--color-text-4);
  font-size: 14px;
  flex-shrink: 0;
}

/* 统计信息 */
.action-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  background: var(--color-bg-2);
  border-top: 1px solid var(--color-border-2);
}

.stats-item {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.stats-label {
  color: var(--color-text-3);
  margin-right: 4px;
}

.stats-value {
  color: var(--color-text-1);
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .global-action-dialog :deep(.arco-modal) {
    width: 95vw !important;
    margin: 20px auto;
  }
  
  .search-filters {
    flex-direction: column;
    gap: 12px;
  }
  
  .site-filter {
    width: 100%;
  }
  
  .action-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .action-source {
    margin-left: 0;
  }
  
  .action-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* 暗色主题适配 */
@media (prefers-color-scheme: dark) {
  .search-section {
    background: var(--color-bg-3);
  }
  
  .action-item:hover {
    background: var(--color-bg-3);
  }
  
  .action-stats {
    background: var(--color-bg-3);
  }
}
</style>