<script setup>
import { computed, ref, watch } from 'vue';
import { Avatar } from 'ant-design-vue';
import { useChatStore } from '../stores/chat.ts';
import { useThemeStore } from '../stores/theme.ts';
import { useUserStore } from '../stores/user.ts';
import CustomInput from './CustomInput.vue';
import FriendsManagement from './FriendsManagement.vue';
import GroupsManagement from './GroupsManagement.vue';
import MomentsView from './MomentsView.vue';
import VirtualList from './VirtualList.vue';

const props = defineProps({
  currentView: {
    type: String,
    default: 'chat',
  },
});
const chatStore = useChatStore();
const userStore = useUserStore();
const themeStore = useThemeStore();

const searchQuery = ref('');

const filteredFriends = computed(() => {
  if (!searchQuery.value) return chatStore.friends;

  const query = searchQuery.value.toLowerCase();
  return chatStore.friends.filter(
    (friend) =>
      friend.nick_name.toLowerCase().includes(query) ||
      friend.id.toString().includes(query),
  );
});

const getListTitle = () => {
  const titles = {
    chat: '聊天',
    friends: '好友',
    groups: '群聊',
    moments: '圈子',
  };
  return titles[props.currentView] || '聊天';
};

const selectFriend = (friend) => {
  chatStore.setCurrentFriend(friend);
  // 清除未读消息并加载聊天记录
  chatStore.switchFriend(friend, userStore.currentUser.doctor_id);
};

// 监听当前视图变化，清空搜索
watch(
  () => props.currentView,
  () => {
    searchQuery.value = '';
  },
);
</script>

<template>
  <div :class="{ dark: themeStore.isDarkMode }" class="friend-list">
    <div class="list-header">
      <h2 class="list-title">
        {{ getListTitle() }}
        <button
          :title="themeStore.isDarkMode ? '切换到亮色模式' : '切换到暗色模式'"
          class="theme-toggle"
          @click="themeStore.toggleTheme"
        >
          <i
            :class="themeStore.isDarkMode ? 'fa-sun' : 'fa-moon'"
            class="fas"
          ></i>
        </button>
      </h2>

      <div class="search-container">
        <CustomInput
          v-model="searchQuery"
          class="search-input"
          placeholder="搜索联系人..."
          prefix-icon="fas fa-search"
        />
      </div>
    </div>

    <div class="friends-container">
      <VirtualList
        v-if="currentView === 'chat'"
        :item-height="80"
        :items="filteredFriends"
        class="friends-list"
      >
        <template #default="{ item: friend }">
          <div
            :class="{ active: chatStore.currentFriend?.id === friend.id }"
            class="friend-item"
            @click="selectFriend(friend)"
          >
            <div :style="{ background: friend.color }" class="friend-avatar">
              <Avatar :size="48" v-if="friend.avatar" :src="friend.avatar" />
              <Avatar :size="48" v-else>{{ friend.nick_name.charAt(0) }}</Avatar>
            </div>

            <div class="friend-info">
              <div class="friend-name">{{ friend.nick_name }}</div>
              <div class="friend-message">
                {{ friend.last_message || '点击开始聊天' }}
              </div>
            </div>

            <div class="friend-meta">
              <div v-if="friend.un_read_count > 0" class="unread-badge">
                {{ friend.un_read_count > 99 ? '99+' : friend.un_read_count }}
              </div>
              <div v-if="friend.last_message_time" class="message-time">
                {{ friend.last_message_time }}
              </div>
            </div>
          </div>
        </template>
      </VirtualList>

      <FriendsManagement v-else-if="currentView === 'friends'" />
      <GroupsManagement v-else-if="currentView === 'groups'" />
      <MomentsView v-else-if="currentView === 'moments'" />
    </div>
  </div>
</template>

<style scoped>
.friend-list {
  width: 320px;
  min-width: 320px;
  height: 100vh;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.friend-list.dark {
  background: #1a1a1a;
  border-right-color: #374151;
}

.list-header {
  padding: 24px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  flex-shrink: 0;
}

.friend-list.dark .list-header {
  background: #1a1a1a;
  border-bottom-color: #374151;
}

.list-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.friend-list.dark .list-title {
  color: #f7fafc;
}

.theme-toggle {
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #64748b;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-toggle:hover {
  background: linear-gradient(135deg, #4361ee, #3f37c9);
  color: white;
  transform: scale(1.05);
  border-color: transparent;
}

.friend-list.dark .theme-toggle {
  background: #374151;
  border-color: #4b5563;
  color: #d1d5db;
}

.search-container {
  position: relative;
}

.search-input {
  width: 100%;
}

.friends-container {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.friends-list {
  height: 100%;
  flex: 1;
}

.friend-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
}

.friend-item:hover {
  background: #f8fafc;
}

.friend-item.active {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  border-left: 4px solid #4361ee;
}

.friend-list.dark .friend-item {
  border-bottom-color: #374151;
}

.friend-list.dark .friend-item:hover {
  background: #374151;
}

.friend-list.dark .friend-item.active {
  background: linear-gradient(
    135deg,
    rgba(67, 97, 238, 0.2),
    rgba(63, 55, 201, 0.1)
  );
}

.friend-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
  margin-right: 12px;
  flex-shrink: 0;
}

.friend-info {
  flex: 1;
  min-width: 0;
  margin-right: 12px;
}

.friend-name {
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-list.dark .friend-name {
  color: #f7fafc;
}

.friend-message {
  font-size: 14px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-list.dark .friend-message {
  color: #9ca3af;
}

.friend-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.message-time {
  font-size: 12px;
  color: #94a3b8;
}

.friend-list.dark .message-time {
  color: #6b7280;
}

.unread-badge {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  color: white;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .friend-list {
    width: 100%;
    min-width: unset;
  }

  .list-header {
    padding: 20px 16px;
  }

  .friend-item {
    padding: 14px 16px;
  }

  .friend-avatar {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
}
</style>
