<template>
  <view class="bottom-drawer-container" v-if="modelValue">
    <view class="drawer-overlay" @tap="close"></view>
    <view class="bottom-drawer" :class="{ 'drawer-open': modelValue }" @click.stop>
      <view class="audience-header">
        <view class="tab-container">
          <view class="tab-item">
            <text class="active-text">发起连线</text>
            <view class="end-right" @tap.stop="handleExitCoHost" v-if="connected?.length > 0">
              <image class="end-connect" src="/static/images/logout.png"></image>
              <text style="color: #E6594C; padding-left: 10rpx;">断开</text>
            </view>
          </view>
        </view>
      </view>

      <view v-if="filteredConnected?.length > 0"
        style="display: flex; width: 800rpx; padding-left: 80rpx; margin-bottom: 40rpx;">
        <text class="title-text">连线中</text>
        <view v-for="connect in filteredConnected" :key="connect.userID" class="audience-item">
          <view class="audience-info">
            <view class="audience-avatar-container">
              <image class="audience-avatar" mode="aspectFill" :src="connect.avatarURL || defaultAvatarURL" />
            </view>
            <view class="audience-item-right">
              <view class="audience-detail">
                <text class="audience-name" :numberOfLines="1">{{ connect.userName || connect.userID}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="liveList?.length > 0" class="audience-grid">

      </view>
      <view
        style="display: flex; width: 800rpx; flex-direction: row; padding-left: 80rpx; padding-right: 80rpx;margin-bottom: 40rpx; justify-content:space-between; "
        @click.stop>
        <text class="title-text">推荐列表</text>
        <text class="title-text" @click="handleRefresh">刷新</text>
      </view>

      <list class="audience-content" @loadmore="loadMore" :show-scrollbar="false">

        <cell v-for="host in currentInviteHosts" :key="host?.liveOwner?.userID">
          <view class="audience-info">
            <view class="audience-avatar-container">
              <image class="audience-avatar" mode="aspectFill" :src="host?.liveOwner?.avatarURL || defaultAvatarURL" />
            </view>
            <view class="audience-item-right">
              <view class="audience-detail">
                <text class="audience-name"
                  :numberOfLines="1">{{ host?.liveOwner?.userName || host?.liveOwner?.userID}}</text>
              </view>
              <view :class=" isHostInviting(host) ? 'start-link-waiting' : 'start-link' " @tap="onStartLinkTap(host)">
                <text class="start-link-text">{{ isHostInviting(host) ? '邀请中' : '邀请连线' }}</text>
              </view>
            </view>
          </view>
          <view class="audience-item-bottom-line"></view>
        </cell>


      </list>
    </view>
  </view>
</template>

<script setup lang="ts">
  import {
    ref,
    reactive,
    onMounted,
    computed,
    watch,
    nextTick
  } from 'vue'
  import {
    useCoHostState
  } from "@/uni_modules/tuikit-atomic-x/state/CoHostState"
  import {
    useLiveListState
  } from "@/uni_modules/tuikit-atomic-x/state/LiveListState";
  import {
    useLoginState
  } from "@/uni_modules/tuikit-atomic-x/state/LoginState";
  import { useCoGuestState } from "@/uni_modules/tuikit-atomic-x/state/CoGuestState";
  const { applicants, rejectApplication } = useCoGuestState(uni?.$liveID);
  const defaultAvatarURL = 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_01.png';
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false
    }
  })
  const emit = defineEmits(['update:modelValue'])
  const refreshing = ref('hide')
  const isLoading = ref(false)
  const scrollTop = ref(0)
  const activeTab = ref('pk')
  const showDrawer = ref(false)
  const selectedAudience = ref(null)
  const screenWidth = ref(350)
  const {
    candidates,
    connected,
    requestHostConnection,
    invitees,
    exitHostConnection,
  } = useCoHostState(uni?.$liveID)
  const {
    // 响应式状态
    liveListCursor,
    currentLive,
    // 操作方法 - callback在params中
    fetchLiveList,
    liveList
  } = useLiveListState();
  const {
    loginUserInfo
  } = useLoginState()
  const currentCursor = ref('')
  const currentUserID = ref(loginUserInfo.value?.userID);
  const filteredConnected = computed(() => {
    const list = connected?.value || [];
    const selfId = uni?.$userID ?? currentUserID.value;
    return list.filter(item => item?.userID !== selfId);
  })
  function filterInviteHosts(list) {
    const hosts = Array.isArray(list) ? list : [];
    const connectedLiveIds = new Set((connected?.value || []).map(item => item?.liveID));
    return hosts.filter(item =>
      item?.liveOwner?.userID !== currentLive?.value?.liveOwner?.userID &&
      !connectedLiveIds.has(item?.liveID)
    );
  }

  const currentInviteHosts = ref(filterInviteHosts(liveList?.value))
  const isRefreshEnd = ref(false)

  watch(() => loginUserInfo.value?.userID, (newUserId, oldUserId) => {
    console.log('用户ID变化:', {
      newUserId
    });
    if (newUserId) {
      // 如果当前标题是默认值或者为空，则更新为新的用户名
      currentUserID.value = newUserId;
    }
  }, {
    immediate: true,
    deep: true
  });

  watch(liveList, (newHostsList, olderHostList) => {
    if (newHostsList) {
      currentInviteHosts.value = filterInviteHosts(newHostsList)
    }
    nextTick()
  }, {
    immediate: true,
    deep: true
  },
  )

  watch(currentLive, () => {
    currentInviteHosts.value = filterInviteHosts(liveList?.value)
  }, {
    immediate: true,
    deep: true
  })

  watch(applicants, (newVal, oldVal) => {
    if (newVal && invitees?.value.length > 0) {
      newVal.forEach(applicant => {
        rejectApplication({
          liveID: uni?.$liveID,
          userID: applicant.userID,
        });
      });
    }
  }, {
    immediate: true,
    deep: true
  },)

  watch(liveListCursor, (newCursor, oldCursor) => {
    isRefreshEnd.value = newCursor === ''
  })

  // 监听连线状态变化，重新过滤推荐列表
  watch(connected, (newConnected, oldConnected) => {
    currentInviteHosts.value = filterInviteHosts(liveList?.value);
  }, {
    immediate: true,
    deep: true
  })

  const handleRefresh = () => {
    const params = {
      cursor: '', // 首次拉起传空（不能是null),然后根据回调数据的cursor确认是否拉完
      count: 20,   // 分页拉取的个数
      success: () => {
        fetchLiveListRecursively(liveListCursor.value); // 最多尝试3次
      }
    };
    fetchLiveList(params);
  }

  const fetchLiveListRecursively = (cursor) => {
    const params = {
      cursor: cursor,
      count: 20,
      success: () => {
        if (liveListCursor.value) {
          fetchLiveListRecursively(liveListCursor.value);
        } else {
          uni.showToast({
            title: '刷新完成'
          });
        }
      },
      fail: (err) => {
        console.error(`fetchLiveListRecursively failed, err: ${JSON.stringify(err)}`);
      }
    };
    fetchLiveList(params);
  }

  const loadMore = () => {
    if (!liveListCursor.value) {
      uni.showToast({
        title: "没有更多了",
        icon: "none"
      });
      return;
    }
    const params = {
      cursor: liveListCursor.value,
      count: 20,
    };
    fetchLiveList(params);
  };



  // 判断当前 host 是否处于邀请中（依据 invitees 列表里的 liveID）
  function isHostInviting(host) {
    const inviteesList = invitees?.value;
    const targetLiveID = host?.liveID;
    if (!targetLiveID) return false;
    return inviteesList.some((item) => item?.liveID === targetLiveID);
  }

  // 点击邀请，若已在邀请中则不重复发起
  function onStartLinkTap(host) {
    if (isHostInviting(host)) {
      return;
    }
    startLink(host);
  }

  function close() {
    emit('update:modelValue', false)
  }

  function startLink(host) {
    if (applicants.value.length > 0) {
      uni.showToast({
        title: '有人申请连麦，无法发起连线',
        icon: 'none'
      })
      return
    }
    requestHostConnection({
      liveID: uni?.$liveID,
      targetHostLiveID: host.liveID,
      layoutTemplate: 'HOST_DYNAMIC_GRID',
      timeout: 30,
      extensionInfo: "",
      success: (res) => {
        console.log(res)
      },
      fail: (errorCode) => {
        console.log(errorCode)
        if (errorCode === 5) {
          uni.showToast({
            icon: 'none',
            title: '主播连线中，无法发起连线'
          })
        } else {
          uni.showToast({
            icon: 'none',
            title: '连线失败'
          })
        }

      }
    },)
  }


  const handleExitCoHost = () => {
    uni.showModal({
      content: '确定要退出连线吗？',
      confirmText: '退出连线',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          exitHostConnection({
            liveID: uni?.$liveID,
            success: () => {
              close()
            },
            fail: (error) => {
              console.log(error)
            }
          })
        }
      }
    })

  }
</script>

<style>
  .refresh-icon-container {
    margin-left: 16rpx;
    width: 40rpx;
    height: 40rpx;
    justify-content: center;
    align-items: center;
    border-radius: 8rpx;
    background-color: #ffffff;
  }

  .refresh-icon {
    width: 32rpx;
    height: 32rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .refresh-image {
    width: 32rpx;
    height: 32rpx;
  }

  .refresh-icon.refreshing {
    animation: rotate 1s linear infinite;
  }

  .bottom-drawer-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
  }

  .drawer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .bottom-drawer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(34, 38, 46, 1);
    border-top-left-radius: 32rpx;
    border-top-right-radius: 32rpx;
    transform: translateY(100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 1000rpx;
  }

  .drawer-open {
    transform: translateY(0);
  }

  .audience-header {
    padding: 20rpx 0;
    background-color: rgba(34, 38, 46, 1);
    z-index: 1;
    flex-direction: column;
    align-items: center;
  }

  .tab-container {
    flex-direction: row;
    justify-content: center;
    margin-top: 20rpx;
  }

  .tab-item {
    padding: 20rpx 40rpx;
    margin: 0 20rpx;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 750rpx;
    flex: 1;
  }

  .end-right {
    position: absolute;
    right: 80rpx;
    left: auto;
    display: flex;
    flex-direction: row;
  }

  .end-connect {
    width: 40rpx;
    height: 40rpx;

  }

  .tab-text {
    font-size: 32rpx;
  }

  .active-text {
    color: rgba(255, 255, 255, 0.9);
  }

  .title-text {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.9);
  }

  .active-line-container {
    margin-top: 4rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 128rpx;
  }

  .active-line {
    border-bottom: 4rpx solid rgba(255, 255, 255, 0.9);
    width: 80rpx;
  }

  .inactive-text {
    color: rgba(255, 255, 255, 0.3);
  }

  .audience-return-arrow-container {
    position: absolute;
    top: 40rpx;
    left: 48rpx;
    width: 48rpx;
    height: 48rpx;
    justify-content: center;
    align-items: center;
  }

  .audience-return-arrow {
    height: 28rpx;
    width: 16rpx;
  }

  .audience-content {
    flex: 1;
    width: 750rpx;
    padding: 0 48rpx;
    background-color: rgba(34, 38, 46, 1);
  }

  .audience-grid {
    flex-direction: column;
  }

  .audience-item {
    border-radius: 16rpx;
    height: 100rpx;
    color: #ffffff;
    position: relative;
    margin-bottom: 32rpx;
    padding-top: 10rpx;
  }

  .audience-info {
    flex-direction: row;
    align-items: center;
    padding: 10rpx 0;
  }

  .audience-avatar-container {
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
    margin-right: 24rpx;
    overflow: hidden;
  }

  .audience-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
  }

  .audience-item-right {
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .audience-detail {
    flex-direction: row;
  }

  .audience-name {
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    width: 300rpx;
    lines: 1;
  }

  .start-link {
    width: 120rpx;
    height: 40rpx;
    border-radius: 30rpx;
    justify-content: center;
    align-items: center;
    background-color: rgba(28, 102, 229, 1);
  }

  .start-link-waiting {
    width: 120rpx;
    height: 40rpx;
    border-radius: 30rpx;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border-width: 2rpx;
    border-style: solid;
    border-color: rgba(28, 102, 229, 1);
  }

  .start-link-text {
    font-size: 24rpx;
    color: #ffffff;
  }

  .audience-item-bottom-line {
    position: absolute;
    border-bottom-width: 2rpx;
    border-bottom-style: solid;
    border-bottom-color: rgba(79, 88, 107, 0.3);
    width: 550rpx;
    height: 2rpx;
    bottom: 0;
    right: 0;
  }

  .empty-state,
  .loading-state {
    padding: 64rpx;
    justify-content: center;
    align-items: center;
  }

  .drawer-content {
    padding: 0 48rpx;
    height: 68rpx;
  }
</style>