<template>
  <div class="home-page">
    <section class="hero">
      <div class="hero-content">
        <h1>Discover Premium Products</h1>
        <p>Find the best products from trusted suppliers worldwide</p>
        <el-button type="primary" size="large" @click="$router.push('/products')">
          {{ $t('common.products') }}
        </el-button>
      </div>
    </section>

    <section class="section">
      <div class="section-header">
        <h2 class="section-title">{{ $t('product.category') }}</h2>
      </div>
      <div class="category-grid">
        <div v-for="cat in categories" :key="cat.id" class="category-card" @click="goCategory(cat.id)">
          <div class="category-icon">
            <el-icon size="32"><Folder /></el-icon>
          </div>
          <span class="category-name">{{ cat.name }}</span>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="section-header">
        <h2 class="section-title">{{ $t('common.products') }}</h2>
        <el-button link @click="$router.push('/products')">{{ $t('common.search') }} →</el-button>
      </div>
      <div class="product-grid">
        <div v-for="p in products" :key="p.id" class="product-card" @click="$router.push(`/products/${p.id}`)">
          <div class="product-image">
            <el-image v-if="getFirstImage(p.images)" :src="getFirstImage(p.images)" fit="cover" lazy>
              <template #error>
                <div class="image-placeholder">
                  <el-icon size="48"><Goods /></el-icon>
                </div>
              </template>
            </el-image>
            <div v-else class="image-placeholder">
              <el-icon size="48"><Goods /></el-icon>
            </div>
          </div>
          <div class="product-info">
            <h3 class="product-name">{{ p.name }}</h3>
            <p class="product-price">¥{{ p.price }}</p>
            <div class="product-tags">
              <el-tag v-if="p.require_credit" size="small" type="warning">{{ $t('product.requireCredit') }}</el-tag>
              <el-tag v-if="p.credit_reward > 0" size="small" type="success">+{{ p.credit_reward }} {{ $t('product.creditReward') }}</el-tag>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section" v-if="lotteries.length">
      <div class="section-header">
        <h2 class="section-title">{{ $t('lottery.title') }}</h2>
        <el-button link @click="$router.push('/lotteries')">View All →</el-button>
      </div>
      <div class="lottery-grid">
        <div v-for="l in lotteries" :key="l.id" class="lottery-card" @click="$router.push(`/lotteries/${l.id}`)">
          <h3>{{ l.name }}</h3>
          <p>{{ l.description }}</p>
          <el-button type="primary" size="small">{{ $t('lottery.register') }}</el-button>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Folder, Goods } from '@element-plus/icons-vue'
import { categoryApi, productApi, lotteryApi } from '../../api'
import { getFirstImage } from '../../utils/image'

const router = useRouter()
const categories = ref<any[]>([])
const products = ref<any[]>([])
const lotteries = ref<any[]>([])

function goCategory(id: number) {
  router.push({ path: '/products', query: { category_id: String(id) } })
}

onMounted(async () => {
  try {
    const [catRes, prodRes, lotRes]: any[] = await Promise.all([
      categoryApi.list(),
      productApi.list({ page: 1, page_size: 8 }),
      lotteryApi.list(),
    ])
    categories.value = catRes.data || []
    products.value = prodRes.data || []
    lotteries.value = (lotRes.data || []).slice(0, 3)
  } catch {}
})
</script>

<style scoped lang="scss">
.hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #fff;
  padding: 80px 24px;
  text-align: center;

  h1 { font-size: 42px; font-weight: 700; margin-bottom: 16px; }
  p { font-size: 18px; opacity: 0.8; margin-bottom: 32px; }
}

.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-title {
  color: #fff;
  font-size: 24px;
  font-weight: 600;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.category-card {
  background: #2d2d44;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;

  &:hover { transform: translateY(-4px); border-color: rgba(78, 110, 242, 0.3); }
}

.category-icon { margin-bottom: 8px; color: #4e6ef2; }
.category-name { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.85); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.product-card {
  background: #2d2d44;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;

  &:hover { transform: translateY(-4px); border-color: rgba(78, 110, 242, 0.3); }
}

.product-image {
  height: 200px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  .el-image {
    width: 100%;
    height: 100%;
  }

  .image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.15);
  }
}

.product-info { padding: 16px; }
.product-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; color: rgba(255, 255, 255, 0.9); }
.product-price { font-size: 20px; font-weight: 700; color: #4e6ef2; margin-bottom: 8px; }
.product-tags { display: flex; gap: 8px; }

.lottery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.lottery-card {
  background: linear-gradient(135deg, #4e6ef2, #7c5cfc);
  color: #fff;
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s;

  h3 { margin-bottom: 8px; }
  p { opacity: 0.8; margin-bottom: 16px; font-size: 14px; }
}
</style>
