<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import PlayerSeats from "@/components/PlayerSeats.vue";
import Guide from "@/components/Guide.vue";
import SButton from "@/components/SButton.vue";
import SModal from "@/components/SModal.vue";
import Avatar from "@/components/Avatar.vue";
import {
  getRoomAPI,
  destroyRoomAPI,
  exitRoomAPI,
  startRoomAPI,
  chooseTeamAPI,
} from "@/apis";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const room = ref({});
const roomNumber = ref("");
const owner = ref({});
const opponent = ref({});
const players = ref([]);
const blueTeam = ref([]);
const redTeam = ref([]);

const showModal = ref(false);
const battleType = ref(0);
const refreshRoomTimer = ref(null);

async function refreshRoomData() {
  if (!roomNumber.value) return;
  const result = await getRoomAPI(roomNumber.value);
  if (result.started) return;
  room.value = result;
  battleType.value = result.battleType;
  (result.members || []).some((m) => {
    if (m.userInfo.id === result.creator) {
      owner.value = {
        id: m.userInfo.id,
        name: m.userInfo.name,
        avatar: m.userInfo.avatar,
        rankLvl: m.userInfo.rankLvl,
      };
      return true;
    }
    return false;
  });
  if (result.battleType === 1 && result.count === 2) {
    result.members.forEach((m) => {
      if (m.userInfo.id !== owner.value.id) {
        opponent.value = {
          id: m.userInfo.id,
          name: m.userInfo.name,
          avatar: m.userInfo.avatar,
          rankLvl: m.userInfo.rankLvl,
        };
      }
    });
  } else if (result.battleType === 2) {
    players.value = [];
    const ownerIndex = result.members.findIndex(
      (m) => m.userInfo.id === result.creator
    );
    if (ownerIndex !== -1) {
      players.value.push(result.members[ownerIndex].userInfo);
    } else {
      players.value.push({});
    }
    result.members.forEach((m, index) => {
      if (ownerIndex !== index) players.value.push(m.userInfo);
    });
  } else {
    players.value = new Array(result.count).fill({});
    refreshMembers(result.members);
  }
}

const startGame = async () => {
  const result = await startRoomAPI(room.value.number);
};

const refreshMembers = (members) => {
  blueTeam.value = [];
  redTeam.value = [];
  members.forEach((m, index) => {
    players.value[index] = { ...m.userInfo, groupType: m.groupType };
    if (m.groupType === 1) {
      blueTeam.value.push({ ...m.userInfo, groupType: 1 });
    } else if (m.groupType === 0) {
      redTeam.value.push({ ...m.userInfo, groupType: 0 });
    }
  });
  for (let i = 0; i < room.value.count / 2; i++) {
    if (!blueTeam.value[i]) blueTeam.value[i] = {};
    if (!redTeam.value[i]) redTeam.value[i] = {};
  }
};

async function onReceiveMessage(messages = []) {
  messages.forEach((msg) => {
    if (msg.roomNumber === roomNumber.value) {
      if (msg.constructor === MESSAGETYPES.UserEnterRoom) {
        if (battleType.value === 1) {
          if (msg.userId === room.value.creator) {
            owner.value = {
              id: msg.userId,
              name: msg.name,
              avatar: msg.avatar,
              rankLvl: msg.rankLvl,
            };
          } else {
            opponent.value = {
              id: msg.userId,
              name: msg.name,
              avatar: msg.avatar,
              rankLvl: msg.rankLvl,
            };
          }
        }
        if (battleType.value === 2) {
          if (room.value.creator === msg.userId) {
            players.value[0] = {
              id: msg.userId,
              name: msg.name,
              avatar: msg.avatar,
              rankLvl: msg.rankLvl,
            };
          } else {
            players.value.push({
              id: msg.userId,
              name: msg.name,
              avatar: msg.avatar,
              rankLvl: msg.rankLvl,
            });
          }
        }
      }
      if (msg.constructor === MESSAGETYPES.UserExitRoom) {
        if (battleType.value === 1) {
          if (msg.userId === room.value.creator) {
            owner.value = {
              id: "",
            };
          } else {
            opponent.value = {
              id: "",
            };
          }
        }
        if (battleType.value === 2) {
          players.value = players.value.filter((p) => p.id !== msg.userId);
        }
        if (msg.room && msg.room.members) {
          refreshMembers(msg.room.members);
        }
      }
      if (msg.constructor === MESSAGETYPES.TeamUpdate) {
        if (msg.room && msg.room.members) {
          refreshMembers(msg.room.members);
        }
      }
      if (msg.constructor === MESSAGETYPES.RoomDestroy) {
        uni.showToast({
          title: "房间已解散",
          icon: "none",
        });
        roomNumber.value = "";
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      }
    }
    if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
      roomNumber.value = "";
      if (msg.groupUserStatus) {
        uni.setStorageSync("red-team", msg.groupUserStatus.redTeam);
        uni.setStorageSync("blue-team", msg.groupUserStatus.blueTeam);
        uni.setStorageSync("melee-players", [
          ...msg.groupUserStatus.redTeam,
          ...msg.groupUserStatus.blueTeam,
        ]);
        uni.removeStorageSync("current-battle");
        if (msg.groupUserStatus.config.mode == 1) {
          uni.redirectTo({
            url: `/pages/team-battle?battleId=${msg.id}&gameMode=1`,
          });
        } else if (msg.groupUserStatus.config.mode == 2) {
          uni.redirectTo({
            url: `/pages/melee-match?battleId=${msg.id}&gameMode=1`,
          });
        }
      }
    }
  });
}

