<script setup>
import { ref, watch, onMounted } from 'vue'
import { usePage } from '@inertiajs/vue3'

const page = usePage()
const visible = ref(false)
const message = ref('')
const type = ref('success')
let hideTimeout = null

function show(msg, msgType) {
    message.value = msg
    type.value = msgType
    visible.value = true

    if (hideTimeout) clearTimeout(hideTimeout)
    hideTimeout = setTimeout(() => {
        visible.value = false
    }, 4000)
}

function dismiss() {
    visible.value = false
    if (hideTimeout) clearTimeout(hideTimeout)
}

function checkFlash() {
    const flash = page.props.flash
    if (flash?.success) {
        show(flash.success, 'success')
    } else if (flash?.error) {
        show(flash.error, 'error')
    }
}

onMounted(checkFlash)

watch(() => page.props.flash, checkFlash, { deep: true })
</script>

<template>
    <Transition
        enter-active-class="transition duration-300 ease-out"
        enter-from-class="translate-y-[-100%] opacity-0"
        enter-to-class="translate-y-0 opacity-100"
        leave-active-class="transition duration-200 ease-in"
        leave-from-class="translate-y-0 opacity-100"
        leave-to-class="translate-y-[-100%] opacity-0"
    >
        <div
            v-if="visible"
            class="fixed left-1/2 top-4 z-[100] w-auto max-w-lg -translate-x-1/2"
            role="alert"
        >
            <div
                class="flex items-center gap-3 rounded-xl px-5 py-3 shadow-lg backdrop-blur-sm"
                :class="{
                    'bg-emerald-600/90 text-white': type === 'success',
                    'bg-red-600/90 text-white': type === 'error',
                }"
            >
                <!-- Erfolg-Icon -->
                <svg
                    v-if="type === 'success'"
                    class="h-5 w-5 shrink-0"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                </svg>

                <!-- Fehler-Icon -->
                <svg
                    v-if="type === 'error'"
                    class="h-5 w-5 shrink-0"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
                </svg>

                <span class="text-sm font-medium">{{ message }}</span>

                <button
                    @click="dismiss"
                    class="ml-2 shrink-0 rounded-lg p-1 opacity-70 transition hover:opacity-100"
                    aria-label="Schließen"
                >
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </Transition>
</template>
