(function () {
	// Use chrome or browser depending on the environment
	var browser = chrome || browser;

	// Duration to show the banner (in milliseconds)
	let DISPLAY_DURATION = 5000; // Initialize the duration to 5 seconds
	let banner; // Declare the banner variable in the outer scope

	// Get the duration from local storage and update the DISPLAY_DURATION variable
	browser.storage.local
		.get(["duration", "status"]) // Fetch both duration and status
		.then((result) => {
			DISPLAY_DURATION = result.duration || DISPLAY_DURATION;
			console.log("Duration set to:", DISPLAY_DURATION, "(in ms)");

			// Set variables to css for delay for animation
			let CSS_ANIMATION_DURATION = 300 / 1000;
			let CSS_DURATION = DISPLAY_DURATION / 1000;
			let CSS_DELAY =
				CSS_DURATION - CSS_ANIMATION_DURATION - CSS_ANIMATION_DURATION;

			console.log("--duration:", `${CSS_ANIMATION_DURATION}s`);
			console.log("--delay:", `${CSS_DURATION}s`);

			CSS_ANIMATION_DURATION = CSS_ANIMATION_DURATION + "s";
			document.body.style.setProperty(
				"--duration",
				CSS_ANIMATION_DURATION
			);

			CSS_DELAY = CSS_DELAY + "s";
			document.body.style.setProperty("--delay", CSS_DELAY);

			if (result.status === 0) {
				// Extension is OFF, do nothing
				console.log("Extension is OFF, exiting.");
				return;
			}

			if (result.bannerInjected) {
				// Banner has already been injected, do nothing
				console.log("Banner already injected, exiting.");
				return;
			}

			console.log("Injecting the banner...");

			// Inject the CSS file
			const link = document.createElement("link");
			link.href = browser.runtime.getURL("style.css");
			link.rel = "stylesheet";
			document.head.appendChild(link);
			console.log("CSS file injected.");

			// Create and style the banner container
			banner = document.createElement("div");
			banner.classList.add("extension-banner-container");

			const marqeeText = "YOU ARE NOW SURFING THE WEB AS A BOT 🤖 ";

			const bannerContent = `
            <div class="banner montserrat">
                <div class="marquee">
                    <span class="marquee__inner" style="--ad: 80s;">
                        ${new Array(30).fill(marqeeText).join("")}
                    </span>
                </div>
            </div>
            `;

			// Set the banner content
			banner.innerHTML = bannerContent;

			// Append the banner to the body
			document.body.appendChild(banner);
			console.log("Banner injected:", banner);

			// Set the flag in local storage to indicate that the banner was injected
			return browser.storage.local.set({ bannerInjected: true });
		})
		.then(() => {
			// Remove the banner after the specified duration
			setTimeout(() => {
				if (banner && banner.parentNode) {
					banner.parentNode.removeChild(banner);
					console.log("Banner removed after duration.");

					// Reset the flag when the banner is removed
					browser.storage.local.set({ bannerInjected: false });
				}
			}, DISPLAY_DURATION);
		})
		.catch((error) => {
			console.error("Error in content script:", error);
		});
})();
