<template>
  <tec-action-section>
    <template #title>{{ $t('Browser Sessions') }}</template>

    <template #description>{{ $t('Manage and log out your active sessions on other browsers and devices.') }}</template>

    <template #content>
      <div class="text-gray-600">
        {{
          $t(
            'If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.'
          )
        }}
      </div>

      <!-- Other Browser Sessions -->
      <div class="mt-5 space-y-6" v-if="sessions.length > 0">
        <div class="flex items-center" v-for="(session, i) in sessions" :key="i">
          <div>
            <svg
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              stroke="currentColor"
              class="w-8 h-8 text-gray-500"
              v-if="session.agent.is_desktop"
            >
              <path d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
            </svg>

            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              stroke-width="2"
              stroke="currentColor"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="w-8 h-8 text-gray-500"
              v-else
            >
              <path d="M0 0h24v24H0z" stroke="none"></path>
              <rect x="7" y="4" width="10" height="16" rx="1"></rect>
              <path d="M11 5h2M12 17v.01"></path>
            </svg>
          </div>

          <div class="ml-3">
            <div class="text-gray-600">{{ session.agent.platform }} - {{ session.agent.browser }}</div>

            <div>
              <div class="text-xs text-gray-500">
                {{ session.ip_address }},

                <span class="text-green-500 font-semibold" v-if="session.is_current_device">{{ $t('This device') }}</span>
                <span v-else>{{ $t('Last active') }} {{ session.last_active }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex items-center mt-5">
        <tec-button @click="confirmLogout">{{ $t('Log Out Other Browser Sessions') }}</tec-button>

        <tec-action-message :on="form.recentlySuccessful" class="ml-3">{{ $t('Done.') }}</tec-action-message>
      </div>

      <!-- Log Out Other Devices Confirmation Modal -->
      <tec-dialog-modal :show="confirmingLogout" @close="closeModal">
        <template #title>{{ $t('Log Out Other Browser Sessions') }} </template>

        <template #content>
          {{
            $t('Please enter your password to confirm you would like to log out of your other browser sessions across all of your devices.')
          }}

          <div class="mt-4">
            <tec-input
              ref="password"
              type="password"
              placeholder="Password"
              v-model="form.password"
              class="mt-1 block w-3/4"
              @keyup.enter="logoutOtherBrowserSessions"
            />

            <tec-input-error :message="form.errors.password" class="mt-2" />
          </div>
        </template>

        <template #footer>
          <tec-secondary-button @click="closeModal">{{ $t('Cancel') }}</tec-secondary-button>

          <tec-button
            class="ml-2"
            :disabled="form.processing"
            @click="logoutOtherBrowserSessions"
            :class="{ 'opacity-25': form.processing }"
          >
            {{ $t('Log Out Other Browser Sessions') }}
          </tec-button>
        </template>
      </tec-dialog-modal>
    </template>
  </tec-action-section>
</template>

<script>
import TecInput from '@/Jetstream/Input.vue';
import TecButton from '@/Jetstream/Button.vue';
import TecInputError from '@/Jetstream/InputError.vue';
import TecDialogModal from '@/Jetstream/DialogModal.vue';
import TecActionMessage from '@/Jetstream/ActionMessage.vue';
import TecActionSection from '@/Jetstream/ActionSection.vue';
import TecSecondaryButton from '@/Jetstream/SecondaryButton.vue';

export default {
  props: ['sessions'],

  components: {
    TecInput,
    TecButton,
    TecInputError,
    TecDialogModal,
    TecActionMessage,
    TecActionSection,
    TecSecondaryButton,
  },

  data() {
    return {
      confirmingLogout: false,

      form: this.$inertia.form({
        password: '',
      }),
    };
  },

  methods: {
    confirmLogout() {
      this.confirmingLogout = true;

      setTimeout(() => this.$refs.password.focus(), 250);
    },

    logoutOtherBrowserSessions() {
      this.form.delete(route('other-browser-sessions.destroy'), {
        preserveScroll: true,
        onSuccess: () => this.closeModal(),
        onError: () => this.$refs.password.focus(),
        onFinish: () => this.form.reset(),
      });
    },

    closeModal() {
      this.confirmingLogout = false;

      this.form.reset();
    },
  },
};
</script>
