<script setup lang="ts">
import { ref, watch } from "vue";
import DesignStage from "../../../components/DesignStage.vue";
import type Player from "../../../commons/player.ts";
import { cssAssetUrl } from "@/commons/assets.ts";

const props = defineProps<{
  rankList: Player[];
}>();

const emit = defineEmits<{
  next: [];
}>();

const FINAL_RANK_LIMIT = 10;
const imageUrls = {
  bg: cssAssetUrl("game4/bg.svg"),
  logo: cssAssetUrl("game1/logo.png"),
  title: cssAssetUrl("game1/title3.png"),
  title2: cssAssetUrl("game1/title4.png"),
  podium: cssAssetUrl("game1/podium.png"),
  fireworks: cssAssetUrl("game1/fireworks.png"),
  avatar: cssAssetUrl("avatar.png"),
  guan1: cssAssetUrl("game1/guan1.png"),
  pai1: cssAssetUrl("game1/pai1.png"),
  guan2: cssAssetUrl("game1/guan2.png"),
  pai2: cssAssetUrl("game1/pai2.png"),
  guan3: cssAssetUrl("game1/guan3.png"),
  pai3: cssAssetUrl("game1/pai3.png"),
  rankIcon: cssAssetUrl("game1/no-icon.png"),
  avatarAnimation: cssAssetUrl("avatar_animation.png"),
  next: cssAssetUrl("game1/next-1.png"),
};

const emptyPlayer = (index: number): Player => ({
  active: false,
  wechat_id: `empty-${index}`,
  nickname: "虚位以待",
  avatar: "",
  score: 0,
});

const list = ref<Player[]>(
  Array.from({ length: FINAL_RANK_LIMIT }, (_, index) => emptyPlayer(index)),
);

const updateFinalRank = (rankList: Player[]) => {
  list.value = Array.from(
    { length: FINAL_RANK_LIMIT },
    (_, index) => rankList[index] ?? emptyPlayer(index),
  );
};

watch(
  () => props.rankList,
  (rankList) => updateFinalRank(rankList),
  { immediate: true, deep: true },
);
</script>

<template>
  <DesignStage>
    <div class="bg">
      <div class="img-logo"></div>
      <div class="img-title"></div>
      <div class="img-title2"></div>

      <div class="podium">
        <div class="rank-no1">
          <div class="gu-burst"></div>
          <div
            class="avatar"
            :style="{ backgroundImage: `url(${list[0]?.avatar || imageUrls.avatar})` }"
          ></div>
          <div class="nickname">{{ list[0]?.nickname }}</div>
          <div class="guan"></div>
          <div class="pai"></div>
        </div>
        <div class="rank-no2">
          <div class="gu-burst"></div>
          <div
            class="avatar"
            :style="{ backgroundImage: `url(${list[1]?.avatar || imageUrls.avatar})` }"
          ></div>
          <div class="nickname">{{ list[1]?.nickname }}</div>
          <div class="guan"></div>
          <div class="pai"></div>
        </div>
        <div class="rank-no3">
          <div class="gu-burst"></div>
          <div
            class="avatar"
            :style="{ backgroundImage: `url(${list[2]?.avatar || imageUrls.avatar})` }"
          ></div>
          <div class="nickname">{{ list[2]?.nickname }}</div>
          <div class="guan"></div>
          <div class="pai"></div>
        </div>
      </div>

      <div class="rank-container">
        <div
          v-for="(item, index) in list.slice(3)"
          :key="item.userid || item.wechat_id || `rank-${index}`"
        >
          <div class="no-icon">{{ index + 4 }}</div>
          <div>
            <div class="img-avatar-container">
              <div
                class="img-avatar"
                :style="{ backgroundImage: `url(${item.avatar || imageUrls.avatar})` }"
              ></div>
            </div>
            <div class="txt-nickname">{{ item.nickname }}</div>
          </div>
        </div>
      </div>

      <div class="btn-next" @click="emit('next')"></div>
    </div>
  </DesignStage>
</template>

