<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { menuUtils } from "@/utils/menuUtils";
import { storage } from "@/utils/storage";

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

const isAdminRoute = computed(() =>
  route.matched.some((r) => r.meta?.requiresAdmin),
);
const menuItems = computed(() =>
  isAdminRoute.value ? menuUtils.adminMenuItem : menuUtils.menuItem,
);
const isShowAuth = ref(false);

function readRolesFromStorage(): string[] {
  try {
    const raw =
      storage.get?.("autoflow-auth") ??
      localStorage.getItem("autoflow-auth") ??
      null;
    const auth = typeof raw === "string" ? JSON.parse(raw) : raw;

    let roles = auth?.userInfo?.roles ?? auth?.roles ?? [];
    if (typeof roles === "string") {
      roles = roles.split(",").map((s: string) => s.trim());
    }
    // 배열 보장
    if (!Array.isArray(roles)) return [];
    return roles;
  } catch {
    return [];
  }
}

const isAdmin = computed(() => {
  const roles = readRolesFromStorage();
  return roles.some((r) => r === "ROLE_ADMIN" || r === "ADMIN");
});

const isLinkActive = (link) => {
  return route.path.includes(link);
};

onMounted(() => {
  isShowAuth.value = true;
  //storage.getAuth().auth === "ADMIN";
});
</script>

<template>
  <v-card flat class="mx-auto">
    <v-list nav class="pa-5 pt-0">
      <template
        v-for="({ title, value, icon, path, depth }, i) in menuUtils.menuItem"
        :key="`group_id_${i}`"
      >
        <template v-if="depth && depth.length > 0">
          <v-list-group :key="`group_id_${i}`">
            <template #activator="{ props }">
              <v-list-item
                rounded
                v-bind="props"
                :title="title"
                :prepend-icon="icon"
                class="pa-2 rounded-lg"
              >
              </v-list-item>
            </template>
            <v-list-item
              v-for="({ title: t, path: p }, j) in depth"
              :key="`id_${j}`"
              rounded
              :title="t"
              :value="t"
              :to="p"
              :color="isLinkActive(p) ? 'primary' : null"
              :active="isLinkActive(p)"
              class="pa-2 rounded-lg"
            ></v-list-item>
          </v-list-group>
        </template>
        <template v-else>
          <v-list-item
            v-if="value !== 'project'"
            rounded
            :title="title"
            :value="value"
            :to="path"
            :prepend-icon="icon"
            :active="isLinkActive(path)"
            style="padding-inline-start: 10px"
            :active-color="isLinkActive(path) ? 'primary' : null"
            density="compact"
            class="pa-2 rounded-lg"
          ></v-list-item>
        </template>
      </template>
      <template v-if="isShowAuth">
        <template
          v-for="(
            { title, value, icon, path, depth }, i
          ) in menuUtils.adminMenuItem"
          :key="`group_id_6`"
        >
          <template v-if="depth && depth.length > 0">
            <v-list-group :key="`group_id_${i}`">
              <template #activator="{ props }">
                <v-list-item
                  rounded
                  v-bind="props"
                  :title="title"
                  :prepend-icon="icon"
                  class="pa-2 rounded-lg"
                >
                </v-list-item>
              </template>
              <v-list-item
                v-for="({ title: t, path: p }, j) in depth"
                :key="`id_${j}`"
                rounded
                :title="t"
                :value="t"
                :to="p"
                :active-color="isLinkActive(p) ? 'primary' : null"
                :active="isLinkActive(p)"
                class="pa-2 rounded-lg"
              ></v-list-item>
            </v-list-group>
          </template>
          <template v-else>
            <v-list-item
              rounded
              :title="title"
              :value="value"
              :to="path"
              :prepend-icon="icon"
              :active="isLinkActive(path)"
              style="padding-inline-start: 10px"
              :active-color="isLinkActive(path) ? 'primary' : null"
              density="compact"
              class="pa-2 rounded-lg"
            ></v-list-item>
          </template>
        </template>
      </template>
    </v-list>
  </v-card>
</template>

<style scoped lang="sass"></style>
