<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
// @ts-ignore
import dashboardData from '~/dashboard.yml';

const route = useRoute();
const slugPath = Array.isArray(route.params.slug) ? route.params.slug.filter(Boolean) : (route.params.slug ? route.params.slug.split('/').filter(Boolean) : []);

// The imported data is an array of items
const allItems = computed(() => dashboardData || []);

let currentFolderId: string | null = null;
let currentFolder: any = null;

// Resolve current folder based on the slug path
for (const part of slugPath) {
  const folder = allItems.value.find((item: any) => item.type === 'folder' && item.slug === part && item.parentId === currentFolderId);
  if (folder) {
    currentFolder = folder;
    currentFolderId = folder.id;
  }
}

// Get children of the current folder
const items = computed(() => {
  return allItems.value
    .filter((item: any) => item.parentId === currentFolderId)
    .sort((a: any, b: any) => (a.order || 0) - (b.order || 0));
});

const breadcrumbs = computed(() => {
  let path = '';
  const crumbs = [{ label: 'Desktop', to: '/' }];
  
  slugPath.forEach(part => {
    path += `/${part}`;
    crumbs.push({ label: part, to: path });
  });
  
  return crumbs;
});
</script>

<template>
  <div class="h-full flex flex-col p-6">
    <div class="flex items-center justify-between mb-8">
      <UBreadcrumb :items="breadcrumbs" class="text-xl" />
    </div>

    <!-- Grid -->
    <div class="flex-1 overflow-auto">
      <div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-6">
        <DesktopItem v-for="item in items" :key="item.id" :item="item" />
      </div>
      
      <div v-if="items.length === 0" class="text-white/50 flex items-center justify-center h-64 text-lg">
        This folder is empty.
      </div>
    </div>
  </div>
</template>
