import { useStore } from 'zustand'
import { defaultKeyStats, type KeyStats, type StatsStore } from './stats-store'
import type { EngineStore } from './store'
import type { SourceState } from './types'

/**
 * Subscribe to a single engine slice by key.
 * The component re-renders only when that slice changes.
 *
 * @example
 * const slice = useEngineSlice<User>(engine, 'user')
 * if (slice?.isLoading) return <Spinner />
 * return <div>{slice?.data?.name}</div>
 */
export function useEngineSlice<T = unknown>(
  engine: { store: EngineStore },
  key: string,
): SourceState<T> | undefined {
  return useStore(engine.store, (state) => state.slices[key]) as
    | SourceState<T>
    | undefined
}

/**
 * Subscribe to the performance stats for a single key.
 * The component re-renders only when that key's stats change.
 * Returns zeroed stats if the key has not been registered yet.
 *
 * @example
 * const stats = useEngineStats(engine, 'user')
 * return <div>API calls: {stats.apiFetchCount} | Cache hits: {stats.cacheHitCount}</div>
 */
export function useEngineStats(
  engine: { statsStore: StatsStore },
  key: string,
): KeyStats {
  return useStore(engine.statsStore, (state) => state[key] ?? defaultKeyStats())
}