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

import { useChatStore } from '../stores/chat.ts';
import { useThemeStore } from '../stores/theme.ts';
import { useUserStore } from '../stores/user.ts';
import SettingsModal from './SettingsModal.vue';
import UserProfileModal from './UserProfileModal.vue';

const props = defineProps({
  currentView: {
    type: String,
    default: 'chat',
  },
});
const emit = defineEmits(['view-change']);
const themeStore = useThemeStore();
const userStore = useUserStore();
const chatStore = useChatStore();

const showSettingsModal = ref(false);
const showProfileModal = ref(false);

const navItems = computed(() => [
  {
    key: 'chat',
    label: '聊天',
    icon: 'fas fa-comment-dots',
    badge: getUnreadCount(),
  },
  {
    key: 'friends',
    label: '好友',
    icon: 'fas fa-user-friends',
    badge: null,
  },
  {
    key: 'groups',
    label: '群聊',
    icon: 'fas fa-users',
    badge: null,
  },
  {
    key: 'moments',
    label: '圈子',
    icon: 'fas fa-globe',
    badge: null,
  },
]);

const getUnreadCount = () => {
  const totalUnread = chatStore.friends.reduce((total, friend) => {
    return total + (friend.unreadCount || 0);
  }, 0);

  return totalUnread > 0
    ? totalUnread > 99
      ? '99+'
      : totalUnread.toString()
    : null;
};

const switchView = (key) => {
  emit('nav-change', key);
};

const showSettings = () => {
  showSettingsModal.value = true;
};

const showProfile = () => {
  showProfileModal.value = true;
};
</script>

<template>
  <div :class="{ dark: themeStore.isDarkMode }" class="side-navigation">
    <div class="nav-header">
      <!--      <div class="logo">-->
      <!--        <i class="fas fa-comments"></i>-->
      <!--      </div>-->
      <!--      <div-->
      <!--        class="nav-item profile-item"-->
      <!--        @click="showProfile"-->
      <!--        title="个人资料"-->
      <!--      >-->
      <!--        <div class="nav-icon user-avatar" :style="{ background: userStore.currentUser?.color }">-->
      <!--          {{ userStore.currentUser.nick_name.charAt(0) }}-->
      <!--        </div>-->
      <!--        &lt;!&ndash;        <div class="nav-label">我的</div>&ndash;&gt;-->
      <!--      </div>-->
    </div>

    <nav class="nav-menu">
      <div
        v-for="item in navItems"
        :key="item.key"
        :class="{ active: currentView === item.key }"
        :title="item.label"
        class="nav-item"
        @click="switchView(item.key)"
      >
        <div class="nav-icon">
          <i :class="item.icon"></i>
        </div>
        <div class="nav-label">
          {{ item.label }}
        </div>
        <div v-if="item.badge" class="nav-badge">
          {{ item.badge }}
        </div>
      </div>
    </nav>

    <div class="nav-footer">
      <div class="nav-item settings-item" title="设置" @click="showSettings">
        <div class="nav-icon">
          <i class="fas fa-cog"></i>
        </div>
        <div class="nav-label">设置</div>
      </div>
    </div>

    <!-- 设置模态框 -->
    <SettingsModal
      :visible="showSettingsModal"
      @close="showSettingsModal = false"
    />

    <!-- 用户资料模态框 -->
    <UserProfileModal
      :user-info="userStore.currentUser"
      :visible="showProfileModal"
      @close="showProfileModal = false"
    />
  </div>
</template>

<style scoped>
.side-navigation {
  width: 80px;
  height: 100vh;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  position: relative;
  transition: all 0.3s ease;
}

.side-navigation.dark {
  background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 100%);
  border-right-color: #374151;
}

.nav-header {
  margin-bottom: 24px;
}

.logo {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #4361ee, #3f37c9);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
  animation: gradient-shift 3s ease infinite;
}

.nav-menu {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 0 12px;
}

.nav-item {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  color: #64748b;
  gap: 2px;
}

.nav-item:hover {
  background: rgba(67, 97, 238, 0.1);
  color: #4361ee;
  transform: translateY(-2px);
}

.nav-item.active {
  background: linear-gradient(135deg, #4361ee, #3f37c9);
  color: white;
  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
  transform: translateY(-2px);
}

.side-navigation.dark .nav-item {
  color: #9ca3af;
}

.side-navigation.dark .nav-item:hover {
  background: rgba(67, 97, 238, 0.2);
  color: #60a5fa;
}

.side-navigation.dark .nav-item.active {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.nav-icon {
  font-size: 18px;
  margin-bottom: 2px;
}

.nav-label {
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 48px;
}

.nav-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
  animation: pulse 2s infinite;
}

.nav-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 0 12px;
  margin-top: 16px;
}

.settings-item {
  background: #f1f5f9;
  color: #64748b;
  margin-bottom: 30px;
}

.settings-item:hover {
  background: #e2e8f0;
  color: #475569;
}

.side-navigation.dark .settings-item {
  background: #374151;
  color: #9ca3af;
}

.side-navigation.dark .settings-item:hover {
  background: #4b5563;
  color: #d1d5db;
}

.profile-item {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.profile-item:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 2px;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .side-navigation {
    width: 100%;
    height: 60px;
    flex-direction: row;
    justify-content: space-around;
    padding: 8px 16px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
  }

  .nav-header {
    display: none;
  }

  .nav-menu {
    flex-direction: row;
    flex: 1;
    justify-content: space-around;
    padding: 0;
    margin: 0;
  }

  .nav-footer {
    flex-direction: row;
    margin: 0;
    padding: 0;
  }

  .nav-item {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .nav-icon {
    font-size: 16px;
  }

  .nav-label {
    font-size: 9px;
  }
}
</style>
