import React, { useState } from "react";
import { Button } from "../ui/Button";
import { CirclePlus, Info, LoaderCircle, Plus, X, XCircle } from "lucide-react";
import {
	Dialog,
	DialogClose,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "../ui/Dialog";
import { __ } from "@wordpress/i18n";
import { createRule } from "../../api/restriction.api";
import { toast } from "sonner";
import { Rule } from "../../types";
import { successToast } from "./ToastNotice";

type Props = {
	onCreateSuccess?: (newRule: Rule) => void;
	rules: Rule[];
};

const AddNewRestriction = ({ onCreateSuccess, rules }: Props) => {
	const [restrictionName, setRestrictionName] = useState("");
	const [isCreating, setIsCreating] = useState(false);
	const baseRestrictionName = __("Untitled Rule", "contentgate");

	const getNextUntitledName = () => {
		const regex = new RegExp(`^${baseRestrictionName}(?: (\\d+))?$`);

		let hasBaseName = false;
		const numbers: number[] = [];

		rules.forEach((rule) => {
			const match = rule.title.match(regex);

			if (!match) return;

			if (!match[1]) {
				hasBaseName = true;
			} else {
				numbers.push(Number(match[1]));
			}
		});

		if (!hasBaseName) {
			return baseRestrictionName;
		}

		const nextNumber = numbers.length ? Math.max(...numbers) + 1 : 2;

		return `${baseRestrictionName} ${nextNumber}`;
	};

	const handleContinue = async () => {
		const name = restrictionName.trim() || getNextUntitledName();
		setIsCreating(true);

		try {
			const response = await createRule(name);
			if (response.success) {
				successToast(
					__("Success!", "contentgate"),
					response.message ||
						__("Rule created successfully", "contentgate"),
				);
				setRestrictionName("");
				if (onCreateSuccess && response.rule) {
					onCreateSuccess(response.rule);
				}
			} else {
				console.error(
					response.message ||
						__("Failed to create rule", "contentgate"),
				);
			}
		} catch (error: any) {
			console.error(
				error.message || __("An error occurred", "contentgate"),
			);
		} finally {
			setIsCreating(false);
		}
	};

	return (
		<Button
			className="rounded py-2 px-3 h-[40px] flex items-center gap-1 bg-primary text-primary-foreground font-medium"
			onClick={handleContinue}
			disabled={isCreating}
		>
			{isCreating ? (
				<LoaderCircle className="animate-spin" size={14} />
			) : (
				<Plus size={14} />
			)}
			<span className="text-sm">
				{isCreating
					? __("Adding...", "contentgate")
					: __("Add New", "contentgate")}
			</span>
		</Button>
	);
};

export default AddNewRestriction;