"use client";

import { useRouter } from "next/navigation";
import type React from "react";

interface MenuIconItem {
	id: string;
	title: string;
	gradient: string;
	shadowColor: string;
	icon: React.ReactNode;
	href: string;
}

const MENU_ITEMS: MenuIconItem[] = [
	{
		id: "incoming",
		title: "입고",
		gradient: "linear-gradient(135deg,#3b82f6,#1d4ed8)",
		shadowColor: "rgba(59,130,246,.3)",
		icon: (
			<svg
				className="w-7 h-7 sm:w-8 sm:h-8 text-white"
				fill="none"
				stroke="currentColor"
				strokeWidth={1.5}
				viewBox="0 0 24 24"
			>
				<path
					strokeLinecap="round"
					strokeLinejoin="round"
					d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
				/>
			</svg>
		),
		href: "/pop/inbound",
	},
	{
		id: "outgoing",
		title: "출고",
		gradient: "linear-gradient(135deg,#22c55e,#15803d)",
		shadowColor: "rgba(34,197,94,.3)",
		icon: (
			<svg
				className="w-7 h-7 sm:w-8 sm:h-8 text-white"
				fill="none"
				stroke="currentColor"
				strokeWidth={1.5}
				viewBox="0 0 24 24"
			>
				<path
					strokeLinecap="round"
					strokeLinejoin="round"
					d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0H6.75m11.25 0h2.625c.621 0 1.125-.504 1.125-1.125v-4.875c0-.621-.504-1.125-1.125-1.125H17.25m-13.5-.375V6.375c0-.621.504-1.125 1.125-1.125h7.5c.621 0 1.125.504 1.125 1.125v7.125"
				/>
			</svg>
		),
		href: "/pop/outbound",
	},
	{
		id: "production",
		title: "생산",
		gradient: "linear-gradient(135deg,#f59e0b,#d97706)",
		shadowColor: "rgba(245,158,11,.3)",
		icon: (
			<svg
				className="w-7 h-7 sm:w-8 sm:h-8 text-white"
				fill="none"
				stroke="currentColor"
				strokeWidth={1.5}
				viewBox="0 0 24 24"
			>
				<path
					strokeLinecap="round"
					strokeLinejoin="round"
					d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
				/>
				<path
					strokeLinecap="round"
					strokeLinejoin="round"
					d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
				/>
			</svg>
		),
		href: "/pop/production",
	},
	{
		id: "quality",
		title: "품질",
		gradient: "linear-gradient(135deg,#ef4444,#b91c1c)",
		shadowColor: "rgba(239,68,68,.3)",
		icon: (
			<svg
				className="w-7 h-7 sm:w-8 sm:h-8 text-white"
				fill="none"
				stroke="currentColor"
				strokeWidth={1.5}
				viewBox="0 0 24 24"
			>
				<path
					strokeLinecap="round"
					strokeLinejoin="round"
					d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
				/>
			</svg>
		),
		href: "/pop/quality",
	},
	{
		id: "equipment",
		title: "설비",
		gradient: "linear-gradient(135deg,#8b5cf6,#6d28d9)",
		shadowColor: "rgba(139,92,246,.3)",
		icon: (
			<svg
				className="w-7 h-7 sm:w-8 sm:h-8 text-white"
				fill="none"
				stroke="currentColor"
				strokeWidth={1.5}
				viewBox="0 0 24 24"
			>
				<path
					strokeLinecap="round"
					strokeLinejoin="round"
					d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
				/>
			</svg>
		),
		href: "/pop/equipment",
	},
	{
		id: "inventory",
		title: "재고",
		gradient: "linear-gradient(135deg,#06b6d4,#0e7490)",
		shadowColor: "rgba(6,182,212,.3)",
		icon: (
			<svg
				className="w-7 h-7 sm:w-8 sm:h-8 text-white"
				fill="none"
				stroke="currentColor"
				strokeWidth={1.5}
				viewBox="0 0 24 24"
			>
				<path
					strokeLinecap="round"
					strokeLinejoin="round"
					d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
				/>
			</svg>
		),
		href: "/pop/inventory",
	},
	// 작업지시, 생산실적은 생산관리(/pop/production) 메뉴 안으로 이동
	{
		id: "safety",
		title: "안전관리",
		gradient: "linear-gradient(135deg,#f97316,#c2410c)",
		shadowColor: "rgba(249,115,22,.3)",
		icon: (
			<svg
				className="w-7 h-7 sm:w-8 sm:h-8 text-white"
				fill="none"
				stroke="currentColor"
				strokeWidth={1.5}
				viewBox="0 0 24 24"
			>
				<path
					strokeLinecap="round"
					strokeLinejoin="round"
					d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z"
				/>
			</svg>
		),
		href: "/pop/screens/safety",
	},
];

export function MenuIcons() {
	const router = useRouter();

	const handleClick = (item: MenuIconItem) => {
		if (item.href === "#") {
			alert(`${item.title} 화면은 준비 중입니다.`);
		} else {
			router.push(item.href);
		}
	};

	return (
		<section>
			<h2 className="text-xl sm:text-[22px] font-bold text-gray-900 tracking-tight mb-4">
				메뉴
			</h2>
			<div className="flex flex-wrap justify-center gap-x-6 gap-y-5 sm:gap-x-8 sm:gap-y-6 lg:gap-x-10">
				{MENU_ITEMS.map((item) => (
					<div
						key={item.id}
						className="flex flex-col items-center gap-2 w-16 sm:w-20 cursor-pointer group"
						style={{ WebkitTapHighlightColor: "transparent" }}
						onClick={() => handleClick(item)}
					>
						<div
							className="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl flex items-center justify-center transition-transform duration-150 group-hover:scale-110 group-active:scale-[0.93]"
							style={{
								background: item.gradient,
								boxShadow: `0 4px 12px ${item.shadowColor}`,
							}}
						>
							{item.icon}
						</div>
						<span className="text-xs sm:text-sm font-semibold text-gray-700">
							{item.title}
						</span>
					</div>
				))}
			</div>
		</section>
	);
}