<template>
  <view class="index-page page-container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-input" @click="goSearch">
        <text class="search-icon">🔍</text>
        <text class="search-placeholder">搜索游戏服务...</text>
      </view>
      <view class="notification-btn" @click="goNotification">
        <text class="notif-icon">🔔</text>
        <view v-if="hasUnread" class="unread-dot"></view>
      </view>
    </view>

    <!-- 赛博朋克标题 -->
    <view class="page-title">
      <view class="title-line"></view>
      <text class="title-text neon-text">GAMING SERVICES</text>
      <view class="title-line"></view>
    </view>

    <!-- 游戏分类 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">游戏分类</text>
        <text class="section-more" @click="goAllCategories">全部 ></text>
      </view>

      <scroll-view class="categories-scroll" scroll-x show-scrollbar="false">
        <view class="categories-container">
          <game-category
            v-for="category in categories"
            :key="category.id"
            :category="category"
            :show-count="true"
            @click="goCategory"
          />
        </view>
      </scroll-view>
    </view>

    <!-- 服务类型快捷入口 -->
    <view class="service-types">
      <view
        v-for="type in serviceTypes"
        :key="type.id"
        class="type-item cyber-card"
        @click="goServiceType(type)"
      >
        <text class="type-icon">{{ type.icon }}</text>
        <text class="type-name">{{ type.name }}</text>
        <view class="type-arrow">→</view>
      </view>
    </view>

    <!-- 热门推荐 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">🔥 热门推荐</text>
        <text class="section-subtitle">TRENDING NOW</text>
      </view>

      <view class="services-list">
        <service-card
          v-for="service in hotServices"
          :key="service.id"
          :service="service"
          @click="goServiceDetail"
        />
      </view>
    </view>

    <!-- 加载更多 -->
    <view v-if="loading" class="loading-container">
      <view class="loading-dot"></view>
      <view class="loading-dot"></view>
      <view class="loading-dot"></view>
    </view>

    <!-- 底部装饰 -->
    <view class="bottom-decoration">
      <view class="decoration-line"></view>
      <text class="decoration-text">// POWERED BY CYBER TECH //</text>
      <view class="decoration-line"></view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { gameCategories, serviceTypes, hotServices } from '../../mock'

const categories = ref([])
const services = ref([])
const loading = ref(false)
const hasUnread = ref(true)

onMounted(() => {
  loadData()
})

const loadData = async () => {
  loading.value = true

  // 模拟加载
  setTimeout(() => {
    categories.value = gameCategories
    services.value = hotServices
    loading.value = false
  }, 500)
}

const goSearch = () => {
  uni.navigateTo({
    url: '/pages/index/search'
  })
}

const goNotification = () => {
  uni.showToast({
    title: '暂无新消息',
    icon: 'none'
  })
}

const goAllCategories = () => {
  uni.showToast({
    title: '全部分类',
    icon: 'none'
  })
}

const goCategory = (category) => {
  uni.navigateTo({
    url: `/pages/category/list?categoryId=${category.id}&categoryName=${category.name}`
  })
}

const goServiceType = (type) => {
  uni.navigateTo({
    url: `/pages/category/list?type=${type.id}&typeName=${type.name}`
  })
}

const goServiceDetail = (service) => {
  uni.navigateTo({
    url: `/pages/service/detail?id=${service.id}`
  })
}
</script>

<style lang="scss" scoped>
.index-page {
  padding: 24rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 32rpx;
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 24rpx 32rpx;
  background: linear-gradient(135deg, rgba(20, 25, 50, 0.9) 0%, rgba(10, 14, 39, 0.8) 100%);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 50rpx;
  backdrop-filter: blur(10rpx);
  transition: all 0.3s ease;

  &:active {
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 0 20rpx rgba(0, 255, 255, 0.3);
  }
}

.search-icon {
  font-size: 32rpx;
}

.search-placeholder {
  font-size: 28rpx;
  color: #7a7e9d;
}

.notification-btn {
  position: relative;
  width: 88rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(20, 25, 50, 0.9) 0%, rgba(10, 14, 39, 0.8) 100%);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 50%;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
    border-color: rgba(0, 255, 255, 0.6);
  }
}

.notif-icon {
  font-size: 36rpx;
}

.unread-dot {
  position: absolute;
  top: 18rpx;
  right: 18rpx;
  width: 16rpx;
  height: 16rpx;
  background: #ff3366;
  border-radius: 50%;
  border: 2px solid #0a0e27;
  animation: pulse 2s infinite;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-bottom: 40rpx;
}

.title-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 255, 255, 0.5) 50%,
    transparent 100%
  );
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  letter-spacing: 4rpx;
}

.section {
  margin-bottom: 48rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #ffffff;
}

.section-subtitle {
  font-size: 22rpx;
  color: #7a7e9d;
  letter-spacing: 2rpx;
  margin-left: 16rpx;
}

.section-more {
  font-size: 26rpx;
  color: #00ffff;
  &:active {
    opacity: 0.7;
  }
}

.categories-scroll {
  white-space: nowrap;
  margin: 0 -24rpx;
  padding: 0 24rpx;
}

.categories-container {
  display: inline-flex;
  gap: 12rpx;
}

.service-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-bottom: 48rpx;
}

.type-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 28rpx 32rpx;
  background: linear-gradient(135deg, rgba(20, 25, 50, 0.9) 0%, rgba(10, 14, 39, 0.8) 100%);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 16rpx;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    border-color: rgba(0, 255, 255, 0.5);
  }
}

.type-icon {
  font-size: 40rpx;
}

.type-name {
  flex: 1;
  font-size: 28rpx;
  font-weight: bold;
  color: #ffffff;
}

.type-arrow {
  font-size: 32rpx;
  color: #00ffff;
}

.services-list {
  display: flex;
  flex-direction: column;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16rpx;
  padding: 40rpx 0;
}

.bottom-decoration {
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-top: 60rpx;
  padding: 40rpx 0;
  opacity: 0.5;
}

.decoration-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(122, 126, 157, 0.3) 50%,
    transparent 100%
  );
}

.decoration-text {
  font-size: 20rpx;
  color: #7a7e9d;
  letter-spacing: 2rpx;
  font-family: monospace;
}
</style>
