"use client"

import { useQueryClient } from "@tanstack/react-query"
import { useMemo } from "react"
import { useProject } from "@/stores"

/**
 * Returns the display name of the currently selected project.
 * Falls back to the containerTag / id if a matching project record
 * hasn’t been fetched yet.
 */
export function useProjectName() {
	const { selectedProject } = useProject()
	const queryClient = useQueryClient()

	// This query is populated by ProjectsView – we just read from the cache.
	const projects = queryClient.getQueryData(["projects"]) as
		| Array<{ name: string; containerTag: string }>
		| undefined

	return useMemo(() => {
		if (selectedProject === "sm_project_default") return "Default Project"
		const found = projects?.find((p) => p.containerTag === selectedProject)
		return found?.name ?? selectedProject
	}, [projects, selectedProject])
}