<template>
	<n-layout-sider
		:collapsed="collapsed"
		:collapsed-width="64"
		:width="220"
		:show-trigger="true"
		:collapsible="true"
		:trigger-style="{ position: 'absolute', right: '-20px' }"
		:collapsed-trigger-style="{ position: 'absolute', right: '-20px' }"
		class="h-screen"
		@collapse="handleCollapse"
		@expand="handleExpand"
	>
		<div style="display: block; height: 100%;">
			<!-- 用户信息区域 -->
			<div class="p-2">
				<n-dropdown
					:options="dropdownOptions"
					:show-arrow="true"
					trigger="click"
					@select="handleDropdownSelect"
				>
					<div
						class="flex cursor-pointer items-center rounded-md px-2 py-2 transition-colors hover:bg-gray-200"
						:class="{ 'justify-center': collapsed }"
					>
						<JLogo class="h-8 w-8 shrink-0 rounded" />
						<div
							v-if="!collapsed"
							class="ml-2 flex flex-1 flex-col overflow-hidden"
						>
							<div class="text-base font-medium leading-none text-gray-900">
								今果 Jingrow
							</div>
							<n-tooltip>
								<template #trigger>
									<div
										class="mt-1 overflow-hidden text-ellipsis whitespace-nowrap pb-1 text-sm leading-none text-gray-700"
									>
										{{ teamUserText }}
									</div>
								</template>
								{{ teamUserText }}
							</n-tooltip>
						</div>
					</div>
				</n-dropdown>
			</div>

			<!-- 导航菜单 -->
			<div class="flex-1 overflow-auto">
				<NavigationItems>
					<template v-slot="{ navigation }">
						<n-menu
							:collapsed="collapsed"
							:collapsed-width="64"
							:collapsed-icon-size="24"
							:options="convertToMenuOptions(navigation)"
							:value="activeKey"
							:router="false"
							@update:value="handleMenuSelect"
							class="app-sidebar-menu"
						/>
					</template>
				</NavigationItems>
			</div>
		</div>

		<!-- 切换团队对话框 -->
		<SwitchTeamDialog2 v-model="showTeamSwitcher" />
	</n-layout-sider>
</template>

<script>
import { defineAsyncComponent, computed, ref, h, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { NLayoutSider, NMenu, NDropdown, NTooltip, NIcon } from 'naive-ui';
import NavigationItems from './NavigationItems.vue';
import JLogo from '@/components/icons/JLogo.vue';

export default {
	name: 'AppSidebar',
	components: {
		NLayoutSider,
		NMenu,
		NDropdown,
		NTooltip,
		NIcon,
		NavigationItems,
		JLogo,
		SwitchTeamDialog2: defineAsyncComponent(() =>
			import('./SwitchTeamDialog.vue')
		),
	},
	props: {
		collapsed: {
			type: Boolean,
			default: false,
		},
	},
	emits: ['update:collapsed'],
	setup(props, { emit }) {
		const route = useRoute();
		const router = useRouter();
		const instance = getCurrentInstance();
		const showTeamSwitcher = ref(false);

		// 响应式：在移动端默认折叠
		const isMobile = computed(() => {
			if (typeof window === 'undefined') return false;
			return window.innerWidth < 768;
		});

		const collapsed = computed({
			get: () => {
				// 如果 props 有值，使用 props；否则根据屏幕大小判断
				if (props.collapsed !== undefined) {
					return props.collapsed;
				}
				return isMobile.value;
			},
			set: (value) => emit('update:collapsed', value),
		});

		// 监听窗口大小变化
		if (typeof window !== 'undefined') {
			const handleResize = () => {
				if (window.innerWidth < 768 && !props.collapsed) {
					emit('update:collapsed', true);
				}
			};
			window.addEventListener('resize', handleResize);
		}

		// 下拉菜单选项
		const dropdownOptions = computed(() => {
			const options = [];
			// 通过 getCurrentInstance 访问全局属性
			const team = instance?.appContext.config.globalProperties.$team?.pg;
			if (
				team &&
				(team.valid_teams?.length > 1 || team.is_desk_user)
			) {
				options.push({
					label: '切换团队',
					key: 'switch-team',
					icon: () => h('i', { class: 'i-lucide-command h-4 w-4' }),
				});
			}
			options.push({
				label: '退出登录',
				key: 'logout',
				icon: () => h('i', { class: 'i-lucide-log-out h-4 w-4' }),
			});
			return options;
		});

		// 处理下拉菜单选择
		const handleDropdownSelect = (key) => {
			if (key === 'switch-team') {
				showTeamSwitcher.value = true;
			} else if (key === 'logout') {
				const session = instance?.appContext.config.globalProperties.$session;
				if (session) {
					session.logout.submit();
				}
			}
		};

		// 转换导航项为菜单选项
		const convertToMenuOptions = (items) => {
			if (!items || !Array.isArray(items)) {
				console.warn('[AppSidebar] convertToMenuOptions: invalid items', items);
				return [];
			}
			
			return items
				.filter((item) => item.condition !== false)
				.map((item) => {
					console.log(`[AppSidebar] Processing "${item.name}":`, {
						hasIcon: !!item.icon,
						iconType: typeof item.icon,
						collapsed: collapsed.value
					});
					// 处理图标：item.icon 是一个函数，返回 h() 创建的组件
					// Naive UI 的 n-menu 需要 icon 是一个渲染函数
					let iconComponent = undefined;
					if (item.icon) {
						iconComponent = () => {
							try {
								const iconVNode = item.icon();
								// 检查图标 VNode 的实际结构
								console.log(`[AppSidebar] Icon render for "${item.name}":`, {
									hasVNode: !!iconVNode,
									vnodeType: iconVNode?.type,
									vnodeTypeName: iconVNode?.type?.name || iconVNode?.type?.__name || iconVNode?.type,
									vnodeProps: iconVNode?.props,
									vnodeChildren: iconVNode?.children,
									shapeFlag: iconVNode?.shapeFlag,
									collapsed: collapsed.value
								});
								
								// 如果图标 VNode 没有 props，添加默认的 size
								if (iconVNode && !iconVNode.props) {
									iconVNode.props = { width: 16, height: 16 };
								} else if (iconVNode && iconVNode.props) {
									// 确保有 size 属性
									if (!iconVNode.props.width && !iconVNode.props.size) {
										iconVNode.props.width = 16;
									}
									if (!iconVNode.props.height && !iconVNode.props.size) {
										iconVNode.props.height = 16;
									}
								}
								
								// 用 NIcon 包装
								const wrapped = h(NIcon, null, { default: () => iconVNode });
								console.log(`[AppSidebar] Wrapped icon for "${item.name}":`, {
									hasWrapped: !!wrapped,
									wrappedType: wrapped?.type,
									wrappedChildren: wrapped?.children,
									wrappedProps: wrapped?.props
								});
								return wrapped;
							} catch (e) {
								console.error(`[AppSidebar] Icon error for "${item.name}":`, e);
								return null;
							}
						};
					}

					// 处理路由：NavigationItems 中的 route 已经是相对于 /dashboard/ 的路径（如 '/sites'）
					// 路由配置的 base 是 '/dashboard/'，所以直接使用 item.route 即可
					let routePath = item.route || item.name;

					const option = {
						label: item.name,
						key: routePath,
						icon: iconComponent,
						disabled: item.disabled,
					};

					// 处理子菜单
					if (item.children && item.children.length > 0) {
						option.children = convertToMenuOptions(item.children);
					}

					// 处理徽章
					if (item.badge) {
						try {
							// item.badge 是一个函数，调用它获取徽章组件
							const badgeResult = item.badge();
							if (badgeResult) {
								option.label = () => h('div', { 
									class: 'flex items-center justify-between w-full' 
								}, [
									h('span', item.name),
									badgeResult,
								]);
							}
						} catch (e) {
							// 徽章处理失败，使用默认标签
							console.warn('Badge rendering failed:', e);
						}
					}

					return option;
				});
		};

		// 当前激活的菜单项
		const activeKey = computed(() => {
			// 路由配置的 base 是 '/dashboard/'，route.path 返回的是相对于 base 的路径
			// 例如：如果访问 /dashboard/sites，route.path 应该是 '/sites'
			let path = route.path;
			// 确保路径格式正确（以 / 开头）
			if (!path.startsWith('/')) {
				path = '/' + path;
			}
			// 如果路径是 /dashboard，转换为 /
			if (path === '/dashboard') {
				path = '/';
			}
			return path;
		});

		// 处理菜单选择
		const handleMenuSelect = (key) => {
			// 路由配置的 base 是 '/dashboard/'，key 已经是相对于 base 的路径（如 '/sites'）
			// 直接使用 router.push，Vue Router 会自动处理 base
			router.push(key).catch((err) => {
				// 忽略导航重复的错误
				if (err.name !== 'NavigationDuplicated') {
					console.error('Navigation error:', err);
				}
			});
		};

		// 处理折叠
		const handleCollapse = () => {
			console.log('[AppSidebar] handleCollapse called');
			emit('update:collapsed', true);
		};

		// 处理展开
		const handleExpand = () => {
			console.log('[AppSidebar] handleExpand called');
			emit('update:collapsed', false);
		};

		// 团队用户文本
		const teamUserText = computed(() => {
			const team = instance?.appContext.config.globalProperties.$team;
			if (team?.get?.loading) {
				return '加载中...';
			}
			return team?.pg?.user || '';
		});

		return {
			showTeamSwitcher,
			collapsed,
			dropdownOptions,
			activeKey,
			teamUserText,
			handleDropdownSelect,
			handleMenuSelect,
			handleCollapse,
			handleExpand,
			convertToMenuOptions,
		};
	},
};
</script>

<style scoped>
/* 全局覆盖，确保优先级最高 */
/* 确保菜单图标在折叠状态下正确显示 */
/* 注意：不要覆盖 Naive UI 的默认 display 样式，只调整必要的属性 */

:deep(.app-sidebar-menu.n-menu--collapsed .n-menu-item-content) {
	justify-content: center;
}

/* 确保图标 SVG 可见 */
:deep(.app-sidebar-menu .n-icon svg) {
	width: 100%;
	height: 100%;
	display: block;
}

/* 修复 n-layout-sider 的 flex 布局导致图标不显示的问题 */
/* 根源：Naive UI 的 .n-layout-sider 默认是 display: flex，这会导致内部图标无法正确渲染 */
/* 解决方案：直接覆盖 .n-layout-sider 的 display 属性，使用更高优先级的选择器 */
</style>

<style>
/* 全局样式，不使用 scoped，确保能覆盖 Naive UI 的默认样式 */
/* 修复：覆盖 .n-layout-sider 的 display: flex，这是导致图标不显示的根本原因 */
.n-layout-sider {
	display: block !important;
}

.n-layout-sider .n-layout-sider-scroll-container {
	display: block !important;
}

/* 确保所有内部容器都是 block，避免 flex 布局影响图标 */
.n-layout-sider > * {
	display: block !important;
}
</style>

<style scoped>
</style>