<script setup lang="ts">
/**
 * Settings → Профиль. Данные текущего user'а: имя, email, телефон, тайм-зона.
 * Источник дизайна: liderra_v8_handoff/concepts/v8_settings.html секция #profile.
 *
 * MVP: form-fields без save (TODO: PATCH /api/me).
 */
import { ref } from 'vue';

const fullName = ref('Иван Петров');
const email = ref('ivan.petrov@example.ru');
const phone = ref('+7 (916) 871-23-45');
const timezone = ref('Europe/Moscow');
const role = ref('Владелец');
</script>

<template>
    <div class="tab-content">
        <h2 class="tab-title text-h6 mb-4">Профиль</h2>

        <v-row class="profile-row">
            <v-col cols="auto">
                <v-avatar size="80" color="primary">
                    <span class="text-h5">ИП</span>
                </v-avatar>
                <v-btn variant="text" size="small" class="mt-2" prepend-icon="mdi-camera"> Сменить </v-btn>
            </v-col>
            <v-col>
                <v-row dense>
                    <v-col cols="12" md="6">
                        <v-text-field v-model="fullName" label="Полное имя" variant="outlined" density="comfortable" />
                    </v-col>
                    <v-col cols="12" md="6">
                        <v-text-field
                            v-model="email"
                            label="Email"
                            type="email"
                            variant="outlined"
                            density="comfortable"
                            disabled
                            persistent-hint
                            hint="Email менять только через support — связан с авторизацией"
                        />
                    </v-col>
                    <v-col cols="12" md="6">
                        <v-text-field v-model="phone" label="Телефон" variant="outlined" density="comfortable" />
                    </v-col>
                    <v-col cols="12" md="6">
                        <v-text-field
                            v-model="timezone"
                            label="Тайм-зона"
                            variant="outlined"
                            density="comfortable"
                            persistent-hint
                            hint="Используется в логах и напоминаниях"
                        />
                    </v-col>
                    <v-col cols="12" md="6">
                        <v-text-field v-model="role" label="Роль" variant="outlined" density="comfortable" disabled />
                    </v-col>
                </v-row>

                <div class="d-flex ga-2 mt-4">
                    <v-btn color="primary" variant="flat">Сохранить</v-btn>
                    <v-btn variant="text">Отмена</v-btn>
                </div>
            </v-col>
        </v-row>
    </div>
</template>

<style scoped>
.tab-title {
    font-variation-settings: 'opsz' 18;
    letter-spacing: -0.005em;
}
.profile-row {
    align-items: flex-start;
}
</style>
