<template>
  <a-modal
    :open="visible"
    :title="modalTitle"
    :footer="null"
    width="800px"
    class="selector-modal"
    @update:open="$emit('update:visible', $event)"
  >
    <div class="selector-container">
      <!-- 分组选择器 + 批量操作按钮 -->
      <div class="selector-actions">
        <a-space>
          <!-- 分组选择器 -->
          <a-select
            :value="selectorGroupId"
            placeholder="使用场景默认分组"
            size="small"
            style="width: 160px;"
            allow-clear
            @change="handleSelectorGroupChange"
          >
            <a-select-option v-for="g in groupList" :key="g.id" :value="g.id">
              {{ g.name }}
            </a-select-option>
          </a-select>
          <a-divider type="vertical" />
          <a-button size="small" @click="handleSelectAll">
            <template #icon><SelectOutlined /></template>
            全选
          </a-button>
          <a-button size="small" @click="handleClearSelection">
            <template #icon><StopOutlined /></template>
            清空
          </a-button>
          <a-button size="small" @click="handleAutoFill">
            <template #icon><ThunderboltOutlined /></template>
            智能填充
          </a-button>
        </a-space>
      </div>

      <!-- 候选网格 -->
      <div class="selector-grid">
        <div
          v-for="file in selectorFiles"
          :key="file.id"
          class="selector-item"
          :class="{ 'selector-item--selected': isSelected(file.id) }"
          @click="toggleSelection(file)"
        >
          <div class="selector-thumb">
            <img v-if="file.coverBase64" :src="file.coverBase64" />
            <VideoCameraOutlined v-else />
          </div>
          <div class="selector-name">{{ file.displayName || file.fileName }}</div>
          <div v-if="isSelected(file.id)" class="selector-checkmark">
            <CheckOutlined />
          </div>
        </div>
      </div>

      <!-- 底部操作按钮 -->
      <div class="selector-actions-footer">
        <a-space>
          <a-button @click="$emit('update:visible', false)">取消</a-button>
          <a-button type="primary" @click="handleConfirm">确定</a-button>
        </a-space>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import {
  VideoCameraOutlined,
  ThunderboltOutlined,
  CheckOutlined,
  SelectOutlined,
  StopOutlined
} from '@ant-design/icons-vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  sceneIndex: {
    type: Number,
    default: -1
  },
  sceneGroupId: {
    type: [Number, String],
    default: null
  },
  globalGroupId: {
    type: [Number, String],
    default: null
  },
  groupList: {
    type: Array,
    default: () => []
  },
  allGroupFiles: {
    type: Object,
    default: () => ({})
  },
  groupFiles: {
    type: Array,
    default: () => []
  },
  initialCandidates: {
    type: Array,
    default: () => []
  },
  maxCandidates: {
    type: Number,
    default: 10
  }
})

const emit = defineEmits(['update:visible', 'confirm', 'load-group-files'])

// 弹窗分组选择
const selectorGroupId = ref(null)

// 临时选中的文件ID列表
const tempSelectedFiles = ref([])

// 弹窗标题
const modalTitle = computed(() =>
  `场景${props.sceneIndex + 1} - 已选择 ${tempSelectedFiles.value.length}/${props.maxCandidates} 个候选`
)

// 弹窗中显示的素材列表
const selectorFiles = computed(() => {
  const groupId = selectorGroupId.value
  if (groupId) {
    return props.allGroupFiles[groupId] || []
  }
  // 使用场景分组或全局分组
  const effectiveGroupId = props.sceneGroupId || props.globalGroupId
  if (effectiveGroupId) {
    return props.allGroupFiles[effectiveGroupId] || props.groupFiles
  }
  return props.groupFiles
})

// 监听弹窗打开，初始化状态
watch(() => props.visible, (visible) => {
  if (visible) {
    // 初始化选中列表
    tempSelectedFiles.value = [...props.initialCandidates]
    // 设置初始分组
    selectorGroupId.value = props.sceneGroupId || props.globalGroupId || null
    // 如果分组素材未缓存，通知父组件加载
    if (selectorGroupId.value && !props.allGroupFiles[selectorGroupId.value]) {
      emit('load-group-files', selectorGroupId.value)
    }
  }
})

// 判断是否选中
const isSelected = (fileId) => tempSelectedFiles.value.includes(fileId)

// 切换选中状态
const toggleSelection = (file) => {
  const index = tempSelectedFiles.value.indexOf(file.id)
  if (index > -1) {
    tempSelectedFiles.value.splice(index, 1)
  } else {
    if (tempSelectedFiles.value.length < props.maxCandidates) {
      tempSelectedFiles.value.push(file.id)
    } else {
      message.warning(`每个场景最多只能选择${props.maxCandidates}个候选`)
    }
  }
}

// 全选
const handleSelectAll = () => {
  tempSelectedFiles.value = selectorFiles.value.map(f => f.id)
}

// 清空
const handleClearSelection = () => {
  tempSelectedFiles.value = []
}

// 智能填充
const handleAutoFill = () => {
  if (props.sceneIndex < 0) return

  const availableMaterials = props.groupFiles.filter(
    material => !tempSelectedFiles.value.includes(material.id)
  )

  if (availableMaterials.length === 0) {
    message.warning('没有更多可用素材')
    return
  }

  const maxAddCount = props.maxCandidates - tempSelectedFiles.value.length
  const targetCount = Math.min(3, maxAddCount)

  if (targetCount <= 0) {
    message.warning(`候选数量已达上限（${props.maxCandidates}个）`)
    return
  }

  // 简单随机选择
  const shuffled = [...availableMaterials].sort(() => Math.random() - 0.5)
  const selected = shuffled.slice(0, targetCount)
  tempSelectedFiles.value.push(...selected.map(m => m.id))
  message.success(`已智能选择${selected.length}个候选素材`)
}

// 分组切换
const handleSelectorGroupChange = (groupId) => {
  selectorGroupId.value = groupId
  tempSelectedFiles.value = []
  if (groupId && !props.allGroupFiles[groupId]) {
    emit('load-group-files', groupId)
  }
}

// 确认选择
const handleConfirm = () => {
  emit('confirm', {
    sceneIndex: props.sceneIndex,
    fileIds: [...tempSelectedFiles.value]
  })
  emit('update:visible', false)
}
</script>

<style scoped lang="less">
.selector-container {
  .selector-actions {
    margin-bottom: var(--space-2);
    padding: var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
  }
}

.selector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  max-height: 480px;
  overflow-y: auto;
  padding: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.selector-item {
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  transition: all var(--duration-base) ease;
  position: relative;
  background: var(--color-surface);
  box-shadow: var(--shadow-inset-card);

  &:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-inset-card);
  }

  &--selected {
    border-color: var(--color-success);
    box-shadow: var(--shadow-inset-card);
  }

  .selector-thumb {
    aspect-ratio: 16/9;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-2xl);

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .selector-name {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg);
  }

  .selector-checkmark {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    background: var(--color-success);
    color: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    z-index: 2;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
  }
}

.selector-actions-footer {
  margin-top: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  text-align: right;
  border: 1px solid var(--color-border);
}

@media (max-width: 1200px) {
  .selector-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .selector-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
