<template>
  <BaseModalLayout
    data-component-id="AssetBrowserModal"
    class="h-full w-full max-h-full max-w-full min-w-0"
    :content-title="contentTitle"
    @close="handleClose"
  >
    <template v-if="shouldShowLeftPanel" #leftPanel>
      <LeftSidePanel
        v-model="selectedCategory"
        data-component-id="AssetBrowserModal-LeftSidePanel"
        :nav-items="availableCategories"
      >
        <template #header-icon>
          <i-lucide:folder class="size-4" />
        </template>
        <template #header-title>{{ $t('assetBrowser.browseAssets') }}</template>
      </LeftSidePanel>
    </template>

    <template #header>
      <SearchBox
        v-model="searchQuery"
        size="lg"
        placeholder="Search assets..."
        class="max-w-[384px]"
      />
    </template>

    <template #content>
      <AssetGrid
        :assets="filteredAssets"
        @asset-select="handleAssetSelectAndEmit"
      />
    </template>
  </BaseModalLayout>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import SearchBox from '@/components/input/SearchBox.vue'
import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
import type { AssetItem } from '@/platform/assets/schemas/assetSchema'

import { useAssetBrowser } from '../composables/useAssetBrowser'
import { mockAssets } from '../fixtures/ui-mock-assets'
import AssetGrid from './AssetGrid.vue'

// Props
const props = defineProps<{
  nodeType?: string
  inputName?: string
  onSelect?: (assetPath: string) => void
  onClose?: () => void
  showLeftPanel?: boolean
  assets?: AssetItem[]
}>()

// Emits
const emit = defineEmits<{
  'asset-select': [asset: AssetDisplayItem]
  close: []
}>()

// Use provided assets or fallback to mock data
const assetsToUse = props.assets !== undefined ? props.assets : mockAssets

// Use AssetBrowser composable for all business logic
const {
  searchQuery,
  selectedCategory,
  availableCategories,
  contentTitle,
  filteredAssets,
  selectAsset
} = useAssetBrowser(assetsToUse)

// Compute whether to show left panel
const shouldShowLeftPanel = computed(() => {
  // If explicitly set to false, don't show
  if (props.showLeftPanel === false) return false

  // If explicitly set to true, always show
  if (props.showLeftPanel === true) return true

  // Auto-hide if only one unique asset category (excluding "All Models")
  return availableCategories.value.length >= 3
})

// Handle close button - call both the prop callback and emit the event
const handleClose = () => {
  props.onClose?.()
  emit('close')
}

// Handle asset selection and emit to parent
const handleAssetSelectAndEmit = (asset: AssetDisplayItem) => {
  selectAsset(asset) // This logs the selection for dev mode
  emit('asset-select', asset) // Emit the full asset object

  // Call prop callback if provided
  if (props.onSelect) {
    props.onSelect(asset.name) // Use asset name as the asset path
  }
}
</script>
