<template>
  <main>
    <div v-cloak class="container mx-auto max-w-3xl px-5 md:px-0">
      <div v-if="authenticated === true">
        <span
          v-if="requiresPassword"
          class="text-sm text-gray-400 dark:text-neutral-400 mb-10 mr-2 mt-3 cursor-pointer hover:underline float-right"
          @click="logout"
        >
          Logout
          <IconLogout />
        </span>
        <h1 class="text-4xl dark:text-neutral-200 font-medium mt-2 mb-2">
          <img src="./assets/img/logo.png" width="32" class="inline align-middle dark:bg" />
          <span class="align-middle">WireGuard</span>
        </h1>
        <h2 class="text-sm text-gray-400 dark:text-neutral-400 mb-10"></h2>

        <UpdateNotification :latest-release="latestRelease" :current-release="currentRelease" />

        <div class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden">
          <ClientNewButton @create-new-client="handleNewClient" />

          <div v-if="clients && clients.length > 0">
            <!-- Client -->
            <div v-for="client in clients" :key="client.id">
              <Client :client="client" />
            </div>
            <div v-if="clients && clients.length === 0">
              <p class="text-center m-10 text-gray-400 dark:text-neutral-400 text-sm">
                There are no clients yet.<br /><br />
                <button
                  class="bg-red-800 hover:bg-red-700 text-white border-2 border-none py-2 px-4 rounded inline-flex items-center transition"
                  @click="
                    clientCreateShowModal = true;
                    clientCreateName = '';
                  "
                >
                  <IconNew class="w-4 mr-2" />
                  <span class="text-sm">New Client</span>
                </button>
              </p>
            </div>
            <div v-if="clients === null" class="text-gray-200 dark:text-red-300 p-5">
              <LoadingSpinner />
            </div>
          </div>
        </div>

        <!-- QR Code-->
        <div v-if="qrcode">
          <div class="bg-black bg-opacity-50 fixed top-0 right-0 left-0 bottom-0 flex items-center justify-center z-20">
            <div class="bg-white rounded-md shadow-lg relative p-8">
              <button
                class="absolute right-4 top-4 text-gray-600 dark:text-neutral-500 hover:text-gray-800 dark:hover:text-neutral-700"
                @click="qrcode = null"
              >
                <IconClose />
              </button>
              <img :src="qrcode" />
            </div>
          </div>
        </div>

        <!-- Create Dialog -->
        <div v-if="clientCreateShowModal" class="fixed z-10 inset-0 overflow-y-auto">
          <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
              <div class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75 dark:opacity-50"></div>
            </div>

            <!-- This element is to trick the browser into centering the modal contents. -->
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

            <div
              class="inline-block align-bottom bg-white dark:bg-neutral-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full"
              role="dialog"
              aria-modal="true"
              aria-labelledby="modal-headline"
            >
              <div class="bg-white dark:bg-neutral-700 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                  <div
                    class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-800 sm:mx-0 sm:h-10 sm:w-10"
                  >
                    <IconNew class="h-6 w-6 text-white" />
                  </div>
                  <div class="flex-grow mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                    <h3 id="modal-headline" class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200">
                      New Client
                    </h3>
                    <div class="mt-2">
                      <p class="text-sm text-gray-500">
                        <input
                          v-model.trim="clientCreateName"
                          class="rounded p-2 border-2 dark:bg-neutral-700 dark:text-neutral-200 border-gray-100 dark:border-neutral-600 focus:border-gray-200 focus:dark:border-neutral-500 dark:placeholder:text-neutral-400 outline-none w-full"
                          type="text"
                          placeholder="Name"
                        />
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="bg-gray-50 dark:bg-neutral-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button
                  v-if="clientCreateName.length"
                  type="button"
                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-800 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
                  @click="createClient()"
                >
                  Create
                </button>
                <button
                  v-else
                  type="button"
                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-200 dark:bg-neutral-400 text-base font-medium text-white dark:text-neutral-300 sm:ml-3 sm:w-auto sm:text-sm cursor-not-allowed"
                >
                  Create
                </button>
                <button
                  type="button"
                  class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-neutral-500 shadow-sm px-4 py-2 bg-white dark:bg-neutral-500 text-base font-medium text-gray-700 dark:text-neutral-50 hover:bg-gray-50 dark:hover:bg-neutral-600 dark:hover:border-neutral-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                  @click="clientCreateShowModal = null"
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Delete Dialog -->
        <div v-if="clientToDelete" class="fixed z-10 inset-0 overflow-y-auto">
          <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <!--
  Background overlay, show/hide based on modal state.

  Entering: "ease-out duration-300"
  From: "opacity-0"
  To: "opacity-100"
  Leaving: "ease-in duration-200"
  From: "opacity-100"
  To: "opacity-0"
-->
            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
              <div class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75 dark:opacity-50"></div>
            </div>

            <!-- This element is to trick the browser into centering the modal contents. -->
            <!-- TODO: Check if still relevant? -->
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <!--
  Modal panel, show/hide based on modal state.

  Entering: "ease-out duration-300"
  From: "opacity-0 tranneutral-y-4 sm:tranneutral-y-0 sm:scale-95"
  To: "opacity-100 tranneutral-y-0 sm:scale-100"
  Leaving: "ease-in duration-200"
  From: "opacity-100 tranneutral-y-0 sm:scale-100"
  To: "opacity-0 tranneutral-y-4 sm:tranneutral-y-0 sm:scale-95"
-->
            <div
              class="inline-block align-bottom bg-white dark:bg-neutral-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full"
              role="dialog"
              aria-modal="true"
              aria-labelledby="modal-headline"
            >
              <div class="bg-white dark:bg-neutral-700 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                  <div
                    class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
                  >
                    <!-- Heroicon name: outline/exclamation -->
                    <IconWarning />
                  </div>
                  <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                    <h3 id="modal-headline" class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200">
                      Delete Client
                    </h3>
                    <div class="mt-2">
                      <p class="text-sm text-gray-500 dark:text-neutral-300">
                        Are you sure you want to delete <strong>{{ clientToDelete.name }}</strong
                        >? This action cannot be undone.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="bg-gray-50 dark:bg-neutral-600 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button
                  type="button"
                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 dark:bg-red-600 text-base font-medium text-white dark:text-white hover:bg-red-700 dark:hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
                  @click="deleteClient(clientToDelete)"
                >
                  Delete
                </button>
                <button
                  type="button"
                  class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-neutral-500 shadow-sm px-4 py-2 bg-white dark:bg-neutral-500 text-base font-medium text-gray-700 dark:text-neutral-50 hover:bg-gray-50 dark:hover:bg-neutral-600 dark:hover:border-neutral-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                  @click="clientToDelete = null"
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-if="authenticated === false">
        <Auth />
      </div>

      <div v-if="authenticated === null" class="text-gray-300 dark:text-red-300 pt-24 pb-12">
        <LoadingSpinner />
      </div>
    </div>

    <Footer />
  </main>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import sha256 from 'crypto-js/sha256';

import Auth from '@/components/Auth.vue';
import UpdateNotification from '@/components/UpdateNotification.vue';
import ClientNewButton from '@/components/ClientNewButton.vue';
import IconLogout from '@/components/icons/IconLogout.vue';
import IconNew from '@/components/icons/IconNew.vue';
import LoadingSpinner from '@/components/LoadingSpinner.vue';
import IconClose from '@/components/icons/IconClose.vue';
import IconWarning from '@/components/icons/IconWarning.vue';
import Footer from '@/components/Footer.vue';

import API from '@/services/api';
import Client from '@/components/Client.vue';

import { useStore } from './store/store';
import { storeToRefs } from 'pinia';

const store = useStore();
const { authenticated, requiresPassword } = storeToRefs(store);

const { clients, clientsPersist, clientCreateShowModal, clientToDelete, clientCreateName, qrcode } = storeToRefs(store);

const logout = store.logout;
const createClient = store.createClient;
const deleteClient = store.deleteClient;

const currentRelease = ref(null);
const latestRelease = ref(null);

const refreshInterval = ref(null);

const api = new API();

onMounted(() => {
  api
    .getSession()
    .then((session) => {
      authenticated.value = session.authenticated;
      // authenticated.value = false; //debug
      requiresPassword.value = session.requiresPassword;

      refreshInterval.value = setInterval(refresh, 1000);
    })
    .catch((err) => {
      console.log(err.message || err.toString());
    });
});

onBeforeUnmount(() => {
  clearInterval(refreshInterval.value);
});

getRelease();

function handleNewClient() {
  clientCreateShowModal.value = true;
  clientCreateName.value = '';
}

async function getRelease() {
  try {
    const currentReleaseData = await api.getRelease();
    const latestReleaseData = await fetch('https://wg-easy.github.io/wg-easy/changelog.json')
      .then((res) => res.json())
      .then((releases) => {
        const releasesArray = Object.entries(releases).map(([version, changelog]) => ({
          version: parseInt(version, 10),
          changelog,
        }));
        releasesArray.sort((a, b) => {
          return b.version - a.version;
        });

        return releasesArray[0];
      });

    console.log(`Current Release: ${currentReleaseData}`);
    console.log(`Latest Release: ${latestReleaseData.version}`);

    if (currentReleaseData >= latestReleaseData.version) return;

    currentRelease.value = currentReleaseData;
    latestRelease.value = latestReleaseData;
  } catch (error) {
    console.log('Something went wrong', error);
  }
}

async function refresh({ updateCharts = false } = {}) {
  if (!authenticated.value) return;

  try {
    const clientsData = await api.getClients();
    clients.value = clientsData.map((client) => {
      if (client.name.includes('@') && client.name.includes('.')) {
        client.avatar = `https://www.gravatar.com/avatar/${sha256(client.name)}?d=blank`;
      }

      if (!clientsPersist[client.id]) {
        clientsPersist[client.id] = {};
        clientsPersist[client.id].transferRxHistory = Array(50).fill(0);
        clientsPersist[client.id].transferRxPrevious = client.transferRx;
        clientsPersist[client.id].transferTxHistory = Array(50).fill(0);
        clientsPersist[client.id].transferTxPrevious = client.transferTx;
      }

      // Debug
      client.transferRx = clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
      client.transferTx = clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
      client.latestHandshakeAt = new Date('2024-03-20');
      updateCharts = true; // DEV TODO: Update. Get from settings

      if (updateCharts) {
        clientsPersist[client.id].transferRxCurrent = client.transferRx - clientsPersist[client.id].transferRxPrevious;
        clientsPersist[client.id].transferRxPrevious = client.transferRx;
        clientsPersist[client.id].transferTxCurrent = client.transferTx - clientsPersist[client.id].transferTxPrevious;
        clientsPersist[client.id].transferTxPrevious = client.transferTx;

        clientsPersist[client.id].transferRxHistory.push(clientsPersist[client.id].transferRxCurrent);
        clientsPersist[client.id].transferRxHistory.shift();

        clientsPersist[client.id].transferTxHistory.push(clientsPersist[client.id].transferTxCurrent);
        clientsPersist[client.id].transferTxHistory.shift();
      }

      client.transferTxCurrent = clientsPersist[client.id].transferTxCurrent;
      client.transferRxCurrent = clientsPersist[client.id].transferRxCurrent;

      client.transferTxHistory = clientsPersist[client.id].transferTxHistory;
      client.transferRxHistory = clientsPersist[client.id].transferRxHistory;
      client.transferMax = Math.max(...client.transferTxHistory, ...client.transferRxHistory);

      client.hoverTx = clientsPersist[client.id].hoverTx;
      client.hoverRx = clientsPersist[client.id].hoverRx;

      return client;
    });
  } catch (error) {
    console.log('Something went wrong', error);
  }
}
</script>
