<script setup lang="ts">
import { onBeforeMount, onMounted } from "vue";
import { useAuthStore } from "@/stores/users";
import { useRouter, useRoute } from "vue-router";
import { OpenAPI as AuthOpenAPI } from "@/client/auth";
import { Toast } from "bootstrap";

const router = useRouter();
const route = useRoute();

const store = useAuthStore();

let errorToast: Toast | null = null;

onBeforeMount(() => {
  if (store.authenticated) {
    // If user is authenticated redirect him to the dashboard
    router.push({ name: "buckets" });
  }
});

onMounted(() => {
  errorToast = new Toast("#loginErrorToast");
  // if there is a query param 'login_error' show the error toast
  if (route.query.login_error != null) {
    errorToast?.show();
  }
});
</script>

<template>
  <div class="toast-container position-fixed top-toast end-0 p-3">
    <div
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
      class="toast text-bg-danger align-items-center border-0"
      style="--bs-bg-opacity: 0.7"
      data-bs-config="{'delay': 8000}"
      data-bs-autohide="true"
      id="loginErrorToast"
    >
      <div class="toast-header text-bg-danger">
        <strong class="me-auto">Login Error</strong>
        <button
          type="button"
          class="btn-close btn-close-white"
          data-bs-dismiss="toast"
          aria-label="Close"
        ></button>
      </div>
      <div class="toast-body">
        <p>
          There has been some kind of error during the login.<br />
          Please try again later.
        </p>
        <p>Error Code: {{ route.query.login_error }}</p>
      </div>
    </div>
  </div>
  <div class="position-fixed start-50 translate-middle-x text-center">
    <img
      src="/src/assets/images/clowm.svg"
      class="img-fluid mb-3"
      width="128"
      height="128"
      alt="CloWM Logo"
    />
    <h1>
      <span class="blue fw-bold">Clo</span><span class="red fw-bold">W</span
      ><span class="green fw-bold">M</span>
    </h1>
    <h2>
      The <span class="blue fw-semibold">Clo</span>ud-based
      <span class="red fw-semibold">W</span>orkflow
      <span class="green fw-semibold">M</span>anager
    </h2>
  </div>
  <div
    class="card text-center ms-md-auto position-fixed top-50 start-50 translate-middle shadow"
  >
    <div class="card-header">Login</div>
    <div class="card-body">
      <p class="card-text text-secondary">
        Login to this service with LifeScience
      </p>
      <a :href="AuthOpenAPI.BASE + '/auth/login'" class="m-2">
        <img src="/src/assets/images/ls-login.png" alt="[LS Login]" />
      </a>
    </div>
  </div>
  <div class="position-fixed bottom-0 w-100 start-0">
    <div class="d-flex flex-row justify-content-evenly align-items-center">
      <div class="border rounded p-4 icon text-center" hidden>
        <h4 class="mb-4">A Service By</h4>
        <a href="https://nfdi4microbiota.de/">
          <img
            src="/src/assets/images/nfdi.svg"
            alt="NFDI4Microbiota Logo"
            height="50"
          />
        </a>
      </div>
      <div class="border rounded p-4 icon text-center">
        <h4 class="mb-4">Powered By</h4>
        <a href="https://www.denbi.de/">
          <img
            src="/src/assets/images/denbi.svg"
            alt="de.NBI Logo"
            height="50"
          />
        </a>
      </div>
      <div class="border rounded p-4 icon text-center">
        <h4 class="mb-4">Hosted By</h4>
        <a href="https://bibi.uni-bielefeld.de/">
          <img src="/src/assets/images/bibi.png" alt="BiBi Logo" height="50" />
        </a>
      </div>
      <div class="border rounded p-4 icon text-center">
        <h4 class="mb-4">Funded By</h4>
        <img src="/src/assets/images/dfg.png" alt="DFG Logo" height="50" />
      </div>
      <div class="border rounded p-4 icon text-center">
        <img
          src="/src/assets/images/unibi.svg"
          alt="Bielefeld University Logo"
          height="50"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
a > img:hover {
  filter: brightness(0.9);
}

.green {
  color: #198754;
}

.red {
  color: #dc3545;
}

.blue {
  color: #0d6efd;
}

.bottom-0 {
  bottom: 55px !important;
}

.icon {
  transition: transform 0.3s ease-out;
}

.icon:hover {
  transform: translate(0, -5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
</style>