<script lang='ts' setup>
import type { Treaty } from "@elysiajs/eden";
import type { InfiniteScrollCustomEvent } from "@ionic/vue";
import type { Action } from "./";
import type { TreatyQuery } from "@/api/types";
import { chevronForwardOutline, eyeOutline, timeOutline } from "ionicons/icons";
import { client, safeClient } from "@/api";
import { actions } from "./";

type NewsItem = Treaty.Data<typeof client.api.news.get>["data"][number];
type NewsQuery = TreatyQuery<typeof client.api.news.get>;

const router = useRouter();
const [query] = useResetRef<NewsQuery>({
  offset: 0,
  limit: 10,
});
const data = ref<NewsItem[]>([]);
const isFinished = ref(false);

async function fetchNews() {
  const { data: responseData } = await safeClient(client.api.news.get({ query: { ...query.value } }));
  data.value.push(...(responseData.value?.data || []));
  isFinished.value = responseData.value?.pagination.hasNextPage === false;
}
async function handleInfinite(event: InfiniteScrollCustomEvent) {
  if (isFinished.value) {
    event.target.complete();
    event.target.disabled = true;
    return;
  }
  query.value.offset! += query.value.limit!;
  await fetchNews();
  setTimeout(() => {
    event.target.complete();
  }, 500);
}
function handleQuickAction(action: Action) {
  switch (action.id) {
    case "check_in":
      router.push("/check_in");
      break;
    case "team":
      console.log("团队中心");
      break;
    case "invite":
      router.push("/invite");
      break;
    case "support":
      window.open("https://chat.riwsan.com", "_blank");
      break;
  }
}

function handleNewsClick(news: NewsItem) {
  console.log("查看新闻:", news.title);
}
</script>

<template>
  <ion-page>
    <ion-content :fullscreen="true" class="home-page">
      <img src="@/assets/images/home-banner.jpg" class="h-60 w-full object-cover" alt="首页横幅">

      <div class="ion-padding-horizontal">
        <section class="my-5 grid grid-cols-4 gap-4">
          <div
            v-for="action in actions"
            :key="action.id"
            class="flex flex-col items-center gap-2 cursor-pointer transition-transform active:scale-95"
            @click="handleQuickAction(action)"
          >
            <div
              class="w-12 h-12 rounded-xl flex-center shadow-lg"
              :style="{ background: action.color }"
            >
              <ion-icon :icon="action.icon" class="text-xl text-white" />
            </div>
            <span class="text-xs text-[#333] font-medium text-center">{{ action.name }}</span>
          </div>
        </section>

        <!-- 新闻列表区域 -->
        <section class="mt-10 mb-5">
          <div class="flex justify-between items-center mb-4">
            <div class="flex items-center gap-2">
              <img src="@/assets/images/icon.png" class="size-7">
              <div class="text-xl font-bold text-[#1a1a1a]">
                新闻动态
              </div>
            </div>
            <ion-button fill="clear" size="small" class="text-sm h-8" @click="router.push('/layout/service')">
              更多
              <ion-icon slot="end" :icon="chevronForwardOutline" />
            </ion-button>
          </div>
          <empty v-if="data.length === 0" class="my-10" />
          <div v-else class="flex flex-col gap-4">
            <div
              v-for="item in data"
              :key="item.id"
              class="bg-white rounded-2xl overflow-hidden shadow-sm cursor-pointer transition-all active:translate-y-0.5 active:shadow-sm flex"
              @click="handleNewsClick(item)"
            >
              <div class="relative w-28 h-28 shrink-0 overflow-hidden">
                <img v-if="item.thumbnailId" :src="item.thumbnail" :alt="item.title" class="w-full h-full object-cover">
                <div class="news-badge absolute top-2 left-2 bg-linear-to-br from-[#c41e3a] to-[#8b1a2e] text-white px-2 py-0.5 rounded-lg text-xs font-semibold shadow-lg">
                  热点
                </div>
              </div>
              <div class="flex-1 p-4 flex flex-col justify-between">
                <div>
                  <div class="text-base font-bold text-[#1a1a1a] mb-1 leading-snug line-clamp-2">
                    {{ item.title }}
                  </div>
                  <p class="text-sm text-[#666] leading-relaxed line-clamp-2">
                    {{ item.summary }}
                  </p>
                </div>
                <div class="flex items-center gap-4 text-xs text-[#999] mt-2">
                  <span class="flex items-center gap-1">
                    <ion-icon :icon="timeOutline" class="text-sm" />
                    {{ item.createdAt }}
                  </span>
                  <span class="flex items-center gap-1">
                    <ion-icon :icon="eyeOutline" class="text-sm" />
                    {{ item.viewCount }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>

      <ion-infinite-scroll threshold="100px" disabled @ion-infinite="handleInfinite">
        <ion-infinite-scroll-content loading-spinner="bubbles" loading-text="加载更多..." />
      </ion-infinite-scroll>
    </ion-content>
  </ion-page>
</template>

<style lang='css' scoped>
/* 中国风图案 */
.chinese-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.pattern-svg {
  position: absolute;
  animation: rotate-pattern 30s linear infinite;
}

.pattern-1 {
  width: 150px;
  height: 150px;
  top: 20px;
  right: 30px;
}

.pattern-2 {
  width: 120px;
  height: 120px;
  top: 100px;
  left: 40px;
  animation-direction: reverse;
  animation-duration: 40s;
}

@keyframes rotate-pattern {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 五角星装饰 */
.stars-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
}

.star {
  position: absolute;
  color: rgba(255, 215, 0, 0.3);
  font-size: 24px;
  animation: twinkle 3s ease-in-out infinite;
}

.star-1 {
  top: 40px;
  left: 25%;
  animation-delay: 0s;
}

.star-2 {
  top: 80px;
  right: 30%;
  font-size: 18px;
  animation-delay: 1s;
}

.star-3 {
  top: 130px;
  left: 15%;
  font-size: 20px;
  animation-delay: 2s;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

/* 底部波浪 */
.wave-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  opacity: 0.6;
}

/* 新闻标签渐变 - 使用 @apply 不支持渐变，需要保留 */
.news-badge {
  box-shadow: 0 2px 8px rgba(196, 30, 58, 0.3);
}

/* 走马灯动画 */
.announcement-carousel {
  transition: height 0.3s ease;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}

.slide-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-enter-to,
.slide-leave-from {
  transform: translateX(0);
  opacity: 1;
}
</style>
