<script setup>
import { q, m, useQuasar, useAsyncData } from "#imports";
const $q = useQuasar();
const { data: my, refresh } = await useAsyncData("user-sessions", async () => {
  return await q({
    my: {
      sessions: true
    }
  }).then((res) => res.my);
});
const getDeviceIcon = (userAgent) => {
  if (userAgent.includes("Mobile")) return "smartphone";
  if (userAgent.includes("Tablet")) return "tablet";
  return "desktop_mac";
};
const getLocationDisplay = (session) => {
  if (session.location?.country) {
    return `${session.location.country} ${session.ip}`;
  }
  return session.ip;
};
const getLocationCode = (session) => {
  return session.location?.countryCode || "Unknown";
};
const revokeSession = async (jti) => {
  $q.dialog({
    title: "Confirm",
    message: "Are you sure you want to revoke this session?",
    cancel: true,
    persistent: true
  }).onOk(async () => {
    try {
      await m("revokeSession", {
        jti
      });
      $q.notify({
        type: "positive",
        message: "Session revoked successfully."
      });
      await refresh();
    } catch (error) {
      $q.notify({
        type: "negative",
        message: "Failed to revoke session."
      });
    }
  });
};
</script>

<template>
    <div>

        <q-list bordered separator>
            <q-item-label header>This is a list of devices that have logged into your account. Revoke any sessions that
                you do not recognize.</q-item-label>

            <q-item v-for="session in my.sessions" :key="session.jti">
                <q-item-section avatar>
                    <q-icon :name="getDeviceIcon(session.user_agent)" color="primary" size="lg" />
                </q-item-section>

                <q-item-section>
                    <q-item-label class="text-weight-bold">
                        {{ getLocationDisplay(session) }}
                    </q-item-label>
                    <q-item-label caption lines="2">
                        <div class="flex items-center q-my-xs">
                            <q-badge color="positive" label="active" />
                            <q-badge v-if="session.is_current" color="info" label="This device" class="q-ml-sm" />
                        </div>
                        <div class="q-mt-sm">
                            Last accessed on {{ session.last_access_time }}
                        </div>
                        <div v-if="session.location?.city" class="text-caption">
                            Seen in {{ getLocationCode(session) }}
                        </div>
                    </q-item-label>
                </q-item-section>

                <q-item-section side top>
                    <q-btn flat dense round icon="info" color="primary">
                        <q-popup-proxy anchor="top right" self="top left" :offset="[0, 10]">
                            <q-card style="min-width: 300px">
                                <q-card-section>
                                    <div class="text-h6">Session Details</div>
                                </q-card-section>

                                <q-separator />

                                <q-card-section>
                                    <div class="q-mb-md">
                                        <div class="text-caption text-grey">Session ID</div>
                                        <div class="text-body2">{{ session.jti }}</div>
                                    </div>

                                    <div class="q-mb-md">
                                        <div class="text-caption text-grey">IP Address</div>
                                        <div class="text-body2">{{ session.ip }}</div>
                                    </div>

                                    <div class="q-mb-md">
                                        <div class="text-caption text-grey">Login Time</div>
                                        <div class="text-body2">{{ session.login_dt }}</div>
                                    </div>

                                    <div v-if="session.location" class="q-mb-md">
                                        <div class="text-caption text-grey">Location</div>
                                        <div class="text-body2">
                                            {{ session.location.city }}, {{ session.location.regionName }}, {{
                                                session.location.country }}
                                        </div>
                                    </div>

                                    <div class="q-mb-md">
                                        <div class="text-caption text-grey">User Agent</div>
                                        <div class="text-body2 text-break" style="font-size: 12px">{{ session.user_agent
                                            }}</div>
                                    </div>
                                </q-card-section>

                                <q-separator />

                                <q-card-actions align="right">
                                    <q-btn flat label="Close" v-close-popup />
                                    <q-btn flat label="Revoke" color="negative" :disable="session.is_current"
                                        @click="revokeSession(session.jti)" />
                                </q-card-actions>
                            </q-card>
                        </q-popup-proxy>
                    </q-btn>
                </q-item-section>
            </q-item>
        </q-list>
    </div>
</template>
