<template>
  <div class="h-full flex flex-col">
    <!-- Header -->
    <div class="p-4 sm:p-6 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div class="flex items-center justify-between">
        <div>
          <h2 class="text-xl font-semibold">Assets</h2>
          <p class="text-sm text-muted-foreground mt-1">
            Manage project assets including characters, props, sets, and vehicles
          </p>
        </div>
        <div class="flex items-center gap-2">
          <Badge variant="outline" class="text-xs">
            {{ totalAssets }} {{ totalAssets === 1 ? 'asset' : 'assets' }}
          </Badge>
        </div>
      </div>
    </div>

    <!-- Content -->
    <div class="flex-1 overflow-hidden flex flex-col min-h-0">
      <div class="flex-1 min-h-0 flex flex-col">
        <AssetBrowser :project-id="projectId" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { Badge } from '@/components/ui/badge'
import AssetBrowser from '@/components/asset/AssetBrowser.vue'
import { useAssetsStore } from '@/stores/assets'

const route = useRoute()
const assetsStore = useAssetsStore()

// Computed properties
const projectId = computed(() => {
  const id = route.params.projectId
  return typeof id === 'string' ? parseInt(id) : Array.isArray(id) ? parseInt(id[0]) : 0
})

const totalAssets = computed(() => assetsStore.assets.length)
</script>