import type { InjectionKey, Ref } from 'vue'
import { inject, ref } from 'vue'

export const SIDEBAR_COLLAPSED_WIDTH = '66px'
export const SIDEBAR_COLLAPSED_WIDTH_CARD = '82px'

export interface AppLayoutContext {
	/** Sidebar open (expanded) state */
	isOpen: Ref<boolean>
	/** Viewport is below MOBILE_BREAKPOINT */
	isMobile: Ref<boolean>
	toggleMenu: () => void
	/** Close the sidebar when on mobile (e.g. after navigating) */
	closeOnMobile: () => void
	sidebarWidth: string
	sidebarCollapsedWidth: string
	/** Sidebar rendered as a floating card */
	sidebarCardStyle: boolean
}

export const AppLayoutKey: InjectionKey<AppLayoutContext> = Symbol('AppLayout')

/**
 * Access the AppLayout context (sidebar open state, mobile flag, toggle).
 * Works inside AppLayout's slots — including custom header buttons.
 * Outside an AppLayout it warns (dev) and returns an inert fallback.
 */
export function useAppLayout(): AppLayoutContext {
	const ctx = inject(AppLayoutKey, null)
	if (ctx) { return ctx }

	if (import.meta.env?.DEV) {
		console.warn('[bagelink] useAppLayout() called outside <AppLayout>. AppSidebar/AppContent are designed to be used inside it.')
	}
	return {
		isOpen: ref(true),
		isMobile: ref(false),
		toggleMenu: () => {},
		closeOnMobile: () => {},
		sidebarWidth: '260px',
		sidebarCollapsedWidth: SIDEBAR_COLLAPSED_WIDTH,
		sidebarCardStyle: false,
	}
}