<template>
  <a-layout class="admin-layout">
    <a-layout-sider
      v-model:collapsed="collapsed"
      :trigger="null"
      collapsible
      class="admin-sider"
    >
      <div class="sider-logo">
        <img src="/logo.png" alt="Logo" class="logo-img" />
        <div v-if="!collapsed" class="logo-text">
          <span class="logo-title">少儿智慧阅读</span>
          <span class="logo-subtitle">服务管理后台</span>
        </div>
      </div>

      <div class="sider-menu-wrap">
      <a-menu
        v-model:selectedKeys="selectedKeys"
        mode="inline"
        theme="light"
        :inline-collapsed="collapsed"
        @select="handleMenuSelect"
        class="side-menu"
      >
        <a-menu-item key="dashboard">
          <template #icon>
            <LayoutDashboard :size="18" :stroke-width="1.5" />
          </template>
          <span>数据看板</span>
        </a-menu-item>

        <a-menu-item key="courses">
          <template #icon>
            <BookOpen :size="18" :stroke-width="1.5" />
          </template>
          <span>课程包管理</span>
        </a-menu-item>

        <a-menu-item key="packages">
          <template #icon>
            <DatabaseOutlined :size="18" :stroke-width="1.5" />
          </template>
          <span>套餐管理</span>
        </a-menu-item>

        <a-menu-item key="themes">
          <template #icon>
            <FormatPainterOutlined :size="18" :stroke-width="1.5" />
          </template>
          <span>主题字典</span>
        </a-menu-item>

        <a-menu-item key="tenants">
          <template #icon>
            <Building2 :size="18" :stroke-width="1.5" />
          </template>
          <span>租户管理</span>
        </a-menu-item>

        <a-menu-item key="resources">
          <template #icon>
            <FolderOpen :size="18" :stroke-width="1.5" />
          </template>
          <span>资源库</span>
        </a-menu-item>

        <a-menu-item key="settings">
          <template #icon>
            <Settings :size="18" :stroke-width="1.5" />
          </template>
          <span>系统设置</span>
        </a-menu-item>
      </a-menu>
      </div>
    </a-layout-sider>

    <a-layout class="admin-layout-right">
      <a-layout-header class="admin-header">
        <div class="header-left">
          <MenuUnfoldOutlined
            v-if="collapsed"
            class="trigger"
            @click="collapsed = !collapsed"
          />
          <MenuFoldOutlined
            v-else
            class="trigger"
            @click="collapsed = !collapsed"
          />
        </div>

        <div class="header-right">
          <a-space>
            <a-badge count="5">
              <BellOutlined style="font-size: 18px; cursor: pointer; color: #666;" />
            </a-badge>

            <a-dropdown>
              <a-space class="user-info" style="cursor: pointer;">
                <a-avatar :size="32" class="user-avatar">
                  <template #icon><UserOutlined /></template>
                </a-avatar>
                <span class="user-name">{{ userStore.user?.name }}</span>
                <DownOutlined />
              </a-space>
              <template #overlay>
                <a-menu @click="handleUserMenuClick">
                  <a-menu-item key="profile">
                    <UserOutlined />
                    个人信息
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="logout">
                    <LogoutOutlined />
                    退出登录
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </a-space>
        </div>
      </a-layout-header>

      <a-layout-content class="admin-content">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  BellOutlined,
  UserOutlined,
  DownOutlined,
  LogoutOutlined,
} from '@ant-design/icons-vue';
// Lucide icons - modern minimalist icons
import {
  LayoutDashboard,
  BookOpen,
  Building2,
  FolderOpen,
  Settings,
} from 'lucide-vue-next';
import { DatabaseOutlined, FormatPainterOutlined } from '@ant-design/icons-vue';
import { useUserStore } from '@/stores/user';

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

const collapsed = ref(false);
const selectedKeys = ref<string[]>(['dashboard']);

