<script setup>

const route = useRoute()
const auth = useAuthStore()

const {has} = usePermission()

const links = computed(() => {
  return [
      ...(auth.profile?.pinned_on_navigation || []).map(pin => {
        if(pin.type === "external") {
          return {
            label: pin.label,
            to: pin.link,
            icon: pin.icon,
            target: "_blank",
            pinned: true
          }
        }else if(pin.type === "standardEntity") {
          return {
            label: pin.label,
            to: `/standardEntity/${pin.datatype}/show/${pin.id}`,
            icon: pin.icon,
            pinned: true
          }
        }
      }),

    ... false ? [{
      label: "Support Tickets",
      to: "/support",
      icon: "i-heroicons-rectangle-stack",
    }] : [],
    {
      id: 'dashboard',
      label: "Dashboard",
      to: "/",
      icon: "i-heroicons-home"
    }, {
      id: 'historyitems',
      label: "Logbuch",
      to: "/historyitems",
      icon: "i-heroicons-book-open"
    },
    {
      label: "Organisation",
      icon: "i-heroicons-rectangle-stack",
      defaultOpen: false,
      children: [
        ... has("tasks") ? [{
          label: "Aufgaben",
          to: "/standardEntity/tasks",
          icon: "i-heroicons-rectangle-stack"
        }] : [],
        ... true ? [{
          label: "Plantafel",
          to: "/calendar/timeline",
          icon: "i-heroicons-calendar-days"
        }] : [],
        ... true ? [{
          label: "Kalender",
          to: "/calendar/grid",
          icon: "i-heroicons-calendar-days"
        }] : [],
        ... true ? [{
          label: "Termine",
          to: "/standardEntity/events",
          icon: "i-heroicons-calendar-days"
        }] : [],
        /*{
          label: "Dateien",
          to: "/files",
          icon: "i-heroicons-document"
        },*/
      ]
    },
    {
      label: "Dokumente",
      icon: "i-heroicons-rectangle-stack",
      defaultOpen: false,
      children: [
        {
          label: "Dateien",
          to: "/files",
          icon: "i-heroicons-document"
        },{
          label: "Boxen",
          to: "/standardEntity/documentboxes",
          icon: "i-heroicons-archive-box"
        },
      ]
    },
    {
      label: "Kommunikation",
      icon: "i-heroicons-megaphone",
      defaultOpen: false,
      children: [
        {
          label: "E-Mail",
          to: "/email/new",
          icon: "i-heroicons-envelope"
        }/*, {
          label: "Logbücher",
          to: "/communication/historyItems",
          icon: "i-heroicons-book-open"
        }, {
          label: "Chats",
          to: "/chats",
          icon: "i-heroicons-chat-bubble-left"
        }*/
      ]
    },
    ... (has("customers") || has("vendors") || has("contacts")) ? [{
      label: "Kontakte",
      defaultOpen: false,
      icon: "i-heroicons-user-group",
      children: [
        ... has("customers") ? [{
          label: "Kunden",
          to: "/standardEntity/customers",
          icon: "i-heroicons-user-group"
        }] : [],
        ... has("vendors") ? [{
          label: "Lieferanten",
          to: "/standardEntity/vendors",
          icon: "i-heroicons-truck"
        }] : [],
        ... has("contacts") ? [{
          label: "Ansprechpartner",
          to: "/standardEntity/contacts",
          icon: "i-heroicons-user-group"
        }] : [],
      ]
    },] : [],
    {
      label: "Mitarbeiter",
      defaultOpen:false,
      icon: "i-heroicons-user-group",
      children: [
          ... true ? [{
          label: "Projektzeiten",
          to: "/times",
          icon: "i-heroicons-clock"
        }] : [],
        ... true ? [{
          label: "Anwesenheiten",
          to: "/workingtimes",
          icon: "i-heroicons-clock"
        }] : [],
        ... has("absencerequests") ? [{
          label: "Abwesenheiten",
          to: "/standardEntity/absencerequests",
          icon: "i-heroicons-document-text"
        }] : [],
        {
          label: "Fahrten",
          to: "/trackingTrips",
          icon: "i-heroicons-map"
        },
      ]
    },
    ... [{
      label: "Buchhaltung",
      defaultOpen: false,
      icon: "i-heroicons-chart-bar-square",
      children: [
        {
          label: "Ausgangsbelege",
          to: "/createDocument",
          icon: "i-heroicons-document-text"
        },{
          label: "Serienvorlagen",
          to: "/createDocument/serialInvoice",
          icon: "i-heroicons-document-text"
        },{
          label: "Eingangsbelege",
          to: "/incomingInvoices",
          icon: "i-heroicons-document-text"
        },{
          label: "Kostenstellen",
          to: "/standardEntity/costcentres",
          icon: "i-heroicons-document-currency-euro"
        },{
          label: "Buchungskonten",
          to: "/accounts",
          icon: "i-heroicons-document-text"
        },{
          label: "zusätzliche Buchungskonten",
          to: "/standardEntity/ownaccounts",
          icon: "i-heroicons-document-text"
        },
        {
          label: "Bank",
          to: "/banking",
          icon: "i-heroicons-document-text"
        },
      ]
    }],
    ... has("inventory") ? [{
      label: "Lager",
      icon: "i-heroicons-puzzle-piece",
      defaultOpen: false,
      children: [
        /*{
          label: "Vorgänge",
          to: "/inventory",
          icon: "i-heroicons-square-3-stack-3d"
        },{
          label: "Bestände",
          to: "/inventory/stocks",
          icon: "i-heroicons-square-3-stack-3d"
        },*/
        ... has("spaces") ? [{
          label: "Lagerplätze",
          to: "/standardEntity/spaces",
          icon: "i-heroicons-square-3-stack-3d"
        }] : [],
      ]
    },] : [],
    {
      label: "Stammdaten",
      defaultOpen: false,
      icon: "i-heroicons-clipboard-document",
      children: [
        ... has("products") ? [{
          label: "Artikel",
          to: "/standardEntity/products",
          icon: "i-heroicons-puzzle-piece"
        }] : [],
        ... has("productcategories") ? [{
          label: "Artikelkategorien",
          to: "/standardEntity/productcategories",
          icon: "i-heroicons-puzzle-piece"
        }] : [],
        ... has("services") ? [{
          label: "Leistungen",
          to: "/standardEntity/services",
          icon: "i-heroicons-wrench-screwdriver"
        }] : [],
        ... has("servicecategories") ? [{
          label: "Leistungskategorien",
          to: "/standardEntity/servicecategories",
          icon: "i-heroicons-wrench-screwdriver"
        }] : [],
        {
          label: "Mitarbeiter",
          to: "/profiles",
          icon: "i-heroicons-user-group"
        },
        {
          label: "Stundensätze",
          to: "/standardEntity/hourrates",
          icon: "i-heroicons-user-group"
        },
        ... has("vehicles") ? [{
          label: "Fahrzeuge",
          to: "/standardEntity/vehicles",
          icon: "i-heroicons-truck"
        }] : [],
        ... has("inventoryitems") ? [{
          label: "Inventar",
          to: "/standardEntity/inventoryitems",
          icon: "i-heroicons-puzzle-piece"
        }] : [],
        ... has("inventoryitems") ? [{
          label: "Inventargruppen",
          to: "/standardEntity/inventoryitemgroups",
          icon: "i-heroicons-puzzle-piece"
        }] : [],
      ]
    },

    ... has("projects") ? [{
      label: "Projekte",
      to: "/standardEntity/projects",
      icon: "i-heroicons-clipboard-document-check"
    },] : [],
    ... has("contracts") ? [{
      label: "Verträge",
      to: "/standardEntity/contracts",
      icon: "i-heroicons-clipboard-document"
    }] : [],
    ... has("plants") ? [{
      label: "Objekte",
      to: "/standardEntity/plants",
      icon: "i-heroicons-clipboard-document"
    },] : [],
    ... has("checks") ? [{
      label: "Überprüfungen",
      to: "/standardEntity/checks",
      icon: "i-heroicons-magnifying-glass"
    },] : [],
    {
      label: "Einstellungen",
      defaultOpen: false,
      icon: "i-heroicons-cog-8-tooth",
      children: [
        {
          label: "Nummernkreise",
          to: "/settings/numberRanges",
          icon: "i-heroicons-clipboard-document-list"
        },/*{
          label: "Rollen",
          to: "/roles",
          icon: "i-heroicons-key"
        },*/{
          label: "E-Mail Konten",
          to: "/settings/emailAccounts",
          icon: "i-heroicons-envelope",
          disabled: true
        },{
          label: "Bankkonten",
          to: "/settings/banking",
          icon: "i-heroicons-currency-euro",
          disabled: true
        },{
          label: "Textvorlagen",
          to: "/settings/texttemplates",
          icon: "i-heroicons-clipboard-document-list"
        },/*{
          label: "Eigene Felder",
          to: "/settings/ownfields",
          icon: "i-heroicons-clipboard-document-list"
        },*/{
          label: "Firmeneinstellungen",
          to: "/settings/tenant",
          icon: "i-heroicons-building-office"
        },{
          label: "Projekttypen",
          to: "/projecttypes",
          icon: "i-heroicons-clipboard-document-list"
        },{
          label: "Export",
          to: "/export",
          icon: "i-heroicons-clipboard-document-list"
        }
      ]
    }
  ]
})

