<template>
    <div v-if="isDev && index" class="dev-index-badge" :class="{ 'is-dialog': dialogMode }">
        <span class="dev-index-num">{{ index }}</span>
        <span class="dev-index-label">{{ label }}</span>
    </div>
</template>

<script setup lang="ts">
/**
 * Dev-only визуальный badge: показывает индекс и название текущего экрана/компонента
 * для упрощения обратной связи на localhost («элемент 16: бага X»).
 *
 * Использование:
 * - Layout-уровень: `<DevIndexBadge :index="route.meta.devIndex" :label="route.meta.devLabel" />`
 * - Inline (диалоги/sub-компоненты): `<DevIndexBadge :index="18" label="NewProjectDialog" :dialog-mode="true" />`
 *
 * Не отображается если `index` falsy (null/undefined/0/'').
 * `dialogMode` переключает position: fixed → absolute для встраивания внутрь карточек.
 */
defineProps<{
    index: number | string | null | undefined;
    label?: string;
    dialogMode?: boolean;
}>();

// Гейт окружения: бейдж рисуется ТОЛЬКО в dev. В прод-сборке import.meta.env.DEV
// = false → бейдж не виден независимо от того, передан ли index хардкодом.
const isDev = import.meta.env.DEV;
</script>

<style scoped>
.dev-index-badge {
    position: fixed;
    top: 64px;
    right: 8px;
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0f6e56;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
    opacity: 0.92;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.dev-index-badge.is-dialog {
    position: absolute;
    z-index: 10000;
}
.dev-index-num {
    background: rgba(255, 255, 255, 0.22);
    padding: 1px 6px;
    border-radius: 3px;
    min-width: 22px;
    text-align: center;
}
.dev-index-label {
    letter-spacing: 0.02em;
}
</style>