// 根据路由设置选中的菜单
watch(
  () => route.path,
  (path) => {
    if (path.startsWith('/admin/courses')) {
      selectedKeys.value = ['courses'];
    } else if (path.startsWith('/admin/packages')) {
      selectedKeys.value = ['packages'];
    } else if (path.startsWith('/admin/themes')) {
      selectedKeys.value = ['themes'];
    } else if (path.startsWith('/admin/tenants')) {
      selectedKeys.value = ['tenants'];
    } else if (path.startsWith('/admin/resources')) {
      selectedKeys.value = ['resources'];
    } else if (path.startsWith('/admin/settings')) {
      selectedKeys.value = ['settings'];
    } else {
      selectedKeys.value = ['dashboard'];
    }
  },
  { immediate: true }
);

const handleMenuSelect = ({ key }: { key: string | number }) => {
  const keyStr = String(key);
  const routeMap: Record<string, string> = {
    dashboard: '/admin/dashboard',
    courses: '/admin/courses',
    packages: '/admin/packages',
    themes: '/admin/themes',
    tenants: '/admin/tenants',
    resources: '/admin/resources',
    settings: '/admin/settings',
  };

  if (routeMap[keyStr]) {
    router.push(routeMap[keyStr]);
  }
};

const handleUserMenuClick = ({ key }: { key: string | number }) => {
  const keyStr = String(key);
  if (keyStr === 'logout') {
    userStore.logout();
  } else if (keyStr === 'profile') {
    // 跳转到个人信息页面
  }
};
</script>

<style scoped lang="scss">
// 现代化简约主题配色
$primary-color: #6366F1;    // 靛蓝色 - 现代科技感
$primary-light: #EEF2FF;
$primary-dark: #4F46E5;
$accent-color: #10B981;     // 翡翠绿
$text-color: #1F2937;
$text-secondary: #6B7280;
$border-color: #E5E7EB;
$bg-light: #F9FAFB;
$bg-dark: #111827;

.admin-layout {
  height: 100vh;
  min-height: 100vh;
  background: $bg-light;
  display: flex;
  overflow: hidden;
}

.admin-layout-right {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-sider {
  background: white !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
  border-right: 1px solid $border-color;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  :deep(.ant-layout-sider-children) {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .sider-logo {
    flex-shrink: 0;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-bottom: 1px solid $border-color;
    background: linear-gradient(135deg, $bg-light 0%, white 100%);

    .logo-img {
      width: 50px;
      height: 50px;
      object-fit: contain;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      line-height: 1.3;

      .logo-title {
        font-size: 15px;
        font-weight: 600;
        color: $primary-color;
        white-space: nowrap;
      }

      .logo-subtitle {
        font-size: 12px;
        color: $text-secondary;
        white-space: nowrap;
      }
    }
  }

  .sider-menu-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .side-menu {
    border-right: none !important;
    padding: 12px 8px;

    :deep(.ant-menu-item) {
      margin: 4px 0;
      padding-left: 12px !important;
      padding-right: 12px !important;
      border-radius: 10px;
      height: 46px;
      line-height: 46px;
      color: $text-color;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;

      .ant-menu-title-content {
        display: flex;
        align-items: center;
        font-weight: 500;
      }

      // Lucide icon styles
      svg {
        transition: all 0.25s;
      }

      &:hover {
        background: $primary-light;
        color: $primary-color;
        transform: translateX(2px);

        svg {
          color: $primary-color;
        }
      }

      &.ant-menu-item-selected {
        background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
        color: white;
        box-shadow: 0 4px 12px rgba($primary-color, 0.35);

        &::after {
          display: none;
        }

        svg {
          color: white;
        }
      }
    }
  }
}

.admin-header {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid $border-color;

  .trigger {
    font-size: 18px;
    cursor: pointer;
    transition: color 0.25s;
    color: $text-secondary;

    &:hover {
      color: $primary-color;
    }
  }

  .user-info {
    padding: 0 12px;
  }

  .user-avatar {
    background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
  }

  .user-name {
    color: $text-color;
    font-weight: 500;
  }
}

.admin-content {
  flex: 1;
  min-height: 0;
  margin: 20px;
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow-y: auto;
}
</style>
