import { __ } from "@wordpress/i18n";
import React, { useEffect, useRef, useState } from "react";
import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/Tooltip";
import { Info } from "lucide-react";
import { getContentGateData } from "../../../utils/localized-data";
import MessageAction from "./MessageAction";
import { Action, LogicGroup, Rule } from "../../../types";
import { hasAdvancedLogic } from "../../../utils/advanced-logic-helper";
import saveRuleWithCollectiveData from "../../../utils/rule-save-helper";
import RedirectAction from "./RedirectAction";
import LocalPageAction from "./LocalPageAction";
import { Button } from "../../ui/Button";
import { Switch } from "../../ui/Switch";
import AdvancedLogicWarningModal from "./AdvancedLogicWarningModal";

type Props = {
	rule: Rule;
	onRuleUpdate?: (updatedRule: Rule) => void;
	onGoBack: () => void;
	isToggling: boolean;
	onSavingChange?: (isSaving: boolean) => void;
};

type ActionState = {
	actionType: string;
	message: string;
	redirectUrl: string;
	localPage: string;
	shortcodeTag: string;
	shortcodeArgs: string;
	useGlobalMessage: boolean;
};

const SettingsTabContent = ({
	rule,
	onRuleUpdate,
	onGoBack,
	isToggling = false,
	onSavingChange,
}: Props) => {
	const [actionType, setActionType] = useState("message");
	const [message, setMessage] = useState("");
	const [redirectUrl, setRedirectUrl] = useState("");
	const [localPage, setLocalPage] = useState("");
	const [shortcodeTag, setShortcodeTag] = useState("");
	const [shortcodeArgs, setShortcodeArgs] = useState("");
	const [isSaving, setIsSaving] = useState(false);
	const [useGlobalMessage, setUseGlobalMessage] = useState(true);
	const [isAdvancedLogicEnabled, setIsAdvancedLogicEnabled] = useState(
		Boolean(rule.is_advanced_logic_enabled || false),
	);
	const [showWarningModal, setShowWarningModal] = useState(false);
	const editorId = `contentgate-action-message-editor-${rule.id}`;

	// Initialize from rule actions
	useEffect(() => {
		const ruleData = rule.content || rule;
		const ruleActions = ruleData.actions || rule.actions || [];

		if (ruleActions && ruleActions.length > 0) {
			const action = ruleActions[0];
			let normalizedType = "message"; // Default to message
			// For migrated custom rules, always use message type (handled above)
			if (action.type) {
				normalizedType = action.type;
				if (normalizedType === "redirect_to_local_page") {
					normalizedType = "local_page";
				}
				setActionType(normalizedType);
			}

			// Helper function to get default message
			const getDefaultMessage = () => {
				const defaultMessage = getContentGateData(
					"restriction_global_message",
					"",
				);
				return defaultMessage;
			};

			// For regular custom rules with message action, handle global/custom message option
			if (normalizedType === "message") {
				if (action.message) {
					try {
						const decodedMessage = decodeURIComponent(
							action.message,
						);
						if (decodedMessage.trim() !== "") {
							setMessage(decodedMessage);
							setUseGlobalMessage(false);
						} else {
							setMessage("");
							setUseGlobalMessage(true);
						}
					} catch (e) {
						if (action.message.trim() !== "") {
							setMessage(action.message);
							setUseGlobalMessage(false);
						} else {
							setMessage("");
							setUseGlobalMessage(true);
						}
					}
				} else {
					setMessage("");
					setUseGlobalMessage(true);
				}
			} else {
				// For non-message actions, reset useGlobalMessage
				setUseGlobalMessage(true);
				if (action.message) {
					try {
						const decodedMessage = decodeURIComponent(
							action.message,
						);
						if (decodedMessage.trim() !== "") {
							setMessage(decodedMessage);
						} else {
							setMessage("");
						}
					} catch (e) {
						if (action.message.trim() !== "") {
							setMessage(action.message);
						} else {
							setMessage("");
						}
					}
				} else {
					setMessage("");
				}
			}
			if (action.redirect_url) {
				setRedirectUrl(action.redirect_url);
			} else {
				setRedirectUrl("");
			}
			if (action.local_page) {
				setLocalPage(action.local_page);
			} else {
				setLocalPage("");
			}
			if (action.shortcode) {
				if (action.shortcode.tag) {
					setShortcodeTag(action.shortcode.tag);
				} else {
					setShortcodeTag("");
				}
				if (action.shortcode.args) {
					setShortcodeArgs(action.shortcode.args);
				} else {
					setShortcodeArgs("");
				}
			} else {
				setShortcodeTag("");
				setShortcodeArgs("");
			}
		} else {
			setActionType("message");
			setMessage("");
			setUseGlobalMessage(true);
			setRedirectUrl("");
			setLocalPage("");
			setShortcodeTag("");
			setShortcodeArgs("");
		}
	}, [rule.id, rule.content, rule.actions]);

	useEffect(() => {
		setIsAdvancedLogicEnabled(
			Boolean(rule.is_advanced_logic_enabled || false),
		);
	}, [rule.id, rule.is_advanced_logic_enabled]);

	// Notify parent when saving state changes
	useEffect(() => {
		if (onSavingChange) {
			onSavingChange(isSaving);
		}
	}, [isSaving, onSavingChange]);

	useEffect(() => {
		// For regular custom rules, when action type changes to message, initialize useGlobalMessage
		if (actionType === "message") {
			const ruleData = rule.content || rule;
			const ruleActions = ruleData.actions || rule.actions || [];
			if (
				ruleActions &&
				ruleActions.length > 0 &&
				ruleActions[0].message &&
				ruleActions[0].message.trim() !== ""
			) {
				setUseGlobalMessage(false);
			} else {
				setUseGlobalMessage(true);
			}
		}
	}, [actionType, rule.content, rule.actions]);

	const handleActionTypeChange = (
		e: React.ChangeEvent<HTMLSelectElement>,
	) => {
		const newType = e.target.value;
		setActionType(newType);
	};

	const handleAdvancedLogicToggle = () => {
		const newValue = !isAdvancedLogicEnabled;

		if (!newValue) {
			const logicMap: LogicGroup =
				rule.logic_map ||
				(rule.content && rule.content.logic_map) ||
				null;
			if (hasAdvancedLogic(logicMap)) {
				setShowWarningModal(true);
				return;
			}
		}

		setIsAdvancedLogicEnabled(newValue);

		if (onRuleUpdate) {
			const updatedRule = {
				...rule,
				is_advanced_logic_enabled: newValue,
				content: {
					...(rule.content || {}),
					is_advanced_logic_enabled: newValue,
				},
			};
			onRuleUpdate(updatedRule);
		}
	};

	// Build actionData from current state
	const buildActionDataFromState = () => {
		const ruleData = rule.content || rule;
		const ruleActions = ruleData.actions || rule.actions || [];

		let effectiveActionType = actionType;

		let currentMessage = message;
		if (
			effectiveActionType === "message" &&
			typeof window.wp !== "undefined" &&
			window.wp?.editor
		) {
			if (
				document.getElementById(editorId) &&
				window.tinymce &&
				window.tinymce.get(editorId)
			) {
				currentMessage = window.wp.editor.getContent(editorId);
			}
		}

		const accessControl =
			rule.access_control ||
			ruleData.access_control ||
			(ruleActions &&
				ruleActions.length > 0 &&
				ruleActions[0].access_control) ||
			"restrict";

		let actionData: Action = {
			id:
				ruleActions && ruleActions.length > 0
					? ruleActions[0].id
					: `x${Date.now()}`,
			type: effectiveActionType,
			access_control: accessControl,
		};

		switch (effectiveActionType) {
			case "message":
				actionData.label = __("Show Message", "contentgate");
				if (useGlobalMessage) {
					actionData.message = "";
				} else {
					const defaultMessage = getContentGateData(
						"restriction_global_message",
						"",
					);
					actionData.message = currentMessage || defaultMessage;
				}
				actionData.redirect_url = "";
				actionData.local_page = "";
				actionData.shortcode = { tag: "", args: "" };
				break;
			case "redirect":
				actionData.label = __("Redirect", "contentgate");
				actionData.message = "";
				actionData.redirect_url = redirectUrl;
				actionData.local_page = "";
				actionData.shortcode = { tag: "", args: "" };
				break;
			case "local_page":
				actionData.type = "redirect_to_local_page";
				actionData.label = __(
					"Redirect to a Local Page",
					"contentgate",
				);
				actionData.message = "";
				actionData.redirect_url = "";
				actionData.local_page = localPage;
				actionData.shortcode = { tag: "", args: "" };
				break;
			case "shortcode":
				actionData.label = __(
					"Render Shortcode (Legacy)",
					"contentgate",
				);
				actionData.message = "";
				actionData.redirect_url = "";
				actionData.local_page = "";
				actionData.shortcode = {
					tag: shortcodeTag,
					args: shortcodeArgs,
				};
				break;
		}

		return { actionData, accessControl };
	};

	// Sync state to rule prop when action state changes
	const hasInitialized = useRef(false);
	const prevActionState = useRef<ActionState | null>(null);

	useEffect(() => {
		if (!hasInitialized.current) {
			hasInitialized.current = true;
			prevActionState.current = {
				actionType,
				message,
				redirectUrl,
				localPage,
				shortcodeTag,
				shortcodeArgs,
				useGlobalMessage,
			};
			return;
		}

		const currentState = {
			actionType,
			message,
			redirectUrl,
			localPage,
			shortcodeTag,
			shortcodeArgs,
			useGlobalMessage,
		};

		const stateChanged =
			!prevActionState.current ||
			prevActionState.current.actionType !== currentState.actionType ||
			prevActionState.current.message !== currentState.message ||
			prevActionState.current.redirectUrl !== currentState.redirectUrl ||
			prevActionState.current.localPage !== currentState.localPage ||
			prevActionState.current.shortcodeTag !==
				currentState.shortcodeTag ||
			prevActionState.current.shortcodeArgs !==
				currentState.shortcodeArgs ||
			prevActionState.current.useGlobalMessage !==
				currentState.useGlobalMessage;

		if (stateChanged) {
			let effectiveActionType = actionType;

			const { actionData, accessControl: syncAccessControl } =
				buildActionDataFromState();

			const currentLogicMap = rule.logic_map ||
				(rule.content && rule.content.logic_map) || {
					type: "group",
					id: `x${Date.now()}`,
					conditions: [],
				};
			const currentTargetContents =
				rule.target_contents ||
				(rule.content && rule.content.target_contents) ||
				[];

			if (onRuleUpdate) {
				const updatedRule = {
					...rule,
					access_control: syncAccessControl,
					actions: [actionData],
					content: {
						...(rule.content || {}),
						access_control: syncAccessControl,
						logic_map: currentLogicMap,
						target_contents: currentTargetContents,
						actions: [actionData],
					},
				};
				onRuleUpdate(updatedRule);
			}

			prevActionState.current = currentState;
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [
		actionType,
		message,
		redirectUrl,
		localPage,
		shortcodeTag,
		shortcodeArgs,
		useGlobalMessage,
	]);

	const handleSave = async () => {
		setIsSaving(true);
		try {
			const ruleData = rule.content || rule;
			const ruleActions = ruleData.actions || rule.actions || [];

			let effectiveActionType = actionType;

			let currentMessage = message;
			if (
				effectiveActionType === "message" &&
				typeof window.wp !== "undefined" &&
				window.wp?.editor
			) {
				if (
					document.getElementById(editorId) &&
					window.tinymce &&
					window.tinymce.get(editorId)
				) {
					currentMessage = window.wp.editor.getContent(editorId);
				}
			}

			const accessControl =
				rule.access_control ||
				ruleData.access_control ||
				(ruleActions &&
					ruleActions.length > 0 &&
					ruleActions[0].access_control) ||
				"restrict";

			let actionData: Action = {
				id:
					ruleActions && ruleActions.length > 0
						? ruleActions[0].id
						: `x${Date.now()}`,
				type: effectiveActionType,
				access_control: accessControl,
			};

			switch (effectiveActionType) {
				case "message":
					actionData.label = __("Show Message", "contentgate");
					if (useGlobalMessage) {
						actionData.message = "";
					} else {
						const defaultMessage = getContentGateData(
							"restriction_global_message",
							"",
						);
						actionData.message = currentMessage || defaultMessage;
					}
					actionData.redirect_url = "";
					actionData.local_page = "";
					actionData.shortcode = { tag: "", args: "" };
					break;
				case "redirect":
					actionData.label = __("Redirect", "contentgate");
					actionData.message = "";
					actionData.redirect_url = redirectUrl;
					actionData.local_page = "";
					actionData.shortcode = { tag: "", args: "" };
					break;
				case "local_page":
					actionData.type = "redirect_to_local_page";
					actionData.label = __(
						"Redirect to a Local Page",
						"contentgate",
					);
					actionData.message = "";
					actionData.redirect_url = "";
					actionData.local_page = localPage;
					actionData.shortcode = { tag: "", args: "" };
					break;
				case "shortcode":
					actionData.label = __(
						"Render Shortcode (Legacy)",
						"contentgate",
					);
					actionData.message = "";
					actionData.redirect_url = "";
					actionData.local_page = "";
					actionData.shortcode = {
						tag: shortcodeTag,
						args: shortcodeArgs,
					};
					break;
			}

			await saveRuleWithCollectiveData({
				rule: {
					...rule,
					is_advanced_logic_enabled: isAdvancedLogicEnabled,
					content: {
						...(rule.content || {}),
						is_advanced_logic_enabled: isAdvancedLogicEnabled,
					},
				},
				onRuleUpdate,
				settingsData: {
					actionData,
					accessControl,
					isAdvancedLogicEnabled,
				},
			});
		} catch (error) {
			// Error handled in saveRuleWithCollectiveData
		} finally {
			setIsSaving(false);
		}
	};

	return (
		<div className="contentgate-rule-settings-panel flex flex-col gap-6">
			<div className="contentgate-label-input-pair contentgate-rule-action flex gap-6 items-start md:items-center flex-col md:flex-row">
				<label className="contentgate-label-container flex items-center gap-2 max-w-full md:max-w-[300px] w-full">
					<span className="contentgate-target-content-label text-sm font-medium">
						{__("Action", "contentgate")}
					</span>
					<Tooltip>
						<TooltipTrigger>
							<Info size={14} />
						</TooltipTrigger>
						<TooltipContent className="z-[9999]" side="bottom">
							<p>
								{__(
									"Action to perform for restricting the specified contents",
									"contentgate",
								)}
							</p>
						</TooltipContent>
					</Tooltip>
				</label>
				<div className="contentgate-input-container flex-1 w-full md:w-auto">
					<select
						className="contentgate-action-type-select contentgate-condition-value-input !text-sm !min-h-[38px] !max-w-full w-full text-black-450 hover:!text-black-450 !border-border focus:!shadow-none focus:!outline-none focus:!border-primary"
						value={actionType}
						onChange={handleActionTypeChange}
					>
						{(() => {
							const actionTypeOptions = getContentGateData(
								"action_type_options",
								[],
							);
							return actionTypeOptions.map(
								(option: { value: string; label: string }) => {
									const isLegacy =
										option.value === "ur-form" ||
										option.value === "shortcode";
									const label = isLegacy
										? `${option.label} (Legacy)`
										: option.label;
									return (
										<option
											key={option.value}
											value={option.value}
										>
											{label}
										</option>
									);
								},
							);
						})()}
					</select>
				</div>
			</div>

			{actionType === "message" && (
				<MessageAction
					rule={rule}
					message={message}
					onMessageChange={setMessage}
					useGlobalMessage={useGlobalMessage}
					onUseGlobalMessageChange={setUseGlobalMessage}
				/>
			)}

			{actionType === "redirect" && (
				<RedirectAction
					redirectUrl={redirectUrl}
					onRedirectUrlChange={setRedirectUrl}
				/>
			)}

			{actionType === "local_page" && (
				<LocalPageAction
					localPage={localPage}
					onLocalPageChange={setLocalPage}
				/>
			)}

			{/* <div className="contentgate-label-input-pair contentgate-rule-action flex items-center gap-6">
				<label className="contentgate-label-container flex items-center gap-2 max-w-[300px] w-full">
					<span className="contentgate-target-content-label text-sm">
						{__("Advanced Logic", "contentgate")}
					</span>
					<Tooltip>
						<TooltipTrigger>
							<Info size={16} />
						</TooltipTrigger>
						<TooltipContent className="z-[9999]" side="bottom">
							<p>
								{__(
									"Enable advanced logic gates (OR) and nested groups for complex condition rules",
									"contentgate",
								)}
							</p>
						</TooltipContent>
					</Tooltip>
				</label>
				<Switch
					checked={isAdvancedLogicEnabled}
					onCheckedChange={handleAdvancedLogicToggle}
				/>
			</div> */}

			<div className="flex gap-3">
				<Button
					type="button"
					onClick={handleSave}
					disabled={isSaving || isToggling}
					className="rounded-[4px] px-3 font-medium"
				>
					{isSaving
						? __("Saving...", "contentgate")
						: __("Save Settings", "contentgate")}
				</Button>
			</div>

			<AdvancedLogicWarningModal
				isOpen={showWarningModal}
				setIsOpen={setShowWarningModal}
			/>
		</div>
	);
};

export default SettingsTabContent;