<script setup>
import { onUnmounted, ref, watch } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import ChatArea from './components/ChatArea.vue';
import ConnectionStatus from './components/ConnectionStatus.vue';
import EmptyState from './components/EmptyState.vue';
import FriendList from './components/FriendList.vue';
import FriendsManagement from './components/FriendsManagement.vue';
import GroupsManagement from './components/GroupsManagement.vue';
import MediaPreview from './components/MediaPreview.vue';
import MomentsView from './components/MomentsView.vue';
import PrescriptionModal from './components/PrescriptionModal.vue';
import VideoCallComponent from './components/VideoCallComponent.vue';
import { useChatStore } from './stores/chat.ts';
import { useThemeStore } from './stores/theme.ts';

const chatStore = useChatStore();
const themeStore = useThemeStore();

const currentNav = ref('chat');

// 视频通话相关状态
const showVideoCall = ref(false);
const callType = ref('video');
const isIncoming = ref(false);
const callerInfo = ref(null);

// 使用 VbenModal 管理处方模态框
const [PrescriptionModalComponent, prescriptionModalApi] = useVbenModal({
  connectedComponent: PrescriptionModal,
});

// 处理导航切换
const handleNavChange = (nav) => {
  currentNav.value = nav;
};

// 显示开方模块 - 使用正确的VbenModal数据传递方式
const openPrescriptionModule = (registerId) => {
  console.log('registerId', registerId);

  // 通过 setData 传递数据，然后打开模态框
  prescriptionModalApi.setData({
    registerId,
    onPrescriptionSent: handlePrescriptionSent, // 传递回调函数
  });
  prescriptionModalApi.open();
};

// 处理处方发送完成事件
const handlePrescriptionSent = () => {
  console.log('处方发送完成');
  // 可以在这里添加其他逻辑，如刷新聊天记录等
  // 注意：模态框会在PrescriptionModal组件内部关闭
};

// 监听通话状态变化
watch(
  () => chatStore.callStatus,
  (status) => {
    showVideoCall.value =
      status === 'connecting' ||
      status === 'calling' ||
      status === 'ringing' ||
      status === 'ongoing';
  },
);

// 监听来电
watch(
  () => chatStore.incomingCall,
  (call) => {
    if (call) {
      isIncoming.value = true;
      callerInfo.value = chatStore.friends.find((f) => f.id === call.callerId);
      callType.value = call.callType;
    } else {
      isIncoming.value = false;
    }
  },
);

// 监听当前通话
watch(
  () => chatStore.currentCall,
  (call) => {
    if (call) {
      callerInfo.value = chatStore.friends.find((f) => f.id === call.peerId);
      callType.value = call.callType;
      isIncoming.value = false;
    } else {
      showVideoCall.value = false;
    }
  },
);

// 处理接听通话
const handleAcceptCall = () => {
  chatStore.acceptCall();
};

// 处理拒绝通话
const handleRejectCall = () => {
  chatStore.rejectCall();
};

// 处理结束通话
const handleEndCall = () => {
  chatStore.endCall();
};

// 加载主题
themeStore.loadTheme();

onUnmounted(() => {
  // 清理资源
});
</script>

<template>
  <div
    class="chat-box-body flex bg-gradient-to-br from-blue-900 via-purple-900 to-pink-300 p-5"
    style="height: 95vh"
  >
    <!-- 视频通话组件 -->
    <VideoCallComponent
      v-if="showVideoCall"
      :call-type="callType"
      :caller-info="callerInfo"
      :is-incoming="isIncoming"
      @accept-call="handleAcceptCall"
      @end-call="handleEndCall"
      @reject-call="handleRejectCall"
    />

    <!-- 主聊天容器 -->
    <div
      class="z-10 mx-auto flex flex-1 overflow-hidden rounded-2xl bg-white/90 shadow-2xl backdrop-blur-sm"
    >
      <!-- 连接状态指示器 -->
      <ConnectionStatus />

      <!-- 好友列表 -->
      <FriendList class="w-80 min-w-80" />

      <!-- 处方模态框 - 使用 VbenModal 模式 -->
      <PrescriptionModalComponent />

      <!-- 聊天区域 -->
      <div class="min-w-0 flex-1 h-full overflow-hidden">
        <ChatArea
          v-if="chatStore.currentFriend && currentNav === 'chat'"
          @open-prescription="openPrescriptionModule"
        />
        <FriendsManagement v-else-if="currentNav === 'friends'" />
        <GroupsManagement v-else-if="currentNav === 'groups'" />
        <MomentsView v-else-if="currentNav === 'moments'" />
        <EmptyState v-else />
      </div>
    </div>

    <!-- 媒体预览模态框 -->
    <MediaPreview />
  </div>
</template>

<style scoped>
/*@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(10deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes float-delayed {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(-5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes float-slow {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

.animate-float {
  animation: float 12s infinite ease-in-out;
}

.animate-float-delayed {
  animation: float-delayed 15s infinite ease-in-out;
}

.animate-float-slow {
  animation: float-slow 18s infinite ease-in-out;
}*/
</style>