const chooseTeam = async (team) => {
  if (team !== 2) {
    const notInTeam = room.value.members.some(
      (m) => m.userInfo.id === user.value.id && m.groupType === 2
    );
    if (!notInTeam) return;
  }
  const result = await chooseTeamAPI(roomNumber.value, team);
  refreshMembers(result.members);
};

const destroyRoom = async () => {
  if (roomNumber.value) await destroyRoomAPI(roomNumber.value);
};

const exitRoom = async () => {
  uni.navigateBack();
};

const setClipboardData = () => {
  uni.setClipboardData({
    data: roomNumber.value,
    success() {
      uni.showToast({ title: "复制成功" });
    },
  });
};

const onBack = () => {
  showModal.value = true;
};

onLoad(async (options) => {
  if (options.roomNumber) {
    roomNumber.value = options.roomNumber;
    refreshRoomData();
    refreshRoomTimer.value = setInterval(refreshRoomData, 2000);
  }
});

onMounted(() => {
  uni.setKeepScreenOn({
    keepScreenOn: true,
  });
  uni.$on("socket-inbox", onReceiveMessage);
});

onBeforeUnmount(() => {
  if (refreshRoomTimer.value) clearInterval(refreshRoomTimer.value);
  uni.setKeepScreenOn({
    keepScreenOn: false,
  });
  uni.$off("socket-inbox", onReceiveMessage);
  if (roomNumber.value && owner.value.id !== user.value.id) {
    exitRoomAPI(roomNumber.value);
  }
});

onShow(async () => {
  refreshRoomData();
});
onHide(() => {});
</script>

