<script setup>
import { computed } from 'vue';
import { usePage } from '@inertiajs/vue3';

const page = usePage();
const appEnv = computed(() => page.props.app_env);

const isDevelopment = computed(() => appEnv.value !== 'production');

const bannerStyles = computed(() => {
    if (appEnv.value === 'local') {
        return 'bg-amber-400 text-amber-950 border-amber-500/50';
    } else if (appEnv.value === 'staging') {
        return 'bg-blue-500 text-white border-blue-600/50';
    }
    return 'bg-rose-500 text-white border-rose-600/50';
});

const label = computed(() => {
    if (appEnv.value === 'local') return 'DEV';
    if (appEnv.value === 'staging') return 'STG';
    return appEnv.value?.toUpperCase() || 'ENV';
});
</script>

<template>
    <div 
        v-if="isDevelopment" 
        class="fixed top-0 left-0 right-0 z-[9999] h-1 pointer-events-none shadow-sm shadow-black/10"
        :class="bannerStyles"
    ></div>
    
    <div 
        v-if="isDevelopment"
        class="fixed top-4 -right-12 z-[9999] pointer-events-none select-none"
    >
        <div 
            class="transform rotate-45 py-1 px-14 text-[10px] font-black tracking-tighter shadow-lg border-y whitespace-nowrap text-center flex flex-col items-center justify-center leading-none"
            :class="bannerStyles"
        >
            <span>ENV {{ label }}</span>
            <span class="text-[7px] opacity-70 mt-0.5">{{ appEnv }}</span>
        </div>
    </div>
</template>

<style scoped>
/* No specific styles needed as Tailwind handles most of it, but ensure z-index is high */
</style>
