<template>
  <view class="tool-grid">
    <view
      v-for="tool in tools"
      :key="tool.key"
      class="tool-item"
      @click="handleTap(tool.key)"
    >
      <view class="tool-icon" :style="{ background: tool.bgColor }">
        <u-icon :name="tool.icon" :size="24" :color="tool.iconColor"></u-icon>
      </view>
      <text class="tool-label">{{ tool.label }}</text>
      <view v-if="tool.badge" class="tool-badge">
        <text class="badge-text">{{ tool.badge }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
interface Tool {
  key: string
  label: string
  icon: string
  iconColor: string
  bgColor: string
  badge?: string | number
}

interface Props {
  tools?: Tool[]
}

withDefaults(defineProps<Props>(), {
  tools: () => [
    { key: 'invite', label: '邀请返现', icon: 'gift', iconColor: '#FF6B35', bgColor: '#FFF5F2' },
    { key: 'coupon', label: '优惠券', icon: 'coupon', iconColor: '#FAAD14', bgColor: '#FFFBE6' },
    { key: 'favorite', label: '我的收藏', icon: 'heart', iconColor: '#F5222D', bgColor: '#FFF1F0' },
    { key: 'service', label: '联系客服', icon: 'chat', iconColor: '#0086F6', bgColor: '#E6F4FF' }
  ]
})

const emit = defineEmits<{
  (e: 'item-click', key: string): void
}>()

function handleTap(key: string) {
  emit('item-click', key)
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';
@import '@/static/styles/mixins.scss';

.tool-grid {
  background: $bg-card;
  margin: 0 $spacing-2xl $spacing-lg;
  border-radius: $radius-lg;
  padding: $spacing-lg;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: $spacing-md;
}

.tool-item {
  position: relative;
  @include flex-column(center, center);
  gap: $spacing-sm;
  padding: $spacing-md 0;
  transition: $transition-transform;

  &:active {
    transform: scale(0.95);
  }
}

.tool-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: $radius-base;
  @include flex-center;
}

.tool-label {
  font-size: $font-xs;
  color: $text-secondary;
  font-weight: $font-medium;
}

.tool-badge {
  position: absolute;
  top: 8rpx;
  right: 20rpx;
  min-width: 32rpx;
  height: 32rpx;
  background: $error-color;
  border-radius: $radius-round;
  padding: 0 8rpx;
  @include flex-center;
}

.badge-text {
  font-size: 20rpx;
  color: $text-inverse;
  font-weight: $font-semibold;
  line-height: 1;
  transform: scale(0.9);
}
</style>
