<script setup lang="ts">
import { computed } from 'vue';
import { useAuthStore } from '../../stores/auth';
import { impersonationLeave } from '../../api/auth';

const auth = useAuthStore();
const imp = computed(() => auth.user?.impersonation);

async function leave(): Promise<void> {
    try {
        await impersonationLeave();
    } finally {
        window.location.assign('/admin/tenants');
    }
}
</script>

<template>
    <div v-if="imp?.active" class="imp-session-banner" role="alert" data-testid="impersonation-session-banner">
        <v-icon size="16" class="imp-session-banner__icon">mdi-account-switch</v-icon>
        <span class="imp-session-banner__label">
            Вы в кабинете клиента «{{ imp.tenant_name ?? '—' }}» — режим поддержки.
        </span>
        <button type="button" class="imp-session-banner__leave" data-testid="impersonation-leave-btn" @click="leave">
            Выйти
        </button>
    </div>
</template>

<style scoped>
.imp-session-banner {
    display: flex; align-items: center; gap: 8px;
    background: #b3261e; color: #fff; font-size: 13px; padding: 8px 24px;
    position: sticky; top: 0; z-index: 2000;
}
.imp-session-banner__label { flex: 1; }
.imp-session-banner__leave {
    background: #fff; color: #b3261e; border: 0; border-radius: 4px;
    padding: 2px 12px; font-weight: 600; cursor: pointer;
}
</style>
