<script lang="ts" setup>
import { Btn, PageTitle } from '@bagelink/vue'
import { inject, computed } from 'vue'

interface Props {
	title?: string
	showMenuButton?: boolean
	backTo?: string
	border?: boolean
}

withDefaults(defineProps<Props>(), {
	showMenuButton: true,
	border: true,
})

// Inject menu state from parent
const menuState = inject('menuState', {
	isOpen: { value: true },
	isMobile: { value: false },
	toggleMenu: () => { },
}) as {
	isOpen: { value: boolean }
	isMobile: { value: boolean }
	toggleMenu: () => void
}

// Inject sidebar card style state
const sidebarCardStyle = inject('sidebarCardStyle', { value: false })

// Computed property to check if sidebar has card style
const hasSidebarCard = computed(() => {
	// Check if there's an AppSidebar with card class in the DOM
	const sidebar = document.querySelector('.app-sidebar .card')
	return sidebar !== null || sidebarCardStyle?.value
})
</script>

<template>
	<div
		class="app-content h-100p flex column" :class="{
			paddingAppContent: hasSidebarCard,
		}"
	>
		<!-- Header -->
		<header
			class="app-header flex align-items-center space-between py-1 m_pt-025 m_pb-05 min-h60px w-100p  m_flex-wrap"
			:class="{
				'border-bottom': border,
				'px-1': !hasSidebarCard,
				'm_px-1': hasSidebarCard,
			}"
		>
			<!-- Left Side -->
			<div class="flex align-items-center gap-col-075 m_flex-wrap m_pe-075">
				<!-- Menu Toggle Button -->
				<Btn
					v-if="showMenuButton" flat icon="dock_to_right" class="menuToggleButton"
					@click="menuState.toggleMenu"
				/>

				<!-- Back Button -->
				<Btn v-if="backTo" icon="arrow_back" thin :to="backTo" class="back-btn bg-bg m_-ms-05 m_-me-05 color-black" />

				<!-- Page Title -->
				<PageTitle v-if="title">
					{{ title }}
				</PageTitle>

				<!-- Custom Left Content -->
				<slot name="header-left" />
			</div>

			<!-- Center Content -->
			<div class="flex align-items-center">
				<slot name="header-center" />
			</div>

			<!-- Right Side -->
			<div class="flex align-items-center gap-row-05 m_flex-grow-1 endNavTools">
				<slot name="header-right" />
			</div>
		</header>

		<!-- Page Content -->
		<main
			class="pageContent flex-grow overflow pt-1 pb-05 w-100p m_p-05 m_scrollbar-gutter-auto m_vw100" :class="{
				'px-1': !hasSidebarCard,
			}"
		>
			<slot name="content">
				<!-- Default slot for content without explicit template -->
				<slot />
			</slot>
		</main>
	</div>
</template>

<style>
.slide-fade-enter-from:has(.app-header),
.slide-fade-leave-to:has(.app-header) {
	transform: translateX(0) !important;
	opacity: 1 !important;
}

.slide-fade-enter-from:has(.app-header) .pageContent,
.slide-fade-leave-to:has(.app-header) .pageContent {
	transform: translateX(-20px) !important;
	opacity: 0 !important;
}

.slide-fade-enter-active:has(.app-header) .pageContent,
.slide-fade-leave-active:has(.app-header) .pageContent {
	transition: all 0.15s ease-in;
	overflow: hidden;
}
</style>

<style scoped>
.app-content {
	height: 100vh;
}

.app-header {
	flex-shrink: 0;
}

main {
	min-height: 0;
}

@media screen and (max-width: 910px) {
	.app-header {
		padding-inline: 0.5rem;
	}
}
</style>
