"use client";

import { Menu, X } from "lucide-react";
import { type ReactNode, useEffect, useState } from "react";

export function AdminMobileWrapper({
	sidebar,
	children,
}: {
	sidebar: ReactNode;
	children: ReactNode;
}) {
	const [open, setOpen] = useState(false);

	useEffect(() => {
		if (!open) return;
		const handler = (e: KeyboardEvent) => {
			if (e.key === "Escape") setOpen(false);
		};
		document.addEventListener("keydown", handler);
		return () => document.removeEventListener("keydown", handler);
	}, [open]);

	return (
		<div className="min-h-screen bg-[var(--admin-canvas)] flex flex-col lg:flex-row">
			{/* Mobile header */}
			<div
				className={`lg:hidden sticky top-0 flex items-center gap-3 px-4 py-3 border-b ${
					open ? "z-30" : "z-50"
				}`}
				style={{
					backgroundColor: "var(--admin-sidebar-background)",
					borderColor: "var(--admin-border)",
				}}
			>
				<button
					type="button"
					onClick={() => setOpen(!open)}
					className="flex items-center justify-center w-9 h-9 rounded-lg"
					style={{ color: "var(--admin-text-muted)" }}
				>
					{open ? <X size={18} /> : <Menu size={18} />}
				</button>
				<span
					className="text-sm font-bold"
					style={{ color: "var(--admin-sidebar-text-readable)" }}
				>
					Admin Panel
				</span>
			</div>

			{/* Backdrop */}
			{open && (
				<div
					className="fixed inset-0 z-40 lg:hidden"
					onClick={() => setOpen(false)}
					style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
				/>
			)}

			{/* Sidebar */}
			<div
				className={`fixed inset-y-0 left-0 z-50 w-[260px] lg:!relative lg:!translate-x-0 lg:!min-h-screen ${
					open ? "translate-x-0" : "-translate-x-full"
				}`}
				style={{ transition: "transform 300ms ease-in-out" }}
			>
				{sidebar}
			</div>

			{/* Content */}
			<div className="flex flex-col flex-1 min-w-0">{children}</div>
		</div>
	);
}