<template>
  <IonApp>
    <IonMenu content-id="main-content" menu-id="main-menu">
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>OYS Borrow a Boat</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList lines="none">
          <!-- All authenticated users -->
          <IonItem button router-link="/" router-direction="root" @click="closeMenu">
            <IonIcon slot="start" :icon="homeOutline" />
            <IonLabel>Home</IonLabel>
          </IonItem>
          <IonItem button router-link="/schedule" router-direction="root" @click="closeMenu">
            <IonIcon slot="start" :icon="calendarOutline" />
            <IonLabel>Schedule</IonLabel>
          </IonItem>
          <IonItem button router-link="/boat" router-direction="root" @click="closeMenu">
            <IonIcon slot="start" :icon="boatOutline" />
            <IonLabel>Boats</IonLabel>
          </IonItem>
          <IonItem button router-link="/reference" router-direction="root" @click="closeMenu">
            <IonIcon slot="start" :icon="bookOutline" />
            <IonLabel>Reference</IonLabel>
          </IonItem>
          <IonItem button router-link="/profile" router-direction="root" @click="closeMenu">
            <IonIcon slot="start" :icon="personOutline" />
            <IonLabel>Profile</IonLabel>
          </IonItem>

          <!-- Boatswain + Admin: schedule management -->
          <template v-if="authStore.isBoatswain">
            <IonItemDivider>
              <IonLabel>Management</IonLabel>
            </IonItemDivider>
            <IonItem button router-link="/schedule/manage" router-direction="root" @click="closeMenu">
              <IonIcon slot="start" :icon="calendarNumberOutline" />
              <IonLabel>Manage Schedule</IonLabel>
            </IonItem>
          </template>

          <!-- Admin only -->
          <template v-if="authStore.isAdmin">
            <IonItem button router-link="/admin/user" router-direction="root" @click="closeMenu">
              <IonIcon slot="start" :icon="peopleOutline" />
              <IonLabel>Users</IonLabel>
            </IonItem>
            <IonItem button router-link="/admin/boat" router-direction="root" @click="closeMenu">
              <IonIcon slot="start" :icon="constructOutline" />
              <IonLabel>Manage Boats</IonLabel>
            </IonItem>
          </template>

          <!-- Sign out -->
          <IonItemDivider />
          <IonItem button @click="signOut">
            <IonIcon slot="start" :icon="logOutOutline" />
            <IonLabel>Sign Out</IonLabel>
            <IonNote slot="end">{{ authStore.displayName }}</IonNote>
          </IonItem>
        </IonList>
      </IonContent>
    </IonMenu>

    <IonRouterOutlet id="main-content" />
  </IonApp>
</template>

<script setup lang="ts">
import {
  IonApp, IonMenu, IonHeader, IonToolbar, IonTitle,
  IonContent, IonList, IonItem, IonItemDivider, IonIcon, IonLabel, IonNote,
  IonRouterOutlet, menuController,
} from '@ionic/vue'
import {
  homeOutline, calendarOutline, boatOutline, personOutline,
  bookOutline, calendarNumberOutline, peopleOutline, constructOutline, logOutOutline,
} from 'ionicons/icons'
import { useAuthStore } from '~/stores/auth'

const authStore = useAuthStore()

async function closeMenu() {
  await menuController.close('main-menu')
}

async function signOut() {
  await closeMenu()
  await authStore.signOut()
}

// Fetch member profile on app load (populates role for menu visibility)
onMounted(() => {
  if (authStore.user) authStore.fetchMember()
})

// Re-fetch when user changes (e.g., after login)
watch(() => authStore.user, (u) => {
  if (u) authStore.fetchMember()
  else authStore.member = null
})
</script>
