import { ENV_TYPE, isNonProdEnv } from "../env.ts";

// The deployment environment is baked into the bundle at build time (env.ts
// reads esbuild's __ENV_TYPE__ define), so it is a plain module constant here —
// no runtime globalThis read. Re-exported for callers that historically imported
// isNonProdEnv from this module.
export { isNonProdEnv };

// Browser-only: tag <html> so any env-specific styling can hook in. Guarded
// because the SSR DOM shim has no document.documentElement.
(function markEnvOnRoot() {
    if (isNonProdEnv() && typeof document !== "undefined" && document.documentElement) {
        document.documentElement.dataset.env = ENV_TYPE;
    }
})();

const BADGE_BASE = "pointer-events-none select-none absolute top-0 -right-2 z-10 " +
    "rounded px-1 py-px text-[0.5rem] font-bold uppercase leading-none tracking-wider shadow-sm";

/**
 * Small environment badge pinned to the corner of the app logo. Renders
 * nothing in production. Drop it inside a `position: relative` wrapper around
 * the logo image so it anchors to the logo's top-right corner.
 */
export function EnvBadge() {
    if (!isNonProdEnv()) return null;

    const label = ENV_TYPE === "development" ? "DEV"
        : ENV_TYPE === "staging" ? "STAGING"
        : ENV_TYPE.toUpperCase();

    const tone = ENV_TYPE === "development" ? "bg-orange-500 text-white"
        : ENV_TYPE === "staging" ? "bg-yellow-400 text-gray-900"
        : "bg-neutral-700 text-white";

    return <span class={`${BADGE_BASE} ${tone}`}>{label}</span>;
}
