<template>
  <div class="video-hover-toolbar">
    <button 
      v-for="action in actions" 
      :key="action.key"
      @click.stop="handleAction(action.key)"
      class="toolbar-btn"
      :title="action.label"
      :class="{ 'has-dropdown': action.key === 'download' }"
    >
      <component :is="action.icon" />
      <span class="btn-label">{{ action.label }}</span>
      
      <!-- 下载下拉菜单 -->
      <transition name="fade">
        <div v-if="action.key === 'download' && showDownloadMenu" class="download-dropdown-menu">
          <div class="download-option" @click.stop="emit('download', { taskNo, videoUrl, withWatermark: false })">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 3v12m0 0l-4-4m4 4l4-4M3 17v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2"/>
            </svg>
            <span>无水印下载</span>
          </div>
          <div class="download-option" @click.stop="emit('download', { taskNo, videoUrl, withWatermark: true })">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 3v12m0 0l-4-4m4 4l4-4M3 17v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2"/>
            </svg>
            <span>带水印下载</span>
            <span class="watermark-badge">水印</span>
          </div>
        </div>
      </transition>
    </button>
  </div>
</template>

<script setup>
import { h, ref, computed } from 'vue'

const props = defineProps({
  videoUrl: {
    type: String,
    required: true
  },
  taskNo: {
    type: String,
    required: true
  },
  canContinue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['download', 'share', 'delete', 'continue'])

const showDownloadMenu = ref(false)

// 下载图标
const DownloadIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  fill: 'none',
  xmlns: 'http://www.w3.org/2000/svg',
  class: 'icon'
}, [
  h('path', {
    d: 'M12 3v12m0 0l-4-4m4 4l4-4M3 17v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2',
    stroke: 'currentColor',
    'stroke-width': '2',
    'stroke-linecap': 'round',
    'stroke-linejoin': 'round'
  })
])

// 分享图标
const ShareIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  fill: 'none',
  xmlns: 'http://www.w3.org/2000/svg',
  class: 'icon'
}, [
  h('path', {
    d: 'M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13',
    stroke: 'currentColor',
    'stroke-width': '2',
    'stroke-linecap': 'round',
    'stroke-linejoin': 'round'
  })
])

// 删除图标
const DeleteIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  fill: 'none',
  xmlns: 'http://www.w3.org/2000/svg',
  class: 'icon'
}, [
  h('path', {
    d: 'M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6',
    stroke: 'currentColor',
    'stroke-width': '2',
    'stroke-linecap': 'round',
    'stroke-linejoin': 'round'
  })
])

// 续作图标
const ContinueIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  fill: 'none',
  xmlns: 'http://www.w3.org/2000/svg',
  class: 'icon'
}, [
  h('path', {
    d: 'M19 12H5m14 0-4 4m4-4-4-4',
    stroke: 'currentColor',
    'stroke-width': '2',
    'stroke-linecap': 'round',
    'stroke-linejoin': 'round'
  })
])

const actions = computed(() => {
  const baseActions = [
    {
      key: 'download',
      label: '下载',
      icon: DownloadIcon
    },
    {
      key: 'share',
      label: '分享',
      icon: ShareIcon
    }
  ]

  if (props.canContinue) {
    baseActions.push({
      key: 'continue',
      label: '续作',
      icon: ContinueIcon
    })
  }

  baseActions.push({
    key: 'delete',
    label: '删除',
    icon: DeleteIcon
  })

  return baseActions
})

const handleAction = (actionKey) => {
  if (actionKey === 'download') {
    // 切换下载菜单显示状态
    showDownloadMenu.value = !showDownloadMenu.value
  } else {
    // 其他操作直接触发事件
    emit(actionKey, { videoUrl: props.videoUrl, taskNo: props.taskNo })
  }
}
</script>

<style scoped>
.video-hover-toolbar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  padding: 8px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 25; /* Higher than controls */
}

.video-hover-toolbar:hover {
  opacity: 1;
}

/* Show on parent hover - parent must have proper class */
/* We will handle this in parent component css */

.toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-width: 100px;
}

.toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateX(-2px);
}

.toolbar-btn:active {
  transform: translateX(0);
}

.icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-label {
  font-weight: 500;
}

/* 下载下拉菜单 */
.toolbar-btn.has-dropdown {
  position: relative;
}

.download-dropdown-menu {
  position: absolute;
  top: 0; 
  right: 100%;
  margin-right: 8px;
  background: linear-gradient(135deg, rgba(42, 42, 42, 0.98), rgba(30, 30, 30, 0.98));
  border: 1px solid rgba(26, 195, 255, 0.3);
  border-radius: 8px;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(26, 195, 255, 0.1);
  overflow: hidden;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.download-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: #e0e0e0;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.download-option:last-child {
  border-bottom: none;
}

.download-option:hover {
  background: linear-gradient(90deg, rgba(26, 195, 255, 0.15), rgba(131, 58, 180, 0.15));
  color: #fff;
}

.download-option svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.download-option span:not(.watermark-badge) {
  flex: 1;
}

.watermark-badge {
  font-size: 10px;
  background: linear-gradient(135deg, #1AC3FF, #833AB4);
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(26, 195, 255, 0.3);
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-enter-from {
  opacity: 0;
  transform: translateX(10px) scale(0.95);
}

.fade-leave-to {
  opacity: 0;
  transform: translateX(10px) scale(0.95);
}
</style>
