import React, { useEffect, useRef } from "react";
import { __ } from "@wordpress/i18n";
import {
	ConditionType,
	ContentTarget,
	Rule,
	ValueCondition,
} from "../../../types";
import DropdownMenu from "../dropdowns/DropdownMenu";
import ContentValueInput from "../inputs/ContentValueInput";
import { ChevronDown, Plus, Trash2, X } from "lucide-react";
import ContentTypeDropdown from "../dropdowns/ContentTypeDropdown";
import { Button } from "../../ui/Button";
import { isProAccess } from "../../../utils/localized-data";

type Props = {
	accessControl: string;
	onAccessControlChange: (newAccessControl: string) => void;
	contentTargets: ContentTarget[];
	onContentTargetsChange: (newContentTargets: ContentTarget[]) => void;
	rule: Rule;
	conditions: ConditionType[];
};

const AccessControlSection = ({
	accessControl,
	onAccessControlChange,
	contentTargets,
	onContentTargetsChange,
	rule,
	conditions,
}: Props) => {
	const conditionValueInputWrapperRef = useRef<HTMLDivElement>(null);
	const lastRuleTypeRef = useRef(null);

	const handleAfterContentTypeSelection = (option: {
		value: string;
		label: string;
	}) => {
		const newContentTarget = {
			id: `x${Date.now()}`,
			type: option.value,
			label: option.label,
			value: option.value === "whole_site" ? "whole_site" : [],
			taxonomy: option.value === "taxonomy" ? "" : undefined,
		};
		onContentTargetsChange([...contentTargets, newContentTarget]);
	};

	const handleContentTargetUpdate = (targetId: string, newValue: any) => {
		const updatedTargets = contentTargets.map((target) =>
			target.id === targetId ? { ...target, value: newValue } : target,
		);
		onContentTargetsChange(updatedTargets);
	};

	const handleContentTargetRemove = (targetId: string) => {
		const updatedTargets = contentTargets.filter(
			(target) => target.id !== targetId,
		);
		onContentTargetsChange(updatedTargets);
	};

	const handleAccessControlChange = (option: {
		value: string;
		label: string;
	}) => {
		const newValue = option.value;
		updateAccessControlColors(newValue);
		onAccessControlChange(newValue);
	};

	const updateAccessControlColors = (value: string) => {
		if (!conditionValueInputWrapperRef.current) return;

		const wrapper = conditionValueInputWrapperRef.current;
		const button = wrapper.querySelector<HTMLButtonElement>(
			".contentgate-access-control-button",
		);

		if (value === "access") {
			wrapper.classList.add("bg-success-50");
			wrapper.classList.remove("bg-destructive-50");
			if (button) {
				button.classList.add("text-success-500");
				button.classList.remove("text-destructive-500");
			}
		} else {
			wrapper.classList.add("bg-destructive-50");
			wrapper.classList.remove("bg-success-50");
			if (button) {
				button.classList.add("text-destructive-500");
				button.classList.remove("text-success-500");
			}
		}
	};

	useEffect(() => {
		updateAccessControlColors(accessControl);
	}, [accessControl]);

	// Helper to get the selected option object
	const getSelectedOption = () => {
		return getAccessControlOptions().find(
			(opt) => opt.value === accessControl,
		);
	};

	const getAccessControlLabel = () => {
		if (accessControl === "restrict") {
			return __("Restrict", "contentgate");
		}
		return __("Access", "contentgate");
	};

	const getAccessControlOptions = () => {
		return [
			...(isProAccess()
				? [
						{
							value: "restrict",
							label: __("Restrict", "contentgate"),
						},
					]
				: []),
			{ value: "access", label: __("Access", "contentgate") },
		].map((option) => ({
			...option,
			disabled: !isProAccess() && option.value === "restrict",
		}));
	};
	return (
		<div className="contentgate-target-selection-section flex items-start flex-col border rounded-md flex-1 w-full sticky top-[120px]">
			<span className="uppercase border rounded-[4px] px-3 py-0 h-6 content-center absolute top-[-15px] left-[-15px] bg-white font-medium">
				{__("THEN", "contentgate")}
			</span>
			<div
				className="contentgate-condition-value-input-wrapper px-6 py-5 w-full text-sm leading-6"
				ref={conditionValueInputWrapperRef}
			>
				{isProAccess() ? (
					<DropdownMenu
						trigger={
							<button
								type="button"
								className="contentgate-access-control-button contentgate-condition-value-input contentgate-dropdown-button-text contentgate-access-control-dropdown-wrapper text-sm flex items-center gap-[10px] focus:outline-none"
							>
								<span className="contentgate-dropdown-button-text">
									{getSelectedOption()?.label ||
										getAccessControlLabel()}
								</span>
								<span>
									<ChevronDown size={14} />
								</span>
							</button>
						}
						options={getAccessControlOptions()}
						grouped={false}
						onSelect={handleAccessControlChange}
						selectedValue={accessControl}
					/>
				) : (
					<span className="text-success-500 ">
						{__("Access", "contentgate")}
					</span>
				)}
			</div>

			<div className="flex flex-col pl-6 pb-6 pr-[14px] pt-5 w-full gap-6">
				{contentTargets.length > 0 && (
					<div className="contentgate-target-type-group flex flex-col gap-6 w-full">
						{contentTargets.map((target) => {
							const displayLabel =
								target.type === "whole_site"
									? __("Includes", "contentgate")
									: target.label;
							return (
								<div
									key={target.id}
									className="contentgate-target-item flex gap-4 items-start flex-col md:flex-row md:items-center xl:flex-col xl:items-start xl2:items-center xl2:flex-row"
								>
									<span className="contentgate-target-type-label max-w-[140px] w-full text-sm font-medium">
										{displayLabel
											.replace(/_/g, " ")
											.replace(/\b\w/g, (char: string) =>
												char.toUpperCase(),
											)}
										:
									</span>
									<div className="flex gap-4 flex-1 items-center !w-full md:w-auto">
										<ContentValueInput
											contentType={target.type}
											value={target.value}
											onChange={(newValue: any) =>
												handleContentTargetUpdate(
													target.id,
													newValue,
												)
											}
										/>
										<Button
											type="button"
											size="lg"
											className="contentgate-target-remove h-5 text-[#505050] hover:text-destructive-500 p-0 bg-transparent"
											onClick={() =>
												handleContentTargetRemove(
													target.id,
												)
											}
											aria-label={__(
												"Remove",
												"contentgate",
											)}
										>
											<Trash2 />
										</Button>
									</div>
								</div>
							);
						})}
					</div>
				)}

				<div className="contentgate-dropdown-wrapper contentgate-content-dropdown-wrapper">
					<ContentTypeDropdown
						trigger={
							<button className="bg-[#F5F6FE] text-primary text-sm flex items-center gap-2 rounded-md px-3 py-1.5 hover:bg-[#F5F6FE]/80 focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
								<Plus size={14} />
								<span className="font-semibold">
									{__("Content", "contentgate")}
								</span>
							</button>
						}
						existingContentTypes={contentTargets}
						onSelect={handleAfterContentTypeSelection}
					/>
				</div>
			</div>
		</div>
	);
};

export default AccessControlSection;