<template>
	<div class="relative flex h-full flex-col">
		<n-layout class="h-full" has-sider>
			<AppSidebar
				v-if="!isSignupFlow && !$isMobile && !isHideSidebar && $session.user"
				v-model:collapsed="sidebarCollapsed"
			/>
			<n-layout class="h-full">
				<div class="w-full h-full overflow-auto" id="scrollContainer">
					<MobileNav
						v-if="!isSignupFlow && $isMobile && !isHideSidebar && $session.user"
					/>
					<div
						v-if="
							!isSignupFlow &&
							!isSiteLogin &&
							!$session.user &&
							!$route.meta.isLoginPage
						"
						class="border bg-red-200 px-5 py-3 text-base text-red-900"
					>
						You are not logged in.
						<router-link to="/login" class="underline">Login</router-link> to
						access dashboard.
					</div>
					<router-view />
				</div>
			</n-layout>
		</n-layout>
		<Toaster position="top-right" />
		<component v-for="dialog in dialogs" :is="dialog" :key="dialog.id" />
	</div>
</template>

<script setup>
import { defineAsyncComponent, computed, watch, ref, provide, onMounted } from 'vue';
import { NLayout } from 'naive-ui';
import { Toaster } from 'vue-sonner';
import { dialogs } from './utils/components';
import { useRoute } from 'vue-router';
import { getTeam } from './data/team';
import { session } from './data/session.js';

const AppSidebar = defineAsyncComponent(
	() => import('./components/AppSidebar.vue'),
);
const MobileNav = defineAsyncComponent(
	() => import('./components/MobileNav.vue'),
);

const route = useRoute();
const team = getTeam();

// 侧边栏折叠状态
const sidebarCollapsed = ref(false);

// 响应式：在移动端默认折叠
onMounted(() => {
	const checkMobile = () => {
		if (window.innerWidth < 768) {
			sidebarCollapsed.value = true;
		}
	};
	checkMobile();
	window.addEventListener('resize', checkMobile);
});

const isHideSidebar = computed(() => {
	const alwaysHideSidebarRoutes = [
		'Site Login',
		'SignupLoginToSite',
		'SignupSetup',
	];
	const alwaysHideSidebarPaths = ['/dashboard/site-login'];

	if (!session.user) return false;
	if (
		alwaysHideSidebarRoutes.includes(route.name) ||
		alwaysHideSidebarPaths.includes(window.location.pathname)
	)
		return true;

	return (
		route.meta.hideSidebar && session.user && team?.pg?.hide_sidebar === true
	);
});

const isSignupFlow = ref(
	window.location.pathname.startsWith('/dashboard/create-site') ||
		window.location.pathname.startsWith('/dashboard/setup-account') ||
		window.location.pathname.startsWith('/dashboard/site-login') ||
		window.location.pathname.startsWith('/dashboard/signup'),
);
const isSiteLogin = ref(window.location.pathname.endsWith('/site-login'));

watch(
	() => route.name,
	() => {
		isSignupFlow.value =
			window.location.pathname.startsWith('/dashboard/create-site') ||
			window.location.pathname.startsWith('/dashboard/setup-account') ||
			window.location.pathname.startsWith('/dashboard/site-login') ||
			window.location.pathname.startsWith('/dashboard/signup');
	},
);

provide('team', team);
provide('session', session);
</script>

<style src="../src/assets/style.css"></style>
