<template>
  <aside class="sidebar" :class="{ collapsed: collapsed }">
    <div class="sidebar-header">
      <div class="logo">
        <img src="/logo.jpg" alt="Logo" class="logo-img" />
        <span v-if="!collapsed" class="logo-text">AI数智化平台</span>
      </div>
      <div class="collapse-btn" @click="$emit('toggle')">
        <el-icon><DArrowLeft v-if="!collapsed" /><DArrowRight v-else /></el-icon>
      </div>
    </div>

    <nav class="nav-menu">
      <div class="nav-section">
        <div
          v-for="item in menuItems"
          :key="item.key"
          class="nav-item"
          :class="{ active: activeMenu === item.key }"
          @click="handleMenuClick(item)"
        >
          <el-icon><component :is="item.icon" /></el-icon>
          <span v-if="!collapsed">{{ item.label }}</span>
        </div>
      </div>

    </nav>

    <!-- User Info -->
    <el-dropdown class="user-section" trigger="click" @command="handleUserCommand">
      <div class="user-info-wrapper">
        <div class="user-avatar">
          <img src="/avatar.svg" alt="User" @error="handleAvatarError" />
        </div>
        <span v-if="!collapsed" class="user-name">李志鹏</span>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="profile">
            <el-icon><User /></el-icon>
            个人中心
          </el-dropdown-item>
          <el-dropdown-item command="admin" divided>
            <el-icon><Setting /></el-icon>
            管理后台
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </aside>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  Plus,
  Collection,
  Warning,
  Document,
  Edit,
  Tickets,
  DataLine,
  Grid,
  Service,
  Refresh,
  ChatDotRound,
  DArrowLeft,
  DArrowRight,
  User,
  Setting,
  Connection
} from '@element-plus/icons-vue'

const props = defineProps({
  collapsed: {
    type: Boolean,
    default: false
  }
})

const router = useRouter()
const activeMenu = ref('chat')

const menuItems = [
  { key: 'chat', label: '泰豪AI助手', icon: 'ChatDotRound', path: '/' },
  { key: 'apps', label: '全部应用', icon: 'Grid', path: '/apps' },
  { key: 'workflow', label: '智能体编排', icon: 'Connection', path: '/workflow' },
  { key: 'bidding', label: '招标助手', icon: 'Document', path: '/bidding' },
  { key: 'service', label: '泰豪小电（客服）', icon: 'Service', path: '/service' }
]

const emit = defineEmits(['toggle'])

const handleMenuClick = (item) => {
  activeMenu.value = item.key
  router.push(item.path)
}


const handleAvatarError = (e) => {
  e.target.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIgZmlsbD0iI2ZmZTRjNCIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iNDAiIHI9IjIwIiBmaWxsPSIjZmZkMWExIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iODAiIHJ4PSIyNSIgcnk9IjE1IiBmaWxsPSIjZmY2YjZiIi8+PC9zdmc+'
}

const handleUserCommand = (command) => {
  if (command === 'profile') {
    router.push('/profile')
  } else if (command === 'admin') {
    router.push('/admin')
  }
}
</script>

<style lang="scss" scoped>
.sidebar {
  width: 220px;
  height: 100%;
  background: #F0EAF4;
  display: flex;
  flex-direction: column;
  color: #333;
  flex-shrink: 0;
  transition: width 0.3s ease;
  
  &.collapsed {
    width: 64px;
    
    .sidebar-header {
      padding: 16px 12px;
      justify-content: center;
      
      .logo {
        justify-content: center;
      }
      
      .collapse-btn {
        position: static;
        margin-left: 0;
      }
    }
    
    .nav-item {
      justify-content: center;
      padding: 12px;
    }
    
    .user-section {
      justify-content: center;
      padding: 16px 12px;
    }
  }
}

.sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.collapse-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  color: #888;
  transition: all 0.2s;
  
  &:hover {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  
  .logo-img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: contain;
    background: #fff;
    padding: 2px;
  }
  
  .logo-text {
    font-size: 16px;
    font-weight: 600;
  }
}

.nav-menu {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #555;
  font-size: 14px;
  
  &:hover {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
  }
  
  &.active {
    background: rgba(124, 58, 237, 0.15);
    color: #7c3aed;
  }
  
  .el-icon {
    font-size: 18px;
  }
}

.nav-section {
  padding: 8px 0;
}


.user-section {
  padding: 16px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: background 0.2s;
  
  &:hover {
    background: rgba(124, 58, 237, 0.05);
  }
  
  .user-info-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .user-avatar {
    width: 36px;
    height: 36px;
    
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
  }
  
  .user-name {
    font-size: 14px;
    font-weight: 500;
  }
}
</style>
