<script setup>
import { ref, nextTick } from "vue";
import { useRouter } from "vue-router";
import { useModalStore } from "@/stores/modal";
import { useNotificationStore } from "@/stores/notifications-primevue"
import {
	Home,
	Community,
	Calendar,
	Hammer,
	MultiplePagesPlus,
	PathArrowSolid,
	Clock,
	HistoricShield,
	Developer,
	Neighbourhood,
	Calculator,
	ReceiveDollars,
	NavArrowLeft,
	NavArrowRight,
} from "@iconoir/vue";
import SidebarSpeedDial from "./SidebarSpeedDial.vue";

const router = useRouter();
const modalStore = useModalStore();
const notifications = useNotificationStore();
const isCollapsed = ref(false);
const pendingOpen = ref(null);

const focusClientInput = (inputId) => {
	if (typeof document === "undefined") return;
	nextTick(() => {
		const el = document.getElementById(inputId);
		if (el && typeof el.focus === "function") {
			el.focus();
		}
	});
};

const toggleSidebar = () => {
	isCollapsed.value = !isCollapsed.value;
};

const openSidebarAndDial = (category) => {
	isCollapsed.value = false;
	pendingOpen.value = category.name;
	// ensure re-render picks up forceOpen
	nextTick(() => {
		pendingOpen.value = category.name;
	});
};

const clientButtons = ref([
	{
		label: "Customer Lookup",
		command: () => {
			if (router.currentRoute.value.path === "/clients") {
				focusClientInput("customerSearchInput");
			} else {
				router.push("/clients?lookup=customer");
			}
		}
	},
	{
		label: "Property Lookup",
		command: () => {
			if (router.currentRoute.value.path === "/clients") {
				focusClientInput("propertySearchInput");
			} else {
				router.push("/clients?lookup=property");
			}
		}
	},

]);

const createButtons = ref([
	{
		label: "Client",
		command: () => {
			router.push("/client?new=true");
		},
	},
	{
		label: "Bid",
		command: () => {
			router.push("/calendar?tab=bids&new=true");
		},
	},
	{
		label: "Estimate",
		command: () => {
			//frappe.new_doc("Estimate");
			router.push("/estimate?new=true");
		},
	},
	{
		label: "Job",
		command: () => {
			//frappe.new_doc("Job");
			// modalStore.openModal("createJob");
			notifications.addWarning("Job creation coming soon!");
		},
	},
	{
		label: "Invoice",
		command: () => {
			// modalStore.openModal("createInvoice");
			notifications.addWarning("Invoice creation coming soon!");
		},
	},
	{
		label: "Warranty Claim",
		command: () => {
			// modalStore.openModal("createWarranty");
			notifications.addWarning("Warranty Claim creation coming soon!");
		},
	},
	{
		label: "Note",
		command: () => {
			notifications.addWarning("Sending Notes coming soon!");
		}
	},
]);

const categories = ref([
	{ name: "Home", icon: Home, url: "/" },
	{ name: "Calendar", icon: Calendar, url: "/calendar" },
	{
		name: "CRM",
		icon: Community,
		buttons: clientButtons,
	},
	// { name: "Bids", icon: Neighbourhood, url: "/schedule-bid" },
	{ name: "Estimates", icon: Calculator, url: "/estimates" },
	{ name: "Jobs", icon: Hammer, url: "/jobs" },
	{ name: "Payments/Invoices", icon: ReceiveDollars, url: "/invoices" },
	{ name: "Routes", icon: PathArrowSolid, url: "/routes" },
	{ name: "Time Sheets", icon: Clock, url: "/timesheets" },
	{ name: "Warranties", icon: HistoricShield, url: "/warranties" },
	{
		name: "Create New",
		icon: MultiplePagesPlus,
		buttons: createButtons,
	},
	// { name: "Development", icon: Developer, buttons: developmentButtons },
]);
const handleCategoryClick = (category) => {
	router.push(category.url);
};
</script>

<template>
	<div id="sidebar" class="sidebar" :class="{ collapsed: isCollapsed }">
		<!-- Toggle Button -->
		<button
			class="sidebar-toggle"
			@click="toggleSidebar"
			:title="isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'"
		>
			<component :is="isCollapsed ? NavArrowRight : NavArrowLeft" class="toggle-icon" />
		</button>

		<template v-for="category in categories">
			<template v-if="category.url">
				<button
					:class="[
						'sidebar-button',
						router.currentRoute.value.path === category.url ? 'active' : '',
					]"
					:key="`btn-${category.name}`"
					@click="handleCategoryClick(category)"
					:title="isCollapsed ? category.name : ''"
				>
					<component :is="category.icon" class="button-icon" />
					<span class="button-text" v-if="!isCollapsed">{{ category.name }}</span>
				</button>
			</template>
			<template v-else>
				<SidebarSpeedDial
					v-if="!isCollapsed"
					:key="`dial-${category.name}`"
					:icon="category.icon"
					:label="category.name"
					:items="category.buttons"
					:force-open="pendingOpen === category.name"
					@opened="pendingOpen = null"
				/>
				<button
					v-else
					class="sidebar-button"
					:key="`collapsed-${category.name}`"
					:title="category.name"
					@click="openSidebarAndDial(category)"
			>
					<component :is="category.icon" class="button-icon" />
				</button>
			</template>
		</template>
	</div>
</template>

<style lang="css">
.sidebar-button.active,
.sidebar-button.active:hover{
	background-color: var(--theme-primary);
	color: white;
	border-left: 3px solid var(--theme-primary-strong);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.sidebar-button:hover {
	background-color: var(--surface-hover);
	color: var(--theme-primary);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
	transform: translateX(1px);
}

.button-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-left: 10px;
	margin-right: 10px;
	opacity: 0.9;
	color: black;
}

.sidebar-button.active .button-icon,
.sidebar-button.active:hover .button-icon{
	opacity: 1;
	color: white;
}
.sidebar-button:hover .button-icon {
	opacity: 1;
	color: var(--theme-primary);
}

.button-text {
	flex: 1;
	text-align: left;
	font-size: 0.875rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 10px;
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.sidebar-button {
	border-radius: 6px;
	border: 1px solid transparent;
	background-color: var(--surface-card);
	color: var(--text-color);
	display: flex;
	width: 100%;
	align-items: center;
	min-height: 40px;
	height: 40px;
	padding: 0;
	box-sizing: border-box;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.speeddial-caret {
	margin-right: 10px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
}

.sidebar-button:active {
	transform: scale(0.97);
}

#sidebar {
	display: flex;
	flex-direction: column;
	width: 170px;
	min-width: 170px;
	align-self: flex-start;
	gap: 5px;
	background-color: var(--theme-surface-alt);
	padding: 10px;
	border-radius: 8px;
	margin-top: 10px;
	position: relative;
	border: 1px solid var(--surface-border);
	transition: all 0.3s ease;
}

#sidebar.collapsed {
	width: 56px;
	min-width: 56px;
}

.sidebar-toggle {
	position: absolute;
	top: 8px;
	right: -12px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--theme-primary);
	background-color: var(--surface-0);
	color: var(--theme-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	transition: all 0.2s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.sidebar-toggle:hover {
	background-color: var(--theme-primary);
	color: white;
	transform: scale(1.15);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.toggle-icon {
	color: black;
	width: 16px;
	height: 16px;
}

.toggle-icon:hover {
	color: white;
}

.collapsed .button-text {
	display: none;
}

.collapsed .sidebar-button {
	justify-content: center;
	padding: 0;
}

.collapsed .button-icon {
	margin: 0;
}

/* SpeedDial customization */
.sidebar-speeddial {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.sidebar-submenu {
	background-color: var(--surface-card);
	border: 1px solid var(--surface-border);
	border-radius: 6px;
	margin-top: 6px;
	padding: 6px 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.sidebar-sub-button {
	border: none;
	background: transparent;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 8px 10px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.85rem;
	color: var(--text-color);
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.sidebar-sub-button:hover {
	background-color: var(--surface-hover);
	transform: translateX(2px);
}

.sub-button-text {
	padding-left: 0;
}

.sidebar-accordion-enter-active,
.sidebar-accordion-leave-active {
	transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.2s ease;
}

.sidebar-accordion-enter-from,
.sidebar-accordion-leave-to {
	max-height: 0;
	opacity: 0;
	margin-top: 0;
}

.sidebar-accordion-enter-to,
.sidebar-accordion-leave-from {
	max-height: 600px;
	opacity: 1;
	margin-top: 6px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
	#sidebar {
		width: 140px;
		min-width: 140px;
		padding: 6px;
		gap: 3px;
	}

	.button-text {
		font-size: 0.8rem;
	}

	.sidebar-button {
		min-height: 36px;
		height: 36px;
	}

	.button-icon {
		width: 16px;
		height: 16px;
		margin-left: 8px;
		margin-right: 8px;
	}
}

@media (max-width: 480px) {
	#sidebar {
		width: 120px;
		min-width: 120px;
		padding: 5px;
		gap: 2px;
	}

	.sidebar-button {
		min-height: 34px;
		height: 34px;
	}

	.button-text {
		font-size: 0.75rem;
	}

	.button-icon {
		width: 14px;
		height: 14px;
		margin-left: 6px;
		margin-right: 6px;
	}
}
</style>
