<template>
  <a-layout :class="['parent-layout', { 'is-collapsed': collapsed }]">
    <!-- 桌面端侧边栏 -->
    <a-layout-sider v-if="!isMobile" v-model:collapsed="collapsed" :trigger="null" collapsible class="parent-sider"
      :width="220">
      <div class="logo">
        <img src="/logo/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-wrapper">
        <a-menu v-model:selectedKeys="selectedKeys" mode="inline" theme="light" :inline-collapsed="collapsed"
          @click="handleMenuClick" class="side-menu">
          <a-menu-item key="dashboard">
            <template #icon>
              <HomeOutlined />
            </template>
            <span>首页</span>
          </a-menu-item>
          <a-menu-item key="children">
            <template #icon>
              <TeamOutlined />
            </template>
            <span>我的孩子</span>
          </a-menu-item>
          <a-menu-item key="lessons">
            <template #icon>
              <BookOutlined />
            </template>
            <span>阅读记录</span>
          </a-menu-item>
          <a-menu-item key="tasks">
            <template #icon>
              <CheckSquareOutlined />
            </template>
            <span>阅读任务</span>
          </a-menu-item>
          <a-menu-item key="growth">
            <template #icon>
              <FileImageOutlined />
            </template>
            <span>成长档案</span>
          </a-menu-item>
        </a-menu>
      </div>
      <div class="sider-version" :title="`版本 v${appVersion}`">
        <span>v{{ appVersion }}</span>
      </div>
    </a-layout-sider>

    <!-- 移动端抽屉菜单 -->
    <a-drawer v-if="isMobile" v-model:open="drawerVisible" placement="left" :closable="false" :width="260"
      class="mobile-drawer">
      <template #title>
        <div class="drawer-header">
          <img src="/logo/logo.png" alt="Logo" class="drawer-logo" />
          <div class="drawer-title">
            <span class="title-main">少儿智慧阅读</span>
            <span class="title-sub">家长端</span>
          </div>
        </div>
      </template>
      <div class="drawer-menu-wrapper">
        <a-menu v-model:selectedKeys="selectedKeys" mode="inline" theme="light" @click="handleMobileMenuClick"
          class="drawer-menu">
          <a-menu-item key="dashboard">
            <template #icon>
              <HomeOutlined />
            </template>
            <span>首页</span>
          </a-menu-item>
          <a-menu-item key="children">
            <template #icon>
              <TeamOutlined />
            </template>
            <span>我的孩子</span>
          </a-menu-item>
          <a-menu-item key="lessons">
            <template #icon>
              <BookOutlined />
            </template>
            <span>阅读记录</span>
          </a-menu-item>
          <a-menu-item key="tasks">
            <template #icon>
              <CheckSquareOutlined />
            </template>
            <span>阅读任务</span>
          </a-menu-item>
          <a-menu-item key="growth">
            <template #icon>
              <FileImageOutlined />
            </template>
            <span>成长档案</span>
          </a-menu-item>
          <a-menu-item key="profile">
            <template #icon>
              <UserOutlined />
            </template>
            <span>个人信息</span>
          </a-menu-item>
        </a-menu>
      </div>

      <div class="drawer-footer">
        <div class="drawer-version">版本 v{{ appVersion }}</div>
        <a-button block @click="handleLogout" class="logout-btn">
          <LogoutOutlined /> 退出登录
        </a-button>
      </div>
    </a-drawer>

    <a-layout class="main-layout">
      <!-- 桌面端顶部栏 -->
      <a-layout-header v-if="!isMobile" class="parent-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-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">{{ userName }}</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-header v-if="isMobile" class="mobile-header">
        <div class="mobile-header-content">
          <MenuOutlined class="menu-icon" @click="drawerVisible = true" />
          <span class="page-title">{{ pageTitle }}</span>
        </div>
      </a-layout-header>

      <a-layout-content :class="['parent-content', { 'mobile-content': isMobile }]">
        <router-view />
      </a-layout-content>

      <!-- 移动端底部导航 -->
      <div v-if="isMobile" class="mobile-bottom-nav">
        <div v-for="nav in navItems" :key="nav.key" :class="['nav-item', { active: selectedKeys[0] === nav.key }]"
          @click="handleNavClick(nav.key)">
          <component :is="nav.icon" class="nav-icon" />
          <span class="nav-text">{{ nav.text }}</span>
        </div>
      </div>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted, shallowRef } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import {
  HomeOutlined,
  TeamOutlined,
  UserOutlined,
  BookOutlined,
  FileImageOutlined,
  CheckSquareOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  LogoutOutlined,
  DownOutlined,
  MenuOutlined,
} from '@ant-design/icons-vue';
import { useUserStore } from '@/stores/user';

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

const collapsed = ref(false);
const selectedKeys = ref(['dashboard']);
const notifications = ref(0);
const isMobile = ref(false);
const drawerVisible = ref(false);

const userName = computed(() => userStore.user?.name || '家长');

// 页面标题映射
const pageTitleMap: Record<string, string> = {
  dashboard: '首页',
  children: '我的孩子',
  lessons: '阅读记录',
  tasks: '阅读任务',
  growth: '成长档案',
  profile: '个人信息',
};

const pageTitle = computed(() => {
  const key = selectedKeys.value[0];
  return pageTitleMap[key] || '首页';
});

// 底部导航项
const navItems = [
  { key: 'dashboard', icon: shallowRef(HomeOutlined), text: '首页' },
  { key: 'tasks', icon: shallowRef(CheckSquareOutlined), text: '任务' },
  { key: 'lessons', icon: shallowRef(BookOutlined), text: '记录' },
  { key: 'growth', icon: shallowRef(FileImageOutlined), text: '档案' },
  { key: 'children', icon: shallowRef(TeamOutlined), text: '孩子' },
];

// 检测屏幕宽度
const checkMobile = () => {
  isMobile.value = window.innerWidth < 768;
  if (!isMobile.value) {
    drawerVisible.value = false;
  }
};

// 根据路由设置选中的菜单
watch(
  () => route.path,
  (path) => {
    if (path.startsWith('/parent/children')) {
      selectedKeys.value = ['children'];
    } else if (path.startsWith('/parent/lessons')) {
      selectedKeys.value = ['lessons'];
    } else if (path.startsWith('/parent/tasks')) {
      selectedKeys.value = ['tasks'];
    } else if (path.startsWith('/parent/growth')) {
      selectedKeys.value = ['growth'];
    } else if (path.startsWith('/parent/profile')) {
      selectedKeys.value = ['profile'];
    } else {
      selectedKeys.value = ['dashboard'];
    }
  },
  { immediate: true }
);

const handleMenuClick = ({ key }: { key: string | number }) => {
  router.push(`/parent/${key}`);
};

const handleMobileMenuClick = ({ key }: { key: string | number }) => {
  const keyStr = String(key);
  router.push(`/parent/${keyStr}`);
  drawerVisible.value = false;
};

const handleNavClick = (key: string) => {
  selectedKeys.value = [key];
  router.push(`/parent/${key}`);
};

const handleUserMenuClick = ({ key }: { key: string | number }) => {
  const keyStr = String(key);
  if (keyStr === 'logout') {
    handleLogout();
  } else if (keyStr === 'profile') {
    router.push('/parent/profile');
  }
};

const handleLogout = () => {
  userStore.logout();
  message.success('退出成功');
  router.push('/login');
};

onMounted(() => {
  checkMobile();
  window.addEventListener('resize', checkMobile);
});

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile);
});
</script>

<style scoped lang="scss">
$primary-color: #52c41a;
$primary-light: #f6ffed;
$primary-dark: #389e0d;
$text-color: #333333;
$text-secondary: #666666;
$border-color: #E8E8E8;
$bg-light: #FAFAFA;

.parent-layout {
  min-height: 100vh;
  background: $bg-light;
  position: relative;
}

.main-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

@media screen and (min-width: 769px) {
  .parent-layout {
    padding-left: 220px; // 对齐桌面端家长侧边栏宽度
    padding-top: 64px; // 预留顶部栏高度
  }

  .parent-layout.is-collapsed {
    padding-left: 80px; // 收起菜单时的宽度
  }
}

// 桌面端侧边栏样式
.parent-sider {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  background: white !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
  border-right: 1px solid $border-color;
  display: flex;
  flex-direction: column;

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

    .logo-img {
      width: 44px;
      height: 44px;
      object-fit: contain;
      flex-shrink: 0;
    }

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

      .logo-title {
        font-size: 14px;
        font-weight: 600;
        color: $text-color;
      }

      .logo-subtitle {
        font-size: 11px;
        color: $text-secondary;
      }
    }
  }

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

    :deep(.ant-menu-item) {
      margin: 4px 0;
      padding-left: 12px !important;
      padding-right: 12px !important;
      border-radius: 8px;
      height: 44px;
      line-height: 44px;
      color: $text-color;
      transition: all 0.3s;

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

      &.ant-menu-item-selected {
        background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
        color: white;

        &::after {
          display: none;
        }

        .anticon {
          color: white;
        }
      }
    }
  }
}

.sider-menu-wrapper {
  flex: 1;
  min-height: 0;
  overflow: auto;

  // 自定义侧边栏滚动条样式
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.6);
    border-radius: 999px;
  }
}

.sider-version {
  padding: 10px 12px 14px;
  border-top: 1px solid $border-color;
  font-size: 12px;
  color: #9CA3AF;
  text-align: center;
  line-height: 1.2;
  background: #fff;
  flex-shrink: 0;
}

// 桌面端顶部栏
.parent-header {
  background: white;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid $border-color;
  height: 64px;

  position: fixed;
  top: 0;
  left: 220px;
  right: 0;
  z-index: 90;

  .trigger {
    font-size: 18px;
    cursor: pointer;
    transition: color 0.3s;
    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;
  }
}

@media screen and (min-width: 769px) {
  .parent-layout.is-collapsed .parent-header {
    left: 80px;
  }
}

// 内容区域
.parent-content {
  margin: 20px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  flex: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow-y: auto;
}

// =============== 移动端样式 ===============

// 移动端抽屉
.mobile-drawer {
  :deep(.ant-drawer-body) {
    display: flex;
    flex-direction: column;
    padding: 0 0 16px;
    overflow: hidden;
  }

  .drawer-header {
    display: flex;
    align-items: center;
    padding: 8px 0;

    .drawer-logo {
      width: 40px;
      height: 40px;
      object-fit: contain;
    }

    .drawer-title {
      display: flex;
      flex-direction: column;
      margin-left: 12px;

      .title-main {
        font-size: 15px;
        font-weight: 600;
        color: $text-color;
      }

      .title-sub {
        font-size: 12px;
        color: $text-secondary;
      }
    }
  }

  .drawer-menu {
    border-right: none !important;

    :deep(.ant-menu-item) {
      margin: 4px 0;
      padding-left: 16px !important;
      border-radius: 8px;
      height: 48px;
      line-height: 48px;
      font-size: 15px;

      &.ant-menu-item-selected {
        background: $primary-light;
        color: $primary-color;

        &::after {
          display: none;
        }
      }
    }
  }

  .drawer-menu-wrapper {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0 12px;
  }

  .drawer-footer {
    padding: 16px;
    border-top: 1px solid $border-color;
    background: #fff;

    .drawer-version {
      font-size: 12px;
      color: #9CA3AF;
      text-align: center;
      margin-bottom: 10px;
      line-height: 1.2;
    }

    .logout-btn {
      height: 44px;
      border-radius: 8px;
      color: #ff4d4f;
      border-color: #ff4d4f;

      &:hover {
        color: #ff7875;
        border-color: #ff7875;
      }
    }
  }
}

// 移动端顶部栏
.mobile-header {
  background: white;
  padding: 0 16px;
  height: 56px;
  border-bottom: 1px solid $border-color;
  position: sticky;
  top: 0;
  z-index: 100;

  .mobile-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;

    .menu-icon {
      font-size: 22px;
      color: $text-color;
      padding: 8px;
      cursor: pointer;
    }

    .page-title {
      font-size: 17px;
      font-weight: 600;
      color: $text-color;
    }

    .notification-badge {
      padding: 8px;
      cursor: pointer;
    }
  }
}

// 移动端内容区域
.mobile-content {
  margin: 12px;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 70px;
}

// 移动端底部导航
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  border-top: 1px solid $border-color;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom);

  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    cursor: pointer;
    transition: all 0.3s;
    color: $text-secondary;

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

    .nav-text {
      font-size: 11px;
    }

    &.active {
      color: $primary-color;

      .nav-icon {
        transform: scale(1.1);
      }
    }

    &:active {
      background: rgba(0, 0, 0, 0.02);
    }
  }
}

// 响应式调整
@media screen and (max-width: 768px) {
  .parent-layout {
    .ant-layout-sider {
      display: none;
    }
  }
}

@media screen and (min-width: 769px) {
  .mobile-drawer {
    display: none;
  }

  .mobile-header {
    display: none;
  }

  .mobile-bottom-nav {
    display: none;
  }
}

// 平板适配
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .parent-content {
    padding: 20px;
  }
}
</style>