<style scoped>
.bg {
  width: 1920px;
  height: 1080px;
  background: v-bind("imageUrls.bg") center / cover no-repeat;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.img-logo {
  background: v-bind("imageUrls.logo");
  background-size: cover;
  width: 428px;
  height: 77px;
  position: absolute;
  left: 37px;
  top: 82px;
}

.img-title {
  background: v-bind("imageUrls.title");
  width: 967px;
  height: 122px;
  margin: 0 auto;
  margin-top: 37px;
}

.img-title2 {
  background: v-bind("imageUrls.title2") no-repeat center;
  width: 457px;
  height: 57px;
  margin: 0 auto;
  margin-top: 37px;
}

.podium {
  background: v-bind("imageUrls.podium") no-repeat center;
  width: 1347px;
  height: 269px;
  position: absolute;
  top: 427px;
  left: 287px;

  .gu-burst {
    width: 200px;
    height: 200px;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    opacity: 1;
    transform: scale(0.6);
    transform-origin: center center;
    background: v-bind("imageUrls.fireworks") center / cover no-repeat;
    pointer-events: none;
    animation: gu-burst-expand 1.2s ease-out infinite;
  }

  .rank-no1 {
    position: relative;

    .gu-burst {
      left: 580px;
      top: -200px;
    }

    .avatar {
      background: v-bind("imageUrls.avatar") center / cover no-repeat;
      width: 120px;
      height: 120px;
      border-radius: 60px;
      position: absolute;
      left: 610px;
      top: -136px;
    }

    .nickname {
      width: 167px;
      height: 46px;
      background: #ffcf44;
      color: white;
      text-align: center;
      line-height: 46px;
      position: absolute;
      left: 590px;
      top: -25px;
      z-index: 1;
      border-radius: 23px;
    }

    .guan {
      background: v-bind("imageUrls.guan1");
      width: 64px;
      height: 64px;
      position: absolute;
      left: 580px;
      top: -153px;
    }

    .pai {
      background: v-bind("imageUrls.pai1");
      width: 212px;
      height: 200px;
      position: absolute;
      left: 570px;
      top: 40px;
    }
  }

  .rank-no2 {
    position: relative;

    .gu-burst {
      left: 140px;
      top: -170px;
    }

    .avatar {
      background: v-bind("imageUrls.avatar") center / cover no-repeat;
      width: 120px;
      height: 120px;
      border-radius: 60px;
      position: absolute;
      left: 180px;
      top: -110px;
    }

    .nickname {
      width: 167px;
      height: 46px;
      background: #ca9600;
      color: white;
      text-align: center;
      line-height: 46px;
      position: absolute;
      left: 157px;
      top: 2px;
      z-index: 1;
      border-radius: 23px;
    }

    .guan {
      background: v-bind("imageUrls.guan2") no-repeat center;
      width: 96px;
      height: 96px;
      position: absolute;
      left: 134px;
      top: -144px;
    }

    .pai {
      background: v-bind("imageUrls.pai2") no-repeat center;
      width: 212px;
      height: 200px;
      position: absolute;
      left: 140px;
      top: 50px;
    }
  }

  .rank-no3 {
    position: relative;

    .gu-burst {
      left: 1020px;
      top: -170px;
    }

    .avatar {
      background: v-bind("imageUrls.avatar") center / cover no-repeat;
      width: 120px;
      height: 120px;
      border-radius: 60px;
      position: absolute;
      left: 1046px;
      top: -110px;
    }

    .nickname {
      width: 167px;
      height: 46px;
      background: #e2e2e2;
      color: #afafaf;
      text-align: center;
      line-height: 46px;
      position: absolute;
      left: 1028px;
      top: 2px;
      z-index: 1;
      border-radius: 23px;
    }

    .guan {
      background: v-bind("imageUrls.guan3") no-repeat center;
      width: 96px;
      height: 96px;
      position: absolute;
      left: 1003px;
      top: -146px;
    }

    .pai {
      background: v-bind("imageUrls.pai3") no-repeat center;
      width: 212px;
      height: 200px;
      position: absolute;
      right: 130px;
      top: 50px;
    }
  }
}

.rank-container {
  display: flex;
  align-items: center;
  width: 1270px;
  height: 115px;
  position: absolute;
  bottom: 243px;
  left: 325px;

  > div {
    flex: 1;
    display: grid;
    width: 100px;
    height: 100%;

    .no-icon {
      background: v-bind("imageUrls.rankIcon") no-repeat center;
      width: 40px;
      height: 40px;
      position: absolute;
      text-align: center;
      line-height: 40px;
      color: white;
      font-weight: bold;
    }

    .img-avatar-container {
      position: relative;
      margin: 0 auto;
      margin-top: 10px;
      width: 72px;
      height: 72px;
      border-radius: 36px;
    }

    .img-avatar-container::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: v-bind("imageUrls.avatarAnimation");
      animation: avatar-rotate 10s linear infinite;
    }

    .img-avatar {
      position: relative;
      top: 6px;
      z-index: 1;
      margin: 0 auto;
      width: 60px;
      height: 60px;
      border-radius: 30px;
      background: v-bind("imageUrls.avatar");
    }

    .txt-nickname {
      color: white;
      font-size: 20px;
      text-align: center;
    }
  }
}

.btn-next {
  position: absolute;
  bottom: 100px;
  left: 820px;
  width: 316px;
  height: 105px;
  cursor: pointer;
  background: v-bind("imageUrls.next") center / cover no-repeat;
}
</style>