<template>
  <Container :title="`好友约战 - ${roomNumber}`" :onBack="onBack">
    <view class="standby-phase">
      <Guide>
        <view class="battle-guide">
          <view class="guide-tips">
            <text>弓箭手们，人都到齐了吗?</text>
            <text v-if="battleType === 1">{{
              `${room.count / 2}v${room.count / 2}比赛即将开始!`
            }}</text>
            <text v-if="battleType === 2">大乱斗即将开始! </text>
          </view>
          <view @click="setClipboardData">复制房间号</view>
        </view>
      </Guide>
      <view v-if="battleType === 1 && room.count === 2" class="team-mode">
        <image
          src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbua9nuf5fyeph7cxi.png"
          mode="widthFix"
        />
        <view>
          <view
            v-if="owner.id"
            class="player"
            :style="{ transform: 'translateY(-60px)' }"
          >
            <Avatar :rankLvl="owner.rankLvl" :src="owner.avatar" :size="60" />
            <text>{{ owner.name }}</text>
            <text>创建者</text>
          </view>
          <view
            v-else
            class="no-player"
            :style="{ transform: 'translateY(-60px)' }"
          >
            <image src="../static/question-mark.png" mode="widthFix" />
          </view>
          <image src="../static/versus.png" mode="widthFix" />
          <view
            v-if="opponent.id"
            class="player"
            :style="{ transform: 'translateY(60px)' }"
          >
            <Avatar
              :rankLvl="opponent.rankLvl"
              :src="opponent.avatar"
              :size="60"
            />
            <text v-if="opponent.name">{{ opponent.name }}</text>
          </view>
          <view class="no-player" v-else>
            <image src="../static/question-mark.png" mode="widthFix" />
          </view>
        </view>
      </view>
      <PlayerSeats
        v-if="battleType === 2"
        :total="room.count || 10"
        :players="players"
      />
      <block v-if="battleType === 1 && room.count >= 4">
        <view class="all-players">
          <image
            src="https://static.shelingxingqiu.com/attachment/2025-08-13/dc0x1p59iab6cvbhqc.png"
            mode="widthFix"
          />
          <image
            v-if="room.count === 4"
            src="../static/title-2v2.png"
            mode="widthFix"
          />
          <image
            v-if="room.count === 6"
            src="../static/title-3v3.png"
            mode="widthFix"
          />
          <view>
            <view v-for="(item, index) in players" :key="index">
              <Avatar v-if="item.id" :src="item.avatar" :size="36" />
              <text v-if="owner.id === item.id">创建者</text>
            </view>
          </view>
        </view>
        <view class="choose-side">
          <view>
            <view
              v-for="(item, index) in blueTeam"
              :key="index"
              class="choose-side-left-item"
            >
              <button
                hover-class="none"
                v-if="item.id === user.id"
                @click="chooseTeam(2)"
              >
                <image src="../static/close-grey.png" mode="widthFix" />
              </button>
              <text class="truncate">{{ item.name || "我要加入" }}</text>
              <Avatar v-if="item.id" :src="item.avatar" :size="36" />
              <button v-else hover-class="none" @click="chooseTeam(1)">
                <image src="../static/add-grey.png" mode="widthFix" />
              </button>
            </view>
          </view>
          <view>
            <view
              v-for="(item, index) in redTeam"
              :key="index"
              class="choose-side-right-item"
            >
              <Avatar v-if="item.id" :src="item.avatar" :size="36" />
              <button v-else hover-class="none" @click="chooseTeam(0)">
                <image src="../static/add-grey.png" mode="widthFix" />
              </button>
              <text class="truncate">{{ item.name || "我要加入" }}</text>
              <button
                hover-class="none"
                v-if="item.id === user.id"
                @click="chooseTeam(2)"
              >
                <image src="../static/close-grey.png" mode="widthFix" />
              </button>
            </view>
          </view>
        </view>
      </block>
      <view>
        <SButton
          v-if="user.id === owner.id && battleType === 1 && room.count === 2"
          :disabled="!opponent.id"
          :onClick="startGame"
          >进入对战</SButton
        >
        <SButton
          v-if="user.id === owner.id && battleType === 2"
          :disabled="players.length < 3"
          :onClick="startGame"
          >进入大乱斗</SButton
        >
        <SButton
          v-if="user.id === owner.id && battleType === 1 && room.count >= 4"
          :disabled="
            players.some((p) => p.groupType === undefined || p.groupType === 2)
          "
          :onClick="startGame"
          >开启对局</SButton
        >
        <SButton v-if="user.id !== owner.id" disabled>等待房主开启对战</SButton>
        <text class="tips">创建者点击下一步，所有人即可进入游戏。</text>
      </view>
    </view>
    <SModal
      :show="showModal"
      :onClose="() => (showModal = false)"
      height="520rpx"
    >
      <view class="btns">
        <SButton :onClick="exitRoom" width="200px" :rounded="20">
          暂时离开
        </SButton>
        <block v-if="owner.id === user.id">
          <view :style="{ height: '20px' }"></view>
          <SButton :onClick="destroyRoom" width="200px" :rounded="20">
            解散房间
          </SButton>
        </block>
      </view>
    </SModal>
  </Container>
</template>

