<script setup>
import { onMounted, inject, ref } from 'vue';
import { useRoute } from 'vue-router';

import CardList from 'src/components/ui/CardList.vue';
import VnList from 'src/components/ui/VnList.vue';

import { formatDateTitle } from 'src/lib/filters.js';

const jApi = inject('jApi');

const route = useRoute();

const accessLogs = ref([]);
const user = ref(null);

const getUser = async () => {
    try {
        if (!route.params.id) return;
        const [data] = await jApi.query(
            `SELECT u.id, u.name user, u.nickname, u.email, c.phone, r.name role
            FROM account.user u
            JOIN account.role r ON r.id = u.role
            LEFT JOIN vn.client c ON c.id = u.id
            WHERE u.id = #user`,
            { user: route.params.id }
        );
        user.value = data;
    } catch (error) {
        console.error('Error getting user:', error);
    }
};

const getAccessLogs = async () => {
    try {
        accessLogs.value = await jApi.query(
            `SELECT u.stamp, a.platform, a.browser, a.version, a.javascript, a.cookies
            FROM visitUser u
            JOIN visitAccess c ON c.id = u.accessFk
            JOIN visitAgent a ON a.id = c.agentFk
            WHERE u.userFk = #user
            ORDER BY u.stamp DESC
            LIMIT 8`,
            { user: route.params.id }
        );
    } catch (error) {
        console.error('Error getting access logs:', error);
    }
};

onMounted(async () => {
    getUser();
    getAccessLogs();
});
</script>

<template>
    <QPage class="vn-w-xs">
        <CardList
            v-if="user"
            :key="index"
            :clickable="false"
            rounded
            class="q-mb-md"
        >
            <template #content>
                <span class="text-bold text-h5 q-mb-sm">
                    {{ user?.nickname }}
                </span>
                <span>#{{ user?.id }} - {{ user.user }} </span>
                <span>{{ user?.role }} </span>
                <span>{{ user?.email }} </span>
                <span>{{ user?.phone }} </span>
            </template>
        </CardList>
        <VnList :rows="accessLogs">
            <CardList
                v-for="(accessLog, index) in accessLogs"
                :key="index"
                :clickable="false"
            >
                <template #content>
                    <span>
                        {{
                            formatDateTitle(accessLog.stamp, {
                                showTime: true,
                                shortDay: true,
                                shortMonth: true,
                                showSeconds: true
                            })
                        }}
                    </span>
                    <span
                        v-if="
                            accessLog.platform &&
                            accessLog.browser &&
                            accessLog.version
                        "
                    >
                        {{ accessLog.platform }} - {{ accessLog.browser }} -
                        {{ accessLog.version }}
                    </span>
                </template>
            </CardList>
        </VnList>
    </QPage>
</template>
