/**
 * Recollection menubar: Back | title + save status | registered menus (middle).
 */

import React from 'react'
import { Link, useParams } from 'react-router-dom'
import { usePlatform } from '@/app/kosmos/KosmosContext'
import { ArrowLeft } from 'lucide-react'
import { useRecollectionMenubar } from './RecollectionMenubarContext'
import { RecollectionEditViewMenus } from './RecollectionEditViewMenus'

export function RecollectionMenubar() {
  const { recollectionId } = useParams<{ recollectionId: string }>()
  const { recollections } = usePlatform()
  const { titleContent } = useRecollectionMenubar()

  const recollection = recollectionId ? recollections.find((p) => p.id === recollectionId) : null
  const defaultTitle = recollection ? (
    <span className="truncate text-sm font-medium text-muted-foreground">{recollection.name}</span>
  ) : null

  return (
    <div className="flex h-9 w-full shrink-0 items-center gap-2 overflow-visible border-b border-border/40 bg-background px-2">
      <Link
        to="/recollections"
        aria-label="Back to recollections"
        className="flex shrink-0 items-center rounded-sm px-2 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"
      >
        <ArrowLeft className="size-4" />
      </Link>
      <div className="flex min-w-0 shrink-0 items-center gap-1.5">
        {titleContent ?? defaultTitle}
      </div>
      <div className="flex min-w-0 flex-1 items-center gap-1 overflow-visible">
        <RecollectionEditViewMenus />
      </div>
    </div>
  )
}