import React, { useCallback, useEffect, useMemo, useState } from "react";
import RestrictionPageHeader from "../components/restriction/RestrictionPageHeader";
import RestrictionCard from "../components/restriction/restriction/RestrictionCard";
import { getAllRules } from "../api/restriction.api";
import { Info, Loader, LoaderCircle } from "lucide-react";
import { __ } from "@wordpress/i18n";
import {
	_CONTENTGATE_DASHBOARD_,
	ContentGateDashboardType,
	Rule,
	RulesData,
} from "../types";
import { Toaster } from "../components/ui/Sonner";

const { assetsURL } = _CONTENTGATE_DASHBOARD_ as ContentGateDashboardType;

const ContentRules = () => {
	const [rules, setRules] = useState<Rule[]>([]);
	const [isLoading, setIsLoading] = useState(true);
	const [search, setSearch] = useState("");
	const statusOptions: { label: string; value: string }[] = [
		{ label: "All Status", value: "all" },
		{ label: "Active", value: "active" },
		{ label: "Inactive", value: "inactive" },
	];
	const [status, setStatus] = useState(
		statusOptions[0] || { label: "All Status", value: "all" },
	);

	const fetchRules = useCallback(async () => {
		setIsLoading(true);
		try {
			const data: RulesData = await getAllRules();
			if (data.success) {
				setRules(data.rules || []);
			} else {
				const errorMsg =
					data.message || __("Failed to load rules", "contentgate");
				console.error(errorMsg);
			}
		} catch (error) {
			const errorMessage =
				error instanceof Error
					? error.message
					: __(
							"An error occurred while loading rules",
							"contentgate",
						);
			console.error(errorMessage);
		} finally {
			setIsLoading(false);
		}
	}, []);

	useEffect(() => {
		fetchRules();
	}, [fetchRules]);

	const handleRuleStatusUpdate = (ruleId: number, enabled: boolean) => {
		setRules((prevRules) =>
			prevRules.map((rule) =>
				rule.id === ruleId
					? {
							...rule,
							enabled,
							content: {
								...(rule.content || {}),
								enabled,
							},
						}
					: rule,
			),
		);
	};

	const handleRuleCreated = (newRule: Rule) => {
		setRules((prevRules) => [newRule, ...prevRules]);
	};

	const handleRuleUpdate = (updatedRule: Rule) => {
		if (updatedRule) {
			setRules((prevRules) =>
				prevRules.map((rule) =>
					rule.id === updatedRule.id
						? { ...rule, ...updatedRule }
						: rule,
				),
			);
		}
	};

	const handleRuleDelete = (ruleId: number) => {
		setRules((prevRules) => prevRules.filter((rule) => rule.id !== ruleId));
	};

	const handleRuleDuplicate = () => {
		fetchRules();
	};

	const filteredRules = useMemo(() => {
		if (search.trim().length < 2 && status.value === "all") {
			return rules;
		}

		const searchLower = search.toLowerCase();
		return rules.filter((rule) => {
			const matchesSearch = rule.title
				?.toLowerCase()
				.includes(searchLower);

			if (status.value === "all") return matchesSearch;
			if (status.value === "active") return matchesSearch && rule.enabled;
			if (status.value === "inactive")
				return matchesSearch && !rule.enabled;

			return matchesSearch;
		});
	}, [rules, search, status]);

	if (isLoading) {
		return (
			<div className="mt-24 w-full flex justify-center">
				<LoaderCircle className="animate-spin block" />
			</div>
		);
	}

	return (
		<div className="mt-[60px] p-6">
			<Toaster
				richColors
				closeButton
				position="top-center"
				toastOptions={{
					classNames: {
						closeButton:
							"!absolute !right-3 !top-1/2 !-translate-y-1/2 !left-auto",
					},
				}}
				theme="light"
				offset={{ top: "55px" }}
			/>
			<RestrictionPageHeader
				handleRuleCreated={handleRuleCreated}
				search={search}
				setSearch={setSearch}
				status={status}
				setStatus={setStatus}
				statusOptions={statusOptions}
				rules={rules}
			/>
			<div className="flex flex-col gap-6">
				{!filteredRules || filteredRules.length === 0 ? (
					<div className="flex flex-col items-center bg-white rounded-md gap-4 p-4">
						<img
							src={`${assetsURL || ""}images/empty-table.png`}
							alt={__("No content rules found", "contentgate")}
							className=" max-w-[320px] w-full h-auto"
						/>
						<p className="text-[18px]">
							{__("No Content Rules found.", "contentgate")}
						</p>
					</div>
				) : (
					filteredRules.map((rule) => (
						<RestrictionCard
							id={rule.id}
							rule={rule}
							handleRuleStatusUpdate={handleRuleStatusUpdate}
							handleRuleUpdate={handleRuleUpdate}
							handleRuleDelete={handleRuleDelete}
							handleRuleDuplicate={handleRuleDuplicate}
							key={rule.id}
						/>
					))
				)}
			</div>
		</div>
	);
};

export default ContentRules;