import React, { useState } from "react";
import {
	Tabs,
	TabsContent,
	TabsList,
	TabsTrigger,
} from "../components/ui/Tabs";
import { __ } from "@wordpress/i18n";
import { LayoutDashboard, Menu, X } from "lucide-react";
import GeneralSettings from "../components/restriction/global-settings/GeneralSettings";
import { Button } from "../components/ui/Button";
import { saveGeneralSettings } from "../api/restriction.api";
import { toast } from "sonner";
import { getContentGateData } from "../utils/localized-data";
import { Toaster } from "../components/ui/Sonner";
import { successToast } from "../components/restriction/ToastNotice";

const GlobalSettings = () => {
	const [isSaving, setIsSaving] = useState<Record<string, boolean>>({});
	const defaultMessage = getContentGateData("restriction_global_message", "");
	const [message, setMessage] = useState(defaultMessage || "");
	const [isSidebarOpen, setIsSidebarOpen] = useState(false);

	const handleSaveGeneralSettings = async () => {
		try {
			const response = await saveGeneralSettings(message);
			if (response.success) {
				successToast(
					__("Success!", "contentgate"),
					response.message ||
						__("Settings saved successfully", "contentgate"),
				);
			} else {
				console.error(
					response.message ||
						__("Failed to save settings", "contentgate"),
				);
			}
		} catch (error: any) {
			console.error(
				error.message || __("An error occurred", "contentgate"),
			);
		} finally {
			setIsSaving({ general: false });
		}
	};

	const settingsItems = [
		{
			label: __("General", "contentgate"),
			value: "general",
			icon: LayoutDashboard,
			component: (
				<GeneralSettings
					message={message}
					setMessage={setMessage}
					defaultMessage={defaultMessage}
				/>
			),
			handleSave: handleSaveGeneralSettings,
		},
	];

	const handleSaveClick = async (
		tabValue: string,
		saveHandler: () => Promise<void>,
	) => {
		setIsSaving((prev) => ({ ...prev, [tabValue]: true }));

		try {
			await saveHandler();
			// Optional: Show success message
		} catch (error) {
			// Optional: Show error message
			console.error("Save failed:", error);
		} finally {
			setIsSaving((prev) => ({ ...prev, [tabValue]: false }));
		}
	};

	return (
		<div>
			<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" }}
			/>
			<Tabs
				defaultValue="general"
				orientation="vertical"
				className="gap-0 mt-[60px]"
			>
				{isSidebarOpen && (
					<div
						className="fixed inset-0 bg-black/40 z-[1] xl:hidden"
						onClick={() => setIsSidebarOpen(false)}
					/>
				)}
				<TabsList
					className={`
					w-[300px] p-4 border-r border-border rounded-none bg-white justify-start !h-[calc(100vh-60px)]
					fixed
					transform transition-transform duration-300
					${isSidebarOpen ? "translate-x-0 z-[2]" : "translate-x-[-200%] z-auto"}
					xl:translate-x-0
				`}
				>
					<Button
						variant="ghost"
						className="px-2 xl:hidden absolute top-2 right-[-40px] text-gray-500 hover:text-gray-800 bg-white"
						onClick={() => setIsSidebarOpen(false)}
					>
						<X size={20} />
					</Button>
					{settingsItems.map((item) => {
						const Icon = item.icon;
						return (
							<TabsTrigger
								key={item.value}
								value={item.value}
								className="bg-transparent w-full flex gap-3 flex-grow-0 px-4 py-[14px] text-sm data-[state=active]:!text-primary data-[state=active]:!bg-primary/[0.06] data-[state=active]:!border-transparent font-medium rounded-[4px]"
							>
								<Icon className="!w-5 !h-5" />
								{item.label}
							</TabsTrigger>
						);
					})}
				</TabsList>
				{settingsItems.map((item) => (
					<TabsContent
						key={item.value}
						value={item.value}
						className="xl:ml-[300px]"
					>
						<div className="flex items-center gap-3 px-6  mb-6 border-b border-border">
							<Button
								type="button"
								className="xl:hidden bg-transparent px-0 text-black-450"
								onClick={() => setIsSidebarOpen(true)}
							>
								<Menu size={20} />
							</Button>
							<h1 className="text-[24px] leading-[36px] font-semibold py-4 ">
								{item.label}
							</h1>
						</div>
						<div className="mx-6 my-[30px] bg-white p-5 rounded-lg border border-border flex gap-6 flex-col">
							{item.component}
						</div>
						<Button
							type="button"
							className="rounded-[4px] px-3 mx-6"
							onClick={() =>
								handleSaveClick(item.value, item.handleSave)
							}
							disabled={isSaving[item.value]}
						>
							{isSaving[item.value]
								? __("Saving...", "contentgate")
								: __("Save Changes", "contentgate")}
						</Button>
					</TabsContent>
				))}
			</Tabs>
		</div>
	);
};

export default GlobalSettings;