import { useState } from "react";
import { NavLink, useLocation } from "react-router-dom";
import { Icon } from "../../icon";
import { ToolsBottomSheet } from "../tool/tools-bottom-sheet";
import { SpacesBottomSheet } from "./spaces-bottom-sheet";
import type { IconName } from "../../../utils/icons";

interface MobileNavProps {
	sessionCount?: number;
}

interface NavItem {
	to: string;
	label: string;
	icon: IconName;
	isGroup?: boolean;
	group?: "tools" | "spaces";
}

const MOBILE_NAV_ITEMS: NavItem[] = [
	{ to: "/", label: "Home", icon: "dashboard" },
	{
		to: "/spaces",
		label: "Spaces",
		icon: "projects",
		isGroup: true,
		group: "spaces",
	},
	{ to: "/sessions", label: "Sessions", icon: "terminal" },
	{
		to: "/tools",
		label: "Tools",
		icon: "settings",
		isGroup: true,
		group: "tools",
	},
	{ to: "/settings", label: "Settings", icon: "settings" },
];

export const MobileNav: React.FC<MobileNavProps> = ({ sessionCount }) => {
	const location = useLocation();
	const [toolsSheetOpen, setToolsSheetOpen] = useState(false);
	const [spacesSheetOpen, setSpacesSheetOpen] = useState(false);

	const isToolsActive =
		location.pathname === "/tool-workshop" ||
		location.pathname === "/config-profiles";

	const isSpacesActive =
		location.pathname.startsWith("/projects") ||
		location.pathname.startsWith("/workspaces");

	const handleNavClick = (item: NavItem) => {
		if (!item.isGroup) return;
		if (item.group === "spaces") {
			setSpacesSheetOpen(true);
		} else {
			setToolsSheetOpen(true);
		}
	};

	return (
		<>
			<nav
				className="mobile-nav"
				role="navigation"
				aria-label="Mobile navigation"
			>
				{MOBILE_NAV_ITEMS.map((item) => {
					if (item.isGroup) {
						const isActive =
							item.group === "spaces" ? isSpacesActive : isToolsActive;
						return (
							<button
								key={item.to}
								className={`mobile-nav-item ${isActive ? "active" : ""}`}
								onClick={() => handleNavClick(item)}
								type="button"
							>
								<div className="mobile-nav-icon-wrapper">
									<Icon name={item.icon} size="md" />
								</div>
								<span className="mobile-nav-label">{item.label}</span>
							</button>
						);
					}

					return (
						<NavLink
							key={item.to}
							to={item.to}
							className={({ isActive }) =>
								`mobile-nav-item ${isActive ? "active" : ""}`
							}
							end={item.to === "/"}
						>
							<div className="mobile-nav-icon-wrapper">
								<Icon name={item.icon} size="md" />
								{item.to === "/sessions" && sessionCount ? (
									<span className="mobile-nav-badge">{sessionCount}</span>
								) : null}
							</div>
							<span className="mobile-nav-label">{item.label}</span>
						</NavLink>
					);
				})}
			</nav>

			<ToolsBottomSheet
				isOpen={toolsSheetOpen}
				onClose={() => setToolsSheetOpen(false)}
			/>
			<SpacesBottomSheet
				isOpen={spacesSheetOpen}
				onClose={() => setSpacesSheetOpen(false)}
			/>
		</>
	);
};