// nur Items mit Children → für Accordion
const accordionItems = computed(() =>
    links.value.filter(item => Array.isArray(item.children) && item.children.length > 0)
)

// nur Items ohne Children → als Buttons
const buttonItems = computed(() =>
    links.value.filter(item => !item.children || item.children.length === 0)
)
</script>

<template>
  <!-- Standalone Buttons -->
  <div class="flex flex-col gap-1">
    <UButton
        v-for="item in buttonItems"
        :key="item.label"
        :variant="item.pinned ? 'ghost' : 'ghost'"
        :color="(item.to && route.path === item.to) ? 'primary' : (item.pinned ? 'amber' : 'gray')"
        :icon="item.pinned ? 'i-heroicons-star' : item.icon"
        class="w-full"
        :to="item.to"
        :target="item.target"
    >
      <UIcon
          v-if="item.pinned"
          :name="item.icon"
          class="w-5 h-5 me-2"
      />
      {{ item.label }}
    </UButton>
  </div>
  <UDivider/>
  <!-- Accordion für die Items mit Children -->
  <UAccordion
      :items="accordionItems"
      :multiple="false"
      class="mt-2"
  >
    <template #default="{ item, open }">
      <UButton
          :variant="'ghost'"
          :color="(item.children?.some(c => route.path.includes(c.to))) ? 'primary' : 'gray'"
          :icon="item.icon"
          class="w-full"
      >
        {{ item.label }}
        <template #trailing>
          <UIcon
              name="i-heroicons-chevron-right-20-solid"
              class="w-5 h-5 ms-auto transform transition-transform duration-200"
              :class="[open && 'rotate-90']"
          />
        </template>
      </UButton>
    </template>

    <template #item="{ item }">
      <div class="flex flex-col">
        <UButton
            v-for="child in item.children"
            :key="child.label"
            variant="ghost"
            :color="child.to === route.path ? 'primary' : 'gray'"
            :icon="child.icon"
            class="ml-4"
            :to="child.to"
            :target="child.target"
            :disabled="child.disabled"
        >
          {{ child.label }}
        </UButton>
      </div>
    </template>
  </UAccordion>
