import type { Ref, ComputedRef, Component, VNode } from 'vue'

export interface CatalogFilter {
  id: string
  label: string
}

export interface CatalogMapItem {
  uuid: string
  name?: string
  latitude: number
  longitude: number
  [key: string]: any
}

export interface CatalogHoveredItem {
  latitude: number
  longitude: number
}

export interface SubNavItem {
  label: string
  path: string
}

export interface CatalogLayoutData {
  // SubNavigation (optional - if provided, overrides default catalog nav)
  subNavItems?: SubNavItem[]

  // SearchBar
  searchQuery: Ref<string>
  activeFilters: ComputedRef<CatalogFilter[]> | Ref<CatalogFilter[]>
  displayedCount: ComputedRef<number> | Ref<number>
  totalCount: ComputedRef<number> | Ref<number>
  onSearch: () => void
  onRemoveFilter: (id: string) => void
  // Filter slot - can be a component, render function, or VNode
  filterComponent?: Component | (() => VNode | VNode[])
  // Header slot - optional component to render above the list (e.g. "Add" button)
  headerComponent?: Component | (() => VNode | VNode[])

  // Map
  mapItems: ComputedRef<CatalogMapItem[]> | Ref<CatalogMapItem[]>
  mapId: string
  pointColor: string
  hoveredItemId: Ref<string | undefined>
  hoveredItem: ComputedRef<CatalogHoveredItem | null> | Ref<CatalogHoveredItem | null>
  onMapSelect: (uuid: string) => void
  onBoundsChange?: (bounds: any) => void
  searchWithMap: Ref<boolean>

  // Clustering (optional)
  useServerClustering?: boolean
  clusteredNodes?: ComputedRef<any[]> | Ref<any[]>
}

const CATALOG_LAYOUT_KEY = Symbol('catalogLayout')

/**
 * Provide catalog layout data from page to layout
 */
export const provideCatalogLayout = (data: CatalogLayoutData) => {
  provide(CATALOG_LAYOUT_KEY, data)
}

/**
 * Inject catalog layout data in layout from page
 */
export const useCatalogLayoutData = (): CatalogLayoutData | undefined => {
  return inject<CatalogLayoutData>(CATALOG_LAYOUT_KEY)
}