<script setup lang="ts">
/**
 * SessionsTable — список активных сессий с кнопкой «Завершить» для не-текущей сессии.
 * Sprint 4 Phase B/2 — split SecurityTab (audit O-refactor-04 хвост).
 *
 * MVP: статичный mock из 3 строк, soft-revoke не подключён к API. Реальный flow:
 *   GET /api/account/sessions — список.
 *   DELETE /api/account/sessions/{id} — revoke.
 */
interface Session {
    device: string;
    location: string;
    when: string;
    current: boolean;
}

const sessions: Session[] = [
    { device: 'Chrome 138, Windows', location: 'Москва (10.0.20.5)', when: 'сейчас', current: true },
    { device: 'Safari, iPhone 16', location: 'Москва · 14:21', when: '15 мин назад', current: false },
    { device: 'Firefox 132, Linux', location: 'Санкт-Петербург · вчера 22:08', when: '14 ч назад', current: false },
];
</script>

<template>
    <v-card variant="outlined" class="pa-4">
        <h3 class="text-subtitle-2 mb-3">Активные сессии ({{ sessions.length }})</h3>
        <ul class="sessions-list">
            <li v-for="(s, i) in sessions" :key="i" class="session-row">
                <div class="session-info">
                    <div class="session-device">
                        {{ s.device }}
                        <v-chip v-if="s.current" color="primary" size="x-small" variant="tonal" class="ml-2">
                            эта сессия
                        </v-chip>
                    </div>
                    <div class="session-meta text-caption text-medium-emphasis">{{ s.location }} · {{ s.when }}</div>
                </div>
                <v-btn v-if="!s.current" variant="text" size="small" color="error"> Завершить </v-btn>
            </li>
        </ul>
    </v-card>
</template>

<style scoped>
.sessions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.session-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0ede4;
}
.session-row:last-child {
    border-bottom: none;
}
.session-device {
    font-weight: 500;
    color: #081319;
}
</style>
