import { getText } from "../../../../locales/index.js";
import { diffVenueWallStatusToneOverrides, getVenueWallStatusToneMap } from "./venueWallUtils.js";
import { ResourceWallControlPanelColorTab } from "./ResourceWallControlPanelColorTab.js";
import { ResourceWallControlPanelLayoutTab } from "./ResourceWallControlPanelLayoutTab.js";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
//#region src/components/pisellRecordBoard/shellFrame/ResourceWall/ResourceWallControlPanel.tsx
/** 将面板内草稿压成一次 `onApply` 负载（行列、秒数、色值等做安全钳位） */
const buildApplyPayload = (resourceIds, draft, boardingSoonBeforeMin) => ({
	resourceIds: [...resourceIds],
	layoutKey: draft.draftLayoutKey,
	customCols: Math.max(1, Math.min(6, draft.draftCustomCols)),
	customRows: Math.max(1, Math.min(6, draft.draftCustomRows)),
	pageDurationSec: Math.max(3, Math.min(60, Math.round(draft.draftPageSec))),
	occupiedCardColor: draft.draftOcc,
	availableCardColor: draft.draftAvail,
	boardingSoonBeforeMin: Math.max(1, Math.min(60, Math.round(boardingSoonBeforeMin))),
	statusToneOverrides: diffVenueWallStatusToneOverrides(draft.draftTones),
	heroMaxWidthRatio: Math.max(.4, Math.min(.8, draft.draftHeroRatio))
});
/**
* 资源墙管理台（Portal）：选资源、网格预设/自定义行列、翻页秒数、占用/空闲色、六态说明与色值；
* `onApply` 回传负载中含 `diffVenueWallStatusToneOverrides` 压缩结果。
* 源自 test `showAdmin` 对接；关闭（Close / Escape / 遮罩）时提交草稿并关闭。
*/
const ResourceWallControlPanel = ({ open, onClose, isDark, layoutPresets, layoutKey, customCols, customRows, pageDurationSec, occupiedCardColor, availableCardColor, boardingSoonBeforeMin, statusToneOverrides, selectedResourceIds, onApply, carouselPager, heroMaxWidthRatio: heroMaxWidthRatioProp = .6 }) => {
	const [adminTab, setAdminTab] = useState("resource_layout");
	const [draftLayoutKey, setDraftLayoutKey] = useState(layoutKey);
	const [draftCustomCols, setDraftCustomCols] = useState(customCols);
	const [draftCustomRows, setDraftCustomRows] = useState(customRows);
	const [draftPageSec, setDraftPageSec] = useState(pageDurationSec);
	const [draftOcc, setDraftOcc] = useState(occupiedCardColor);
	const [draftAvail, setDraftAvail] = useState(availableCardColor);
	const [draftHeroRatio, setDraftHeroRatio] = useState(heroMaxWidthRatioProp);
	const [draftTones, setDraftTones] = useState(() => getVenueWallStatusToneMap());
	/**
	* 弹层打开瞬间从 props 灌入草稿；effect **只依赖 open**，避免父组件每秒重绘（时钟等）时
	* 因 layoutKey 等引用变化再次执行 effect 把版式/配色草稿刷回 props。
	*/
	const draftBootstrapRef = useRef({
		layoutKey,
		customCols,
		customRows,
		pageDurationSec,
		occupiedCardColor,
		availableCardColor,
		statusToneOverrides,
		heroMaxWidthRatioProp
	});
	draftBootstrapRef.current = {
		layoutKey,
		customCols,
		customRows,
		pageDurationSec,
		occupiedCardColor,
		availableCardColor,
		statusToneOverrides,
		heroMaxWidthRatioProp
	};
	const hasOpenedRef = useRef(false);
	useEffect(() => {
		if (!open) {
			hasOpenedRef.current = false;
			return;
		}
		if (hasOpenedRef.current) return;
		hasOpenedRef.current = true;
		const b = draftBootstrapRef.current;
		setDraftLayoutKey(b.layoutKey);
		setDraftCustomCols(b.customCols);
		setDraftCustomRows(b.customRows);
		setDraftPageSec(b.pageDurationSec);
		setDraftOcc(b.occupiedCardColor);
		setDraftAvail(b.availableCardColor);
		setDraftHeroRatio(b.heroMaxWidthRatioProp);
		setDraftTones(getVenueWallStatusToneMap(b.statusToneOverrides));
		setAdminTab("resource_layout");
	}, [open]);
	const flushApplyAndClose = useCallback(() => {
		onApply(buildApplyPayload(selectedResourceIds, {
			draftLayoutKey,
			draftCustomCols,
			draftCustomRows,
			draftPageSec,
			draftOcc,
			draftAvail,
			draftTones,
			draftHeroRatio
		}, boardingSoonBeforeMin));
		onClose();
	}, [
		selectedResourceIds,
		draftLayoutKey,
		draftCustomCols,
		draftCustomRows,
		draftPageSec,
		draftOcc,
		draftAvail,
		draftTones,
		draftHeroRatio,
		boardingSoonBeforeMin,
		onApply,
		onClose
	]);
	/** Escape：与关闭按钮一致，提交当前草稿并关闭（非「取消放弃」语义） */
	useEffect(() => {
		if (!open) return;
		const onKey = (e) => {
			if (e.key === "Escape") flushApplyAndClose();
		};
		window.addEventListener("keydown", onKey);
		return () => window.removeEventListener("keydown", onKey);
	}, [open, flushApplyAndClose]);
	const shellBg = isDark ? "bg-slate-900 border-slate-800" : "bg-white border-slate-200";
	const divider = isDark ? "border-slate-800" : "border-slate-200";
	const headerText = isDark ? "text-slate-100" : "text-slate-900";
	const mutedText = isDark ? "text-slate-500" : "text-slate-400";
	const adminInputBg = isDark ? "bg-slate-900 border-slate-700 text-slate-100" : "bg-white border-slate-200 text-slate-700";
	const adminSectionBg = isDark ? "bg-slate-950 border-slate-800" : "bg-slate-50 border-slate-200";
	const cur = carouselPager.currentPage + 1;
	const tot = Math.max(1, carouselPager.totalPages);
	if (!open) return null;
	const modal = /* @__PURE__ */ React.createElement("div", {
		className: "fixed inset-0 z-50 bg-slate-900/40 backdrop-blur-[2px] p-4 md:p-8",
		onClick: flushApplyAndClose,
		role: "presentation"
	}, /* @__PURE__ */ React.createElement("div", {
		className: `mx-auto max-w-[900px] rounded-[30px] border shadow-[0_30px_80px_rgba(15,23,42,0.16)] overflow-hidden ${shellBg}`,
		onClick: (e) => e.stopPropagation(),
		role: "dialog",
		"aria-modal": "true"
	}, /* @__PURE__ */ React.createElement("div", { className: `border-b px-5 md:px-6 py-4 flex items-center justify-between gap-4 ${divider}` }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: `text-[11px] uppercase tracking-[0.24em] ${mutedText}` }, getText("pisell-resource-wall-control-eyebrow")), /* @__PURE__ */ React.createElement("div", { className: `mt-1 text-2xl font-semibold tracking-tight ${headerText}` }, getText("pisell-resource-wall-control-subtitle")), /* @__PURE__ */ React.createElement("div", { className: "mt-3 inline-flex items-center rounded-full border p-1 border-slate-200 bg-white" }, /* @__PURE__ */ React.createElement("button", {
		type: "button",
		onClick: () => setAdminTab("resource_layout"),
		className: `rounded-full px-3 py-1.5 text-sm transition ${adminTab === "resource_layout" ? "bg-slate-900 text-white" : "text-slate-600 hover:bg-slate-100"}`
	}, getText("pisell-resource-wall-tab-layout")), /* @__PURE__ */ React.createElement("button", {
		type: "button",
		onClick: () => setAdminTab("color"),
		className: `rounded-full px-3 py-1.5 text-sm transition ${adminTab === "color" ? "bg-slate-900 text-white" : "text-slate-600 hover:bg-slate-100"}`
	}, getText("pisell-resource-wall-tab-colors")))), /* @__PURE__ */ React.createElement("button", {
		type: "button",
		onClick: flushApplyAndClose,
		className: `rounded-full px-4 py-2 text-sm border ${isDark ? "border-slate-700 text-slate-300 hover:bg-slate-800" : "border-slate-200 text-slate-600 hover:bg-slate-50"}`
	}, getText("pisell-resource-wall-control-close"))), /* @__PURE__ */ React.createElement("div", { className: "p-5 md:p-6 space-y-6 max-h-[78vh] overflow-auto" }, adminTab === "resource_layout" ? /* @__PURE__ */ React.createElement(ResourceWallControlPanelLayoutTab, {
		adminSectionBg,
		adminInputBg,
		headerText,
		mutedText,
		layoutPresets,
		draftLayoutKey,
		setDraftLayoutKey,
		draftCustomCols,
		setDraftCustomCols,
		draftCustomRows,
		setDraftCustomRows,
		draftPageSec,
		setDraftPageSec,
		draftHeroRatio,
		setDraftHeroRatio,
		carouselCur: cur,
		carouselTot: tot,
		isDark
	}) : /* @__PURE__ */ React.createElement(ResourceWallControlPanelColorTab, {
		adminSectionBg,
		adminInputBg,
		headerText,
		mutedText,
		divider,
		draftOcc,
		setDraftOcc,
		draftAvail,
		setDraftAvail,
		draftTones,
		setDraftTones
	}))));
	return typeof document !== "undefined" ? createPortal(modal, document.body) : null;
};
//#endregion
export { ResourceWallControlPanel };
