<template>
  <div class="portal-layout">
    <header class="portal-header glass">
      <div class="header-content">
        <div class="logo" @click="go('/portal/home')" style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
          <img src="/logo.png" alt="Logo" style="width: 48px; height: 26px;" />
          <span>Hertz Admin</span>
        </div>
        <el-menu mode="horizontal" :default-active="active()" class="portal-menu" :ellipsis="false">
          <el-menu-item index="/portal/home" @click="go('/portal/home')">首页</el-menu-item>
          <el-menu-item index="/portal/monitor" @click="go('/portal/monitor')">监控</el-menu-item>
          <el-menu-item index="/portal/chat" @click="go('/portal/chat')">聊天</el-menu-item>
          <el-menu-item index="/portal/about" @click="go('/portal/about')">关于</el-menu-item>
        </el-menu>
        <div class="auth-actions">
          <template v-if="!auth.token">
            <el-button type="primary" @click="goLogin">登录</el-button>
            <el-button @click="goRegister" style="border: 1px solid var(--ios-primary); color: var(--ios-primary);">注册</el-button>
          </template>
          <el-dropdown v-else trigger="hover" placement="bottom-end" popper-class="ios-dropdown-popper">
            <span class="user-link">
              <el-avatar :size="32" :src="apiBase + auth.avatarPath" v-if="auth.avatarPath" />
              <el-avatar :size="32" v-else class="default-avatar">{{ auth.nickname?.charAt(0) || auth.username.charAt(0) }}</el-avatar>
              <span class="username">{{ auth.nickname || auth.username }}</span>
            </span>
            <template #dropdown>
              <el-dropdown-menu class="ios-dropdown">
                <el-dropdown-item disabled class="ios-dropdown-user">
                  <div class="ios-user-card">
                    <el-avatar :size="44" :src="apiBase + auth.avatarPath" v-if="auth.avatarPath" />
                    <el-avatar :size="44" v-else class="default-avatar">{{ auth.nickname?.charAt(0) || auth.username.charAt(0) }}</el-avatar>
                    <div class="ios-user-meta">
                      <div class="ios-user-name">{{ auth.nickname || auth.username }}</div>
                      <div class="ios-user-email">{{ auth.email || '—' }}</div>
                    </div>
                  </div>
                </el-dropdown-item>
                <el-dropdown-item divided @click="go('/portal/profile')">
                  <el-icon><component :is="Icons.User" /></el-icon>
                  <span>个人中心</span>
                </el-dropdown-item>
                <el-dropdown-item v-if="auth.roles && auth.roles.length > 0" @click="go('/admin')">
                  <el-icon><component :is="Icons.Odometer" /></el-icon>
                  <span>访问后台</span>
                </el-dropdown-item>
                <el-dropdown-item divided class="ios-logout-item" @click="logout">
                  <el-icon><component :is="Icons.SwitchButton" /></el-icon>
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </header>
    <main class="portal-main">
      <router-view />
    </main>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import * as Icons from '@element-plus/icons-vue'

const apiBase = import.meta.env.VITE_API_BASE || 'http://localhost:8080'
const route = useRoute()
const router = useRouter()
const auth = useAuthStore()

const active = () => route.path

function go(path) {
  router.push(path)
}

function goLogin() {
  router.push('/login')
}

function goRegister() {
  router.push('/register')
}

function logout() {
  auth.logout()
  router.push('/portal/home')
}
</script>

<style scoped>
.portal-layout {
  min-height: 100vh;
  background-color: var(--ios-bg);
  display: flex;
  flex-direction: column;
}
.portal-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 64px;
  border-bottom: 1px solid var(--ios-border);
  flex-shrink: 0;
}
.header-content {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 24px;
}
.logo {
  font-weight: 700;
  font-size: 22px;
  margin-right: 40px;
  background: linear-gradient(135deg, var(--ios-primary) 0%, #2a5298 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.portal-menu {
  flex: 1;
  border-bottom: none !important;
  background: transparent !important;
}
:deep(.el-menu-item) {
  background: transparent !important;
  font-weight: 500;
  font-size: 15px;
  border-bottom: 2px solid transparent !important;
  color: #555 !important;
}
:deep(.el-menu-item.is-active) {
  color: var(--ios-primary) !important;
  border-bottom-color: var(--ios-primary) !important;
}
:deep(.el-menu-item:hover) {
  color: var(--ios-primary) !important;
}
.auth-actions {
  margin-left: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 20px;
  transition: background-color 0.2s;
  outline: none;
}

.default-avatar {
  background-color: var(--ios-primary);
  color: white;
  font-weight: 600;
}
.username {
  font-weight: 500;
}
.portal-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>
