'use client';

import { cn } from "../../utils/cn.mjs";
import { RotateCw } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { cva } from "class-variance-authority";
import { jsx, jsxs } from "react/jsx-runtime";
import { useIntlayer } from "react-intlayer";

//#region src/components/Browser/Browser.tsx
const browserVariants = cva("flex w-full flex-col overflow-hidden rounded-xl bg-background shadow-[0_4px_12px_rgba(0,0,0,0.4),0_0_1px_rgba(0,0,0,0.2)]", {
	variants: { size: {
		xs: "h-[400px]",
		sm: "h-[500px]",
		md: "h-[600px]",
		lg: "h-[800px]",
		xl: "h-[1000px]"
	} },
	defaultVariants: { size: "md" }
});
/**
* Browser component that renders an iframe with a visible, editable URL bar.
* Allows users to view, edit, and navigate to different URLs within an embedded browser interface.
*
* Features:
* - Editable URL bar with strict validation (before navigation)
* - Automatic protocol addition (adds https:// if missing)
* - Integrated reload button inside the URL input
* - Error handling with visual feedback for invalid URLs
* - Responsive iframe with standardized sizes
* - Full accessibility support with ARIA attributes
* - Sandbox security for iframe content
* - Dark-themed UI matching modern browser aesthetics
* - Cross-browser compatibility (Chrome, Firefox, Safari)
*
* @example
* // Basic usage
* <Browser initialUrl="https://example.com" size="md" />
*
* @example
* // With custom size and styling
* <Browser
*   initialUrl="https://example.com"
*   size="lg"
*   className="shadow-2xl"
*   aria-label="Documentation viewer"
* />
*
* @example
* // For content preview
* <Browser
*   initialUrl="https://youtube.com/embed/VIDEO_ID"
*   size="xl"
*   aria-label="Video content browser"
* />
*
* @example
* // With custom sandbox restrictions
* <Browser
*   initialUrl="https://example.com"
*   sandbox="allow-scripts allow-same-origin"
*   aria-label="Restricted content browser"
* />
*
* @param initialUrl - The initial URL to load in the iframe (default: 'https://example.com')
* @param className - Additional CSS classes for the main container element
* @param style - Inline CSS styles for the main container element
* @param size - Size of the browser window: 'xs' (400px), 'sm' (500px), 'md' (600px), 'lg' (800px), 'xl' (1000px). Defaults to 'md'
* @param aria-label - Accessible label for screen readers describing the browser's purpose (default: 'Embedded browser')
* @param sandbox - Sandbox attribute for the iframe to control security restrictions (default: 'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads')
*/
const Browser = ({ initialUrl = "https://example.com", className, style, size = "md", "aria-label": ariaLabel, sandbox = "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads" }) => {
	const [inputUrl, setInputUrl] = useState(initialUrl);
	const [currentUrl, setCurrentUrl] = useState(initialUrl);
	const [error, setError] = useState(null);
	const [submitted, setSubmitted] = useState(false);
	const iframeRef = useRef(null);
	const content = useIntlayer("browser");
	useEffect(() => {
		setInputUrl(initialUrl);
		setCurrentUrl(initialUrl);
		setError(null);
		setSubmitted(false);
	}, [initialUrl]);
	const isValidHostname = (host) => {
		if (!/^[a-z0-9.-]+$/i.test(host)) return false;
		if (/^[-.]/.test(host) || /[-.]$/.test(host)) return false;
		if (host.includes("..")) return false;
		if (!host.includes(".")) return false;
		return true;
	};
	const normalizeUrl = (raw) => {
		const trimmed = raw.trim();
		if (!trimmed || /\s/.test(trimmed)) throw new Error("Invalid");
		const candidate = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(trimmed) ? trimmed : `https://${trimmed}`;
		const url = new URL(candidate);
		if (url.protocol !== "http:" && url.protocol !== "https:") throw new Error("Only http(s) is allowed");
		if (!isValidHostname(url.hostname)) throw new Error("Invalid host");
		return url.toString();
	};
	const validateAndNavigate = (url) => {
		try {
			const validated = normalizeUrl(url);
			setCurrentUrl(validated);
			setInputUrl(validated);
			setError(null);
		} catch {
			setError(content.errorMessage.value);
		}
	};
	const handleSubmit = (e) => {
		e.preventDefault();
		setSubmitted(true);
		validateAndNavigate(inputUrl);
	};
	const handleReload = () => {
		if (iframeRef.current) {
			const url = iframeRef.current.src;
			iframeRef.current.src = "";
			iframeRef.current.src = url;
		}
	};
	const showError = submitted && !!error;
	return /* @__PURE__ */ jsxs("section", {
		className: cn(browserVariants({ size }), className),
		style,
		"aria-label": ariaLabel ?? content.ariaLabel.value,
		children: [/* @__PURE__ */ jsxs("div", {
			className: "relative z-10 flex shrink-0 flex-col gap-1 rounded-t-xl bg-neutral-900 px-4 py-2.5 shadow-[0_3px_4px_0_rgba(0,0,0,0.25)]",
			children: [/* @__PURE__ */ jsxs("form", {
				onSubmit: handleSubmit,
				className: "relative flex-1",
				noValidate: true,
				children: [
					/* @__PURE__ */ jsx("label", {
						htmlFor: "browser-url",
						className: "sr-only",
						children: content.urlLabel.value
					}),
					/* @__PURE__ */ jsx("input", {
						id: "browser-url",
						type: "text",
						inputMode: "url",
						spellCheck: false,
						autoCapitalize: "off",
						autoCorrect: "off",
						value: inputUrl,
						onChange: (e) => {
							setInputUrl(e.target.value);
							if (showError) setError(null);
						},
						placeholder: content.urlPlaceholder.value,
						className: cn("w-full rounded-lg px-4 py-2 pr-11 text-sm leading-[1.4]", "bg-neutral-950 text-neutral-300", "placeholder:text-neutral-400", "transition-all focus:outline-none focus:ring-1 focus:ring-neutral-400/30", showError ? "border border-red-500" : "border border-transparent"),
						"aria-label": content.urlLabel.value,
						"aria-invalid": showError,
						"aria-describedby": showError ? "browser-url-error" : void 0
					}),
					/* @__PURE__ */ jsx("button", {
						type: "button",
						onClick: handleReload,
						className: cn("-translate-y-1/2 absolute top-1/2 right-2", "flex h-8 w-8 items-center justify-center rounded-md", "transition-colors hover:bg-neutral-800", "focus:outline-none focus:ring-1 focus:ring-neutral-400/30"),
						title: content.reloadButtonTitle.value,
						"aria-label": content.reloadButtonTitle.value,
						tabIndex: 0,
						children: /* @__PURE__ */ jsx(RotateCw, {
							size: 18,
							className: "text-neutral-400",
							strokeWidth: 2
						})
					}),
					/* @__PURE__ */ jsx("button", {
						type: "submit",
						className: "sr-only absolute",
						tabIndex: -1
					})
				]
			}), showError && /* @__PURE__ */ jsx("p", {
				id: "browser-url-error",
				role: "alert",
				"aria-live": "assertive",
				className: "px-1 text-red-400 text-xs",
				children: error
			})]
		}), /* @__PURE__ */ jsx("div", {
			className: "relative z-0 min-h-0 w-full flex-1 overflow-hidden rounded-b-xl bg-background",
			children: /* @__PURE__ */ jsx("iframe", {
				ref: iframeRef,
				src: currentUrl,
				title: content.iframeTitle.value,
				className: "h-full w-full rounded-b-xl border-0",
				sandbox,
				loading: "lazy",
				"aria-live": "polite"
			})
		})]
	});
};

//#endregion
export { Browser };
//# sourceMappingURL=Browser.mjs.map