<script setup lang="ts">
interface ZoneOption {
  key: string
  label: string
  hint: string
  count: number
}

interface Props {
  zones: ZoneOption[]
  activeZone: string
  sortBy: string
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:activeZone': [value: string]
  'update:sortBy': [value: string]
}>()

function selectZone(key: string) {
  emit('update:activeZone', key)
}

function updateSort(value: string | number | boolean) {
  emit('update:sortBy', String(value))
}
</script>

<template>
  <div class="zones-and-sort">
    <div class="zone-tabs">
      <button
        v-for="zone in zones"
        :key="zone.key"
        type="button"
        class="zone-tab"
        :class="{ active: activeZone === zone.key }"
        @click="selectZone(zone.key)"
      >
        <div class="zone-main">
          <strong>{{ zone.label }}</strong>
          <span class="zone-count">{{ zone.count }}</span>
        </div>
        <small>{{ zone.hint }}</small>
      </button>
    </div>
    <div class="list-actions">
      <el-radio-group :model-value="sortBy" size="small" @update:model-value="updateSort">
        <el-radio-button label="recommended">综合推荐</el-radio-button>
        <el-radio-button label="coinDesc">哈夫币</el-radio-button>
        <el-radio-button label="awmDesc">AWM数量</el-radio-button>
        <el-radio-button label="priceAsc">价格最低</el-radio-button>
        <el-radio-button label="priceDesc">价格最高</el-radio-button>
      </el-radio-group>
    </div>
  </div>
</template>

<style scoped>
.zones-and-sort {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 14px;
  align-items: end;
  min-width: 0;
}

.zone-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(108px, 1fr));
  gap: 10px;
  min-width: 0;
}

.zone-tab {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 72px;
  padding: 12px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s;
}

.zone-tab:hover {
  border-color: #ff6a00;
  background: #fff7ed;
}

.zone-tab.active {
  border-color: #ff6a00;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
}

.zone-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.zone-tab strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  color: #17233d;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-count {
  font-size: 16px;
  font-weight: 900;
  color: #ff6a00;
}

.zone-tab small {
  overflow: hidden;
  font-size: 11px;
  color: #7b8798;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-actions {
  display: flex;
  justify-content: flex-end;
  min-width: max-content;
  padding-bottom: 2px;
}

.list-actions :deep(.el-radio-group) {
  white-space: nowrap;
}

@media (max-width: 1380px) {
  .zones-and-sort {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .list-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .zone-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
</style>