<style scoped>
.standby-phase {
  width: 100%;
  height: calc(100% - 40px);
  overflow-x: hidden;
}
.tips {
  color: #fff9;
  width: 100%;
  text-align: center;
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
.player-unknow {
  width: 40px;
  height: 40px;
  margin: 0 10px;
  border: 1px solid #fff3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #69686866;
}
.player-unknow > image {
  width: 40%;
}
.team-mode {
  width: calc(100vw - 30px);
  height: 125vw;
  margin: 15px;
}
.team-mode > image:first-child {
  position: absolute;
  width: calc(100vw - 30px);
  z-index: -1;
}
.team-mode > view {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 95%;
}
.player {
  width: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(-60px);
  color: #fff;
  font-size: 14px;
}
.player > image {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #ccc;
  margin-bottom: 5px;
}
.player > text {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.player > text:nth-child(3) {
  color: #000;
  background-color: #fed847;
  font-size: 8px;
  border-radius: 10px;
  padding: 2rpx 10rpx;
}
.team-mode > view > image:nth-child(2) {
  width: 120px;
}
.no-player {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(60px);
}
.no-player > image {
  width: 20px;
  margin-right: 2px;
}
.btns {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.battle-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.battle-guide > view:last-child {
  color: #fed847;
  border: 1px solid #fed847;
  margin-right: 10px;
  padding: 5px 12px;
  border-radius: 20px;
  position: relative;
  font-size: 28rpx;
}
.all-players {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 83vw;
}
.all-players > image:first-child {
  position: absolute;
  width: 100%;
}
.all-players > image:nth-child(2) {
  width: 25vw;
  position: relative;
}
.all-players > view {
  position: relative;
  width: 42vw;
  height: 42vw;
  margin-top: 7vw;
}
.all-players > view > view {
  position: absolute;
  left: 50%;
  top: 50%;
}
/* 4个头像 - 正方形排列 */
.all-players > view > view:nth-child(1):nth-last-child(4) {
  transform: translate(-50%, -50%) rotate(-30deg) translateY(-21.5vw)
    rotate(30deg);
}
.all-players > view > view:nth-child(2):nth-last-child(3) {
  transform: translate(-50%, -50%) rotate(-120deg) translateY(-21.5vw)
    rotate(120deg);
}
.all-players > view > view:nth-child(3):nth-last-child(2) {
  transform: translate(-50%, -50%) rotate(-210deg) translateY(-21.5vw)
    rotate(210deg);
}
.all-players > view > view:nth-child(4):nth-last-child(1) {
  transform: translate(-50%, -50%) rotate(-300deg) translateY(-21.5vw)
    rotate(300deg);
}
/* 6个头像 - 六边形排列 */
.all-players > view > view:nth-child(1):nth-last-child(6) {
  transform: translate(-50%, -50%) rotate(-30deg) translateY(-21vw)
    rotate(30deg);
}
.all-players > view > view:nth-child(2):nth-last-child(5) {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-21vw)
    rotate(90deg);
}
.all-players > view > view:nth-child(3):nth-last-child(4) {
  transform: translate(-50%, -50%) rotate(-150deg) translateY(-21vw)
    rotate(150deg);
}
.all-players > view > view:nth-child(4):nth-last-child(3) {
  transform: translate(-50%, -50%) rotate(-210deg) translateY(-21vw)
    rotate(210deg);
}
.all-players > view > view:nth-child(5):nth-last-child(2) {
  transform: translate(-50%, -50%) rotate(-270deg) translateY(-21vw)
    rotate(270deg);
}
.all-players > view > view:nth-child(6):nth-last-child(1) {
  transform: translate(-50%, -50%) rotate(-330deg) translateY(-21vw)
    rotate(330deg);
}
.all-players > view > view > text {
  position: absolute;
  background-color: #fed847;
  font-size: 8px;
  border-radius: 10px;
  padding: 1px 0px;
  bottom: -20%;
  left: calc(50% - 15px);
  width: 30px;
  text-align: center;
}
.choose-side {
  display: flex;
}
.choose-side > view {
  width: 50%;
}
.choose-side > view:first-child > view {
  background: linear-gradient(270deg, #6a1212 0%, rgba(74, 0, 0, 0) 100%);
}
.choose-side > view:last-child > view {
  background: linear-gradient(270deg, rgba(13, 0, 74, 0) 0%, #172a86 100%);
}
.choose-side-left-item,
.choose-side-right-item {
  display: flex;
  align-items: center;
  color: #fff;
  border-radius: 12px;
  padding: 10px;
  align-items: center;
  margin: 10px 5px;
  position: relative;
}
.choose-side-left-item {
  justify-content: flex-end;
}
.choose-side-left-item > text,
.choose-side-right-item > text {
  margin: 10px;
  max-width: 100px;
  font-size: 14px;
}
.choose-side-left-item > button:first-child,
.choose-side-right-item > button:last-child {
  position: absolute;
  top: 0;
}
.choose-side-left-item > button:first-child > image,
.choose-side-right-item > button:last-child > image {
  width: 28px;
}
.choose-side-left-item > button:first-child {
  left: 0;
}

.choose-side-right-item > button:last-child {
  right: 0;
}
.choose-side-left-item > button:last-child,
.choose-side-right-item > button:first-child {
  background-color: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.choose-side-left-item > button:last-child > image,
.choose-side-right-item > button:first-child > image {
  width: 18px;
}
</style>
