<script lang="ts" setup>
import MainLayout from "@/layouts/MainLayout.vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/UserStore";
import { onMounted, ref } from "vue";
import { getProductList } from "@/apis/product";
import type { ProductListItem } from "@/types/product";
import { ElMessage } from "element-plus";

const router = useRouter();
const userStore = useUserStore();

// 热门商品列表
const hotProducts = ref<ProductListItem[]>([]);

// 获取热门商品
const fetchHotProducts = async () => {
  try {
    const response = await getProductList({
      page: 1,
      size: 4,
      status: 1, // 只获取上架商品
    });

    if (response.code === 200) {
      hotProducts.value = response.data.list;
    } else {
      ElMessage.error(response.message || "获取商品列表失败");
    }
  } catch (error) {
    ElMessage.error("获取商品列表失败");
    console.error("获取商品列表失败:", error);
  }
};

// 跳转到商品详情页
const goToProductDetail = (id: number) => {
  router.push(`/product/detail/${id}`);
};

// 跳转到商品列表页
const goToProductList = () => {
  router.push("/product/product");
};

onMounted(() => {
  fetchHotProducts();
});
</script>

<template>
  <MainLayout>
    <!-- 英雄区 -->
    <section
      class="relative bg-gradient-to-r from-blue-600 to-indigo-700 text-white"
    >
      <div class="container mx-auto px-4 py-20 md:py-32">
        <div class="max-w-3xl mx-auto text-center">
          <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
            发现好物，轻松购物
          </h1>
          <p class="text-xl md:text-2xl text-blue-100 mb-8">
            一站式购物平台，品质保障，售后无忧
          </p>
          <div
            v-if="!userStore.userInfo"
            class="flex flex-col sm:flex-row justify-center gap-4"
          >
            <button
              @click="$router.push('/user/login')"
              class="px-8 py-3 bg-white text-blue-700 font-semibold rounded-lg hover:bg-blue-50 transition-colors shadow-lg"
            >
              立即登录
            </button>
            <button
              @click="$router.push('/user/register')"
              class="px-8 py-3 bg-transparent border-2 border-white text-white font-semibold rounded-lg hover:bg-white/10 transition-colors shadow-lg"
            >
              免费注册
            </button>
          </div>
          <div v-else class="flex flex-col sm:flex-row justify-center gap-4">
            <button
              @click="$router.push('/product/product')"
              class="px-8 py-3 bg-white text-blue-700 font-semibold rounded-lg hover:bg-blue-50 transition-colors shadow-lg"
            >
              开始购物
            </button>
          </div>
        </div>
      </div>
      <!-- 装饰元素 -->
      <div
        class="absolute bottom-0 left-0 w-full h-16 bg-gradient-to-t from-slate-50 to-transparent"
      ></div>
    </section>

    <!-- 特色板块 -->
    <section class="py-16 bg-slate-50 dark:bg-gray-800">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold text-gray-800 dark:text-white">
            为什么选择我们
          </h2>
          <p class="mt-4 text-gray-600 dark:text-gray-300">
            用心服务，让购物更简单
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- 特色1 -->
          <div
            class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow"
          >
            <div
              class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-6 mx-auto"
            >
              <i
                class="fa-solid fa-shield-halved text-2xl text-blue-600 dark:text-blue-400"
              ></i>
            </div>
            <h3
              class="text-xl font-semibold text-center mb-3 text-gray-800 dark:text-white"
            >
              品质保障
            </h3>
            <p class="text-gray-600 dark:text-gray-300 text-center">
              所有商品均经过严格筛选，正品保障，假一赔十
            </p>
          </div>

          <!-- 特色2 -->
          <div
            class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow"
          >
            <div
              class="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mb-6 mx-auto"
            >
              <i
                class="fa-solid fa-truck-fast text-2xl text-green-600 dark:text-green-400"
              ></i>
            </div>
            <h3
              class="text-xl font-semibold text-center mb-3 text-gray-800 dark:text-white"
            >
              快速配送
            </h3>
            <p class="text-gray-600 dark:text-gray-300 text-center">
              多仓发货，极速配送，准时送达
            </p>
          </div>

          <!-- 特色3 -->
          <div
            class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow"
          >
            <div
              class="w-16 h-16 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mb-6 mx-auto"
            >
              <i
                class="fa-solid fa-headset text-2xl text-purple-600 dark:text-purple-400"
              ></i>
            </div>
            <h3
              class="text-xl font-semibold text-center mb-3 text-gray-800 dark:text-white"
            >
              贴心服务
            </h3>
            <p class="text-gray-600 dark:text-gray-300 text-center">
              专业客服团队，7×24小时在线服务
            </p>
          </div>
        </div>

        <!-- 热门商品 -->
        <div class="mt-16">
          <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-800 dark:text-white">
              热门商品
            </h2>
            <p class="mt-4 text-gray-600 dark:text-gray-300">
              为您精选最受欢迎的商品
            </p>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <div
              v-for="product in hotProducts"
              :key="product.id"
              class="bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer"
              @click="goToProductDetail(product.id)"
            >
              <div class="aspect-square overflow-hidden">
                <img
                  :src="product.mainImage || '/placeholder.jpg'"
                  :alt="product.name"
                  class="w-full h-full object-cover"
                />
              </div>
              <div class="p-4">
                <h3
                  class="font-medium text-gray-800 dark:text-white line-clamp-2 h-12"
                  :title="product.name"
                >
                  {{ product.name }}
                </h3>
                <div class="mt-2 flex items-center justify-between">
                  <span class="text-red-600 dark:text-red-400 font-bold"
                    >¥{{ product.price }}</span
                  >
                  <span class="text-sm text-gray-500 dark:text-gray-400"
                    >销量: {{ product.sales }}</span
                  >
                </div>
              </div>
            </div>
          </div>

          <!-- 查看更多按钮 -->
          <div class="text-center mt-10">
            <button
              @click="goToProductList"
              class="px-8 py-3 border border-blue-600 text-blue-600 dark:text-blue-400 dark:border-blue-400 rounded-lg hover:bg-blue-50 dark:hover:bg-gray-600 transition-colors"
            >
              查看更多商品
            </button>
          </div>
        </div>
      </div>
    </section>
  </MainLayout>
</template>

<style scoped>
/* 自定义样式补充 */
section {
  scroll-margin-top: 70px; /* 适配固定导航栏的锚点定位 */
}

/* 响应式调整 */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 3rem !important;
  }
}
</style>
