import Image from "next/image";
import { Clock } from "@/components/clock";
import { LanguageSwitcher } from "@/components/language-switcher";
import { Reveal } from "@/components/motion-reveal";
import { ThemeSwitcher } from "@/components/theme-switcher";
import { ICON_LIGHTHOUSE } from "@/lib/site-icons";

/**
 * Shared frosted-glass top bar for the public auth pages (login, register,
 * etc.). Shows the hotel logo + name on the left and language / clock / theme
 * controls on the right. Defaults mirror the homepage top bar so auth pages
 * share one consistent look.
 */
export function AuthTopBar({
	hotelName,
	logo,
	showHotelName = true,
}: {
	hotelName: string;
	logo?: string | null;
	showHotelName?: boolean;
}) {
	return (
		<Reveal>
			<div
				className="relative flex items-center justify-between rounded-full border px-3 py-2.5 sm:px-5"
				style={{
					background:
						"linear-gradient(90deg, color-mix(in srgb, var(--color-surface) 62%, transparent), color-mix(in srgb, var(--color-primary) 7%, transparent))",
					backdropFilter: "blur(14px)",
					WebkitBackdropFilter: "blur(14px)",
					borderColor:
						"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
					boxShadow:
						"0 1px 3px rgba(0,0,0,0.04), 0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent)",
				}}
			>
				<div className="flex items-center gap-2 sm:gap-3">
					{logo ? (
						<Image
							src={logo}
							alt={hotelName}
							width={100}
							height={28}
							className="shrink-0 object-contain"
							unoptimized
							style={{ maxHeight: 26, width: "auto", height: "auto" }}
						/>
					) : (
						<div
							className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full"
							style={{
								background:
									"linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-accent) 60%, var(--color-primary)))",
								boxShadow:
									"0 4px 16px -4px color-mix(in srgb, var(--color-primary) 60%, transparent)",
							}}
						>
							<Image
								src={ICON_LIGHTHOUSE}
								alt=""
								width={18}
								height={18}
								className="shrink-0"
								unoptimized
								style={{ filter: "brightness(0) invert(1)" }}
							/>
						</div>
					)}
					{showHotelName ? (
						<span
							className="hidden text-sm font-extrabold uppercase tracking-wide sm:inline"
							style={{ color: "var(--color-text-readable)" }}
						>
							{hotelName}
						</span>
					) : null}
				</div>
				<div
					className="flex items-center gap-1 sm:gap-1.5 rounded-full px-1.5 py-1 sm:px-2"
					style={{
						background:
							"color-mix(in srgb, var(--color-text-muted) 5%, transparent)",
					}}
				>
					<LanguageSwitcher />
					<div
						className="hidden sm:block w-px h-5"
						style={{
							background:
								"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
						}}
					/>
					<Clock />
					<div
						className="w-px h-5"
						style={{
							background:
								"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
						}}
					/>
					<ThemeSwitcher />
				</div>
			</div>
		</Reveal>
	);
}