<script setup>
import { useLayout } from "../../composables/layout/layout.js";
import { useRoute } from "vue-router";
import { computed } from "vue";
import { useAuth } from "../../composables/useAuth.js";
import oopsLight from "../../assets/images/landing/oops.png";
import oopsDark from "../../assets/images/landing/oops-dark.png";

const { isDarkTheme } = useLayout();
const route = useRoute();
const { isAuthenticated } = useAuth();

const heroSrc = computed(() => (isDarkTheme.value ? oopsDark : oopsLight));

const errorMessage = computed(() => {
  if (route.query.message) {
    return decodeURIComponent(route.query.message);
  }
  // Default message for server/backend errors
  return "Something went wrong on our end. Please try again later or contact support if the problem persists.";
});
</script>

<template>
  <section
    class="animate-fadein animate-duration-300 animate-ease-in landing-container mx-auto min-h-[75vh] lg:min-h-screen flex flex-col items-center justify-center"
  >
    <img
      class="w-64 lg:w-96"
      :src="heroSrc"
      alt="Server Error"
    />
    <h1 class="title-h5 lg:title-h1 mt-8">Oops!</h1>
    <p class="body-small lg:body-large mt-2 lg:mt-4 text-center max-w-md">
      {{ errorMessage }}
    </p>
    <router-link
      v-if="isAuthenticated"
      to="/dashboard"
      class="body-button bg-orange-600 w-fit mt-8 hover:bg-orange-500 px-4"
    >
      Go to Dashboard
    </router-link>
    <router-link
      v-else
      to="/login"
      class="body-button bg-orange-600 w-fit mt-8 hover:bg-orange-500 px-4"
    >
      Go to Login
    </router-link>
  </section>
</template>
