<script setup lang="ts">
interface Props {
  historyScoreOptions?: number[]
  isLoadingOptions?: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'score-change': [score?: number]
  'order-change': [orderBy: number]
  'go-back': []
  'refresh': []
}>()

// 筛选条件
const selectedScore = ref<number | undefined>()
const selectedOrderBy = ref<number>(1) // 默认按打分从小到大

// 排序选项
const orderOptions = [
  { label: '按打分从小到大', value: 1 },
  { label: '按打分从大到小', value: 2 },
  { label: '按时间从早到晚', value: 3 },
  { label: '按时间从晚到早', value: 4 },
]

// 处理分数筛选变化
function handleScoreChange(score?: number) {
  selectedScore.value = score
  emit('score-change', score)
}

// 处理排序变化
function handleOrderChange(orderBy: number) {
  selectedOrderBy.value = orderBy
  emit('order-change', orderBy)
}

// 返回上一页
function goBack() {
  emit('go-back')
}

// 刷新
function handleRefresh() {
  emit('refresh')
}

// 显示排序选择器
const showOrderPicker = ref(false)

function handleOrderPickerConfirm(value: number) {
  handleOrderChange(value)
  showOrderPicker.value = false
}
</script>

<template>
  <view class="review-header border-b border-gray-200 bg-white">
    <!-- 筛选条件 -->
    <view class="filter-section p-4 pt-2">
      <!-- 历史评分筛选 -->
      <view class="filter-group mb-3">
        <text class="filter-label mb-2 block text-sm text-gray-600">历史评分:</text>
        <view class="score-filters flex flex-wrap gap-2">
          <view
            class="score-tag"
            :class="{ active: selectedScore === undefined }"
            @click="handleScoreChange(undefined)"
          >
            全部
          </view>
          <view
            v-for="score in historyScoreOptions"
            :key="score"
            class="score-tag"
            :class="{ active: selectedScore === score }"
            @click="handleScoreChange(score)"
          >
            {{ score }}分
          </view>

          <!-- 加载状态 -->
          <view v-if="isLoadingOptions" class="score-tag loading">
            <wd-loading size="12" />
            <text class="ml-1">加载中</text>
          </view>
        </view>
      </view>

      <!-- 试卷排序 -->
      <view class="filter-group">
        <text class="filter-label mb-2 block text-sm text-gray-600">试卷排序:</text>
        <view
          class="order-selector flex items-center justify-between rounded-2 bg-gray-50 px-3 py-2"
          @click="showOrderPicker = true"
        >
          <text class="text-sm text-gray-700">
            {{ orderOptions.find(item => item.value === selectedOrderBy)?.label }}
          </text>
          <view class="i-fluent:chevron-down-20-filled size-4 text-gray-400" />
        </view>
      </view>
    </view>

    <!-- 排序选择器 -->
    <wd-action-sheet
      v-model="showOrderPicker"
      :actions="orderOptions.map(item => ({ name: item.label, value: item.value }))"
      cancel-text="取消"
      @select="({ item }) => handleOrderPickerConfirm(item.value)"
    />
  </view>
</template>

<style scoped>
.review-header {
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.back-btn:active,
.refresh-btn:active {
  opacity: 0.6;
}

.score-tag {
  padding: 4px 12px;
  border-radius: 12px;
  background-color: #f3f4f6;
  color: #6b7280;
  font-size: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.score-tag.active {
  background-color: #3b82f6;
  color: white;
}

.score-tag.loading {
  background-color: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
  display: flex;
  align-items: center;
}

.score-tag:not(.loading):not(.active):active {
  background-color: #e5e7eb;
}

.order-selector {
  transition: all 0.2s ease;
}

.order-selector:active {
  background-color: #e5e7eb;
}

.filter-label {
  font-weight: 500;
}
</style>