<!--  <UAccordion
      :items="links"
      :multiple="false"
  >
    <template #default="{ item, index, open }">
      <UButton
          :variant="item.pinned ? 'ghost' : 'ghost'"
          :color="(item.to && route.path === item.to) || (item.children?.some(c => route.path.includes(c.to))) ? 'primary' : (item.pinned ? 'amber' : 'gray')"
          :icon="item.pinned ? 'i-heroicons-star' : item.icon"
          class="w-full"
          :to="item.to"
          :target="item.target"
      >
        <UIcon
            v-if="item.pinned"
            :name="item.icon" class="w-5 h-5 me-2" />
        {{ item.label }}

        <template v-if="item.children" #trailing>
          <UIcon
              name="i-heroicons-chevron-right-20-solid"
              class="w-5 h-5 ms-auto transform transition-transform duration-200"
              :class="[open && 'rotate-90']"
          />
        </template>
      </UButton>
    </template>

    <template #item="{ item }">
      <div class="flex flex-col" v-if="item.children?.length > 0">
        <UButton
            v-for="child in item.children"
            :key="child.label"
            variant="ghost"
            :color="child.to === route.path ? 'primary' : 'gray'"
            :icon="child.icon"
            class="ml-4"
            :to="child.to"
            :target="child.target"
        >
          {{ child.label }}
        </UButton>
      </div>
    </template>
  </UAccordion>-->

</template>