import { _objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { tCal } from "../calendarI18n.js";
import { formatHourLabel, getBookingDetailData } from "../utils/bookingCalendarDateUtils.js";
import React from "react";
//#region src/components/pisellRecordBoard/shellFrame/Calendar/modal/MoveConfirmModal.tsx
/** 拖拽改期后的确认弹窗（Court / 日期 / 起止时间） */
function MoveConfirmModal({ moveConfirm, moveDraft, setMoveDraft, panelRef, isLight, courts, visibleCourts, hourSlots, isBusinessHour, firstTimelineHour, endTimelineExclusive, onConfirm, onClose }) {
	var _detail$customer, _detail$customer2, _detail$customer3, _courts$find, _courts$find2, _moveDraft$targetHour;
	if (!moveConfirm) return null;
	const detail = getBookingDetailData(moveConfirm.item, courts);
	const currentCustomer = {
		name: ((_detail$customer = detail.customer) === null || _detail$customer === void 0 ? void 0 : _detail$customer.name) || detail.headerSummary.customerName,
		phone: ((_detail$customer2 = detail.customer) === null || _detail$customer2 === void 0 ? void 0 : _detail$customer2.phone) || "",
		email: ((_detail$customer3 = detail.customer) === null || _detail$customer3 === void 0 ? void 0 : _detail$customer3.email) || ""
	};
	const originalCourtName = ((_courts$find = courts.find((c) => c.id === moveConfirm.item.courtId)) === null || _courts$find === void 0 ? void 0 : _courts$find.name) || detail.headerSummary.resourceLabel || tCal("pisell2.recordBoard.calendar.move.courtFallback");
	const nextCourtName = ((_courts$find2 = courts.find((c) => c.id === ((moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetCourtId) || moveConfirm.targetCourtId))) === null || _courts$find2 === void 0 ? void 0 : _courts$find2.name) || tCal("pisell2.recordBoard.calendar.move.courtFallback");
	const originalDate = moveConfirm.item.date;
	const originalStart = formatHourLabel(moveConfirm.item.startHour);
	const originalEnd = formatHourLabel(moveConfirm.item.endHour);
	const nextDate = (moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetDate) || moveConfirm.targetDate;
	const nextStartHour = (_moveDraft$targetHour = moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetHour) !== null && _moveDraft$targetHour !== void 0 ? _moveDraft$targetHour : moveConfirm.targetHour;
	const duration = moveConfirm.item.endHour - moveConfirm.item.startHour;
	const nextEndHour = nextStartHour + duration;
	const changed = originalDate !== nextDate || moveConfirm.item.courtId !== ((moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetCourtId) || moveConfirm.targetCourtId) || moveConfirm.item.startHour !== nextStartHour;
	const isDragScenario = moveConfirm.item.date !== moveConfirm.targetDate || moveConfirm.item.startHour !== moveConfirm.targetHour || moveConfirm.item.courtId !== moveConfirm.targetCourtId;
	const slotDisabledLabel = (hour) => tCal("pisell2.recordBoard.calendar.move.slotDisabled", { time: formatHourLabel(hour) });
	return /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 z-[72] bg-black/45 backdrop-blur-sm flex items-center justify-center p-4" }, /* @__PURE__ */ React.createElement("div", {
		ref: panelRef,
		className: `w-full max-w-[980px] rounded-3xl border p-6 shadow-2xl ${isLight ? "theme-panel theme-border soft-shadow" : "border-zinc-700 bg-[#121217]"}`
	}, /* @__PURE__ */ React.createElement("div", { className: "text-[22px] font-semibold" }, tCal("pisell2.recordBoard.calendar.move.title")), /* @__PURE__ */ React.createElement("div", { className: `mt-2 text-sm ${isLight ? "theme-text-muted" : "text-zinc-400"}` }, tCal("pisell2.recordBoard.calendar.move.subtitle")), /* @__PURE__ */ React.createElement("div", { className: "mt-5 space-y-4" }, /* @__PURE__ */ React.createElement("div", { className: `rounded-3xl border p-5 ${isLight ? "theme-panel-alt theme-border" : "border-zinc-700 bg-[#171820]"}` }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: `text-xs uppercase tracking-[0.14em] ${isLight ? "theme-text-muted" : "text-zinc-500"}` }, tCal("pisell2.recordBoard.calendar.move.customer")), /* @__PURE__ */ React.createElement("div", { className: `mt-3 text-[20px] font-semibold ${isLight ? "theme-text" : "text-white"}` }, currentCustomer.name), /* @__PURE__ */ React.createElement("div", { className: `mt-2 text-sm ${isLight ? "theme-text-muted" : "text-zinc-400"}` }, currentCustomer.phone || tCal("pisell2.recordBoard.calendar.move.noPhone")), /* @__PURE__ */ React.createElement("div", { className: `mt-1 text-sm ${isLight ? "theme-text-muted" : "text-zinc-400"}` }, currentCustomer.email || tCal("pisell2.recordBoard.calendar.move.noEmail")))), /* @__PURE__ */ React.createElement("div", { className: "grid min-w-0 gap-4 md:grid-cols-2" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("label", { className: `mb-2 block text-sm ${isLight ? "theme-text-muted" : "text-zinc-400"}` }, tCal("pisell2.recordBoard.calendar.move.court")), /* @__PURE__ */ React.createElement("select", {
		value: (moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetCourtId) || moveConfirm.targetCourtId,
		onChange: (e) => setMoveDraft((prev) => _objectSpread2(_objectSpread2({}, prev || {}), {}, { targetCourtId: e.target.value })),
		className: `min-w-0 w-full rounded-2xl px-4 py-4 outline-none ${isLight ? "theme-input theme-text" : "border border-zinc-700 bg-[#171820] text-white"}`
	}, visibleCourts.map((court) => /* @__PURE__ */ React.createElement("option", {
		key: court.id,
		value: court.id
	}, court.name)))), /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("label", { className: `mb-2 block text-sm ${isLight ? "theme-text-muted" : "text-zinc-400"}` }, tCal("pisell2.recordBoard.calendar.move.newDate")), /* @__PURE__ */ React.createElement("input", {
		type: "date",
		value: (moveDraft === null || moveDraft === void 0 ? void 0 : moveDraft.targetDate) || moveConfirm.targetDate,
		onChange: (e) => setMoveDraft((prev) => _objectSpread2(_objectSpread2({}, prev || {}), {}, { targetDate: e.target.value })),
		className: `min-w-0 w-full rounded-2xl py-4 pl-4 pr-11 outline-none [color-scheme:dark] [&::-webkit-calendar-picker-indicator]:ml-auto [&::-webkit-calendar-picker-indicator]:mr-1 ${isLight ? "theme-input theme-text [color-scheme:light]" : "border border-zinc-700 bg-[#171820] text-white"}`
	}))), /* @__PURE__ */ React.createElement("div", { className: "grid min-w-0 gap-4 md:grid-cols-2" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("label", { className: `mb-2 block text-sm ${isLight ? "theme-text-muted" : "text-zinc-400"}` }, tCal("pisell2.recordBoard.calendar.move.newStartTime")), /* @__PURE__ */ React.createElement("select", {
		value: nextStartHour,
		onChange: (e) => setMoveDraft((prev) => _objectSpread2(_objectSpread2({}, prev || {}), {}, { targetHour: Number(e.target.value) })),
		className: `min-w-0 w-full rounded-2xl px-4 py-4 outline-none ${isLight ? "theme-input theme-text" : "border border-zinc-700 bg-[#171820] text-white"}`
	}, hourSlots.filter(isBusinessHour).map((hour) => {
		const disabled = hour + duration > endTimelineExclusive;
		return /* @__PURE__ */ React.createElement("option", {
			key: hour,
			value: hour,
			disabled
		}, disabled ? slotDisabledLabel(hour) : formatHourLabel(hour));
	}))), /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("label", { className: `mb-2 block text-sm ${isLight ? "theme-text-muted" : "text-zinc-400"}` }, tCal("pisell2.recordBoard.calendar.move.newEndTime")), /* @__PURE__ */ React.createElement("select", {
		value: nextEndHour,
		onChange: (e) => {
			const nextEnd = Number(e.target.value);
			setMoveDraft((prev) => _objectSpread2(_objectSpread2({}, prev || {}), {}, { targetHour: nextEnd - duration }));
		},
		className: `min-w-0 w-full rounded-2xl px-4 py-4 outline-none ${isLight ? "theme-input theme-text" : "border border-zinc-700 bg-[#171820] text-white"}`
	}, hourSlots.filter(isBusinessHour).map((hour) => {
		const disabled = hour - duration < firstTimelineHour;
		return /* @__PURE__ */ React.createElement("option", {
			key: `end-${hour}`,
			value: hour,
			disabled
		}, disabled ? slotDisabledLabel(hour) : formatHourLabel(hour));
	})))), changed && /* @__PURE__ */ React.createElement("div", { className: `rounded-3xl border p-5 ${isLight ? "theme-panel-alt theme-border" : "border-zinc-700 bg-[#171820]"}` }, /* @__PURE__ */ React.createElement("div", { className: `text-xs uppercase tracking-[0.14em] ${isLight ? "theme-text-muted" : "text-zinc-500"}` }, tCal("pisell2.recordBoard.calendar.move.previousInfo")), /* @__PURE__ */ React.createElement("div", { className: "mt-3 grid gap-3 md:grid-cols-2" }, /* @__PURE__ */ React.createElement("div", { className: `rounded-2xl p-4 ${isLight ? "theme-panel" : "bg-[#101117]"}` }, /* @__PURE__ */ React.createElement("div", { className: `text-xs ${isLight ? "theme-text-muted" : "text-zinc-500"}` }, tCal("pisell2.recordBoard.calendar.move.original")), /* @__PURE__ */ React.createElement("div", { className: `mt-2 text-sm ${isLight ? "theme-text-soft" : "text-zinc-300"}` }, originalCourtName), /* @__PURE__ */ React.createElement("div", { className: `mt-1 text-sm ${isLight ? "theme-text-soft" : "text-zinc-300"}` }, originalDate), /* @__PURE__ */ React.createElement("div", { className: `mt-1 text-sm ${isLight ? "theme-text-soft" : "text-zinc-300"}` }, originalStart, " - ", originalEnd)), /* @__PURE__ */ React.createElement("div", { className: `rounded-2xl p-4 ${isLight ? "theme-brand-surface border border-[var(--brand-light)]" : "bg-violet-600/10 border border-violet-500/30"}` }, /* @__PURE__ */ React.createElement("div", { className: `text-xs ${isLight ? "theme-brand-text" : "text-violet-300"}` }, isDragScenario ? tCal("pisell2.recordBoard.calendar.move.dropTarget") : tCal("pisell2.recordBoard.calendar.move.updated")), /* @__PURE__ */ React.createElement("div", { className: `mt-2 text-sm ${isLight ? "theme-text" : "text-white"}` }, nextCourtName), /* @__PURE__ */ React.createElement("div", { className: `mt-1 text-sm ${isLight ? "theme-text" : "text-white"}` }, nextDate), /* @__PURE__ */ React.createElement("div", { className: `mt-1 text-sm ${isLight ? "theme-text" : "text-white"}` }, formatHourLabel(nextStartHour), " -", " ", formatHourLabel(nextEndHour)))))), /* @__PURE__ */ React.createElement("div", { className: "mt-6 flex justify-end gap-3" }, /* @__PURE__ */ React.createElement("button", {
		type: "button",
		onClick: onClose,
		className: `rounded-2xl px-5 py-3 ${isLight ? "btn-neutral" : "border border-zinc-700 text-zinc-300"}`
	}, tCal("pisell2.recordBoard.calendar.common.cancel")), /* @__PURE__ */ React.createElement("button", {
		type: "button",
		onClick: onConfirm,
		className: "rounded-2xl bg-violet-600 px-6 py-3 font-semibold text-white"
	}, tCal("pisell2.recordBoard.calendar.move.confirm")))));
}
//#endregion
export { MoveConfirmModal };
