<script setup>
import { RouterView } from 'vue-router';
import Button from './components/ui/button/Button.vue';
import { useUserStore } from './stores/user';
import Alert from './components/ui/alert/Alert.vue';
import AlertDescription from './components/ui/alert/AlertDescription.vue';
import Navbar from './components/Navigation/Navbar.vue';
import { cancelLOA } from './api/loa';

const userStore = useUserStore();

function formatDate(dateStr) {
  if (!dateStr) return "";
  return new Date(dateStr).toLocaleDateString("en-US", {
    year: "numeric",
    month: "short",
    day: "numeric",
  });
}

const environment = import.meta.env.VITE_ENVIRONMENT;
</script>

<template>
  <div class="flex flex-col min-h-screen">
    <div class="sticky top-0 bg-background z-50">
      <Navbar class="flex"></Navbar>
      <Alert v-if="environment == 'dev'" class="m-2 mx-auto w-5xl" variant="info">
        <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
          <p>This is a development build of the application. Some features will be unavailable or unstable.</p>
        </AlertDescription>
      </Alert>
      <Alert v-if="userStore.user?.LOAData?.[0]" class="m-2 mx-auto w-5xl" variant="info">
        <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
          <p>You are on LOA until <strong>{{ formatDate(userStore.user?.LOAData?.[0].end_date) }}</strong></p>
          <Button variant="secondary" @click="async () => { await cancelLOA(userStore.user?.LOAData?.[0].id); userStore.loadUser(); }">End
            LOA</Button>
        </AlertDescription>
      </Alert>
    </div>

    <RouterView class="flex-1 min-h-0"></RouterView>
  </div>
</template>

<style scoped></style>
