<script setup>
import { RouterLink, RouterView } from 'vue-router';
import Separator from './components/ui/separator/Separator.vue';
import Button from './components/ui/button/Button.vue';
import { Popover, PopoverContent, PopoverTrigger } from './components/ui/popover';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from './components/ui/dropdown-menu';
import { onMounted } from 'vue';
import { useUserStore } from './stores/user';
import Alert from './components/ui/alert/Alert.vue';
import AlertDescription from './components/ui/alert/AlertDescription.vue';

const userStore = useUserStore();

// onMounted(async () => {
//   const res = await fetch(`${import.meta.env.VITE_APIHOST}/members/me`, {
//     credentials: 'include',
//   });
//   const data = await res.json();
//   console.log(data);
//   userStore.user = data;
// });
const APIHOST = import.meta.env.VITE_APIHOST;

async function logout() {
  // await fetch(`${APIHOST}/logout`, {
  //   method: 'GET',
  //   credentials: 'include',
  // });

  userStore.user = null;
  window.location.href = APIHOST + "/logout";
}

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

<template>
  <div>
    <div class="flex items-center justify-between px-10">
      <div></div>
      <div class="h-15 flex items-center justify-center gap-20">
        <RouterLink to="/">
          <Button variant="link">Home</Button>
        </RouterLink>
        <RouterLink to="/calendar">
          <Button variant="link">Calendar</Button>
        </RouterLink>
        <RouterLink to="/members">
          <Button variant="link">Members</Button>
        </RouterLink>
        <Popover>
          <PopoverTrigger as-child>
            <Button variant="link">Forms</Button>
          </PopoverTrigger>
          <PopoverContent class="flex flex-col gap-4 items-center w-min">
            <RouterLink to="/transfer">
              <Button variant="link">Transfer Request</Button>
            </RouterLink>
            <RouterLink to="/trainingReport">
              <Button variant="link">Training Report</Button>
            </RouterLink>
          </PopoverContent>
        </Popover>
        <Popover>
          <PopoverTrigger as-child>
            <Button variant="link">Administration</Button>
          </PopoverTrigger>
          <PopoverContent class="flex flex-col gap-4 items-center w-min">
            <RouterLink to="/administration/rankChange">
              <Button variant="link">Promotions</Button>
            </RouterLink>
            <RouterLink to="/administration/loa">
              <Button variant="link">Leave of Absence</Button>
            </RouterLink>
            <RouterLink to="/administration/transfer">
              <Button variant="link">Transfer Requests</Button>
            </RouterLink>
            <RouterLink to="/administration/applications">
              <Button variant="link">Recruitment</Button>
            </RouterLink>
            <RouterLink to="/administration/roles">
              <Button variant="link">Role Management</Button>
            </RouterLink>
          </PopoverContent>
        </Popover>

      </div>
      <div>
        <DropdownMenu v-if="userStore.isLoggedIn">
          <DropdownMenuTrigger class="cursor-pointer">
            <p>{{ userStore.user.name }}</p>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuItem>My Profile</DropdownMenuItem>
            <DropdownMenuItem>Settings</DropdownMenuItem>
            <DropdownMenuItem>
              <RouterLink to="/loa">
                Submit LOA
              </RouterLink>
            </DropdownMenuItem>
            <DropdownMenuItem :variant="'destructive'" @click="logout()">Logout</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>

        <a v-else :href="APIHOST+'/login'">Login</a>
      </div>
    </div>
    <Separator></Separator>
    <Alert v-if="userStore.user?.loa?.[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?.loa?.[0].end_date) }}</strong></p>
        <Button variant="secondary">End LOA</Button>
      </AlertDescription>
    </Alert>

    <RouterView class=""></RouterView>
  </div>
</template>

<style scoped></style>
