/**
 * Shared base menubar for a recollection: Back, optional custom content (from context), Logos/Flux switcher.
 */

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

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

  const recollection = recollectionId ? recollections.find((p) => p.id === recollectionId) : null
  const base = recollectionId ? `/recollections/${recollectionId}` : ''
  const defaultMiddle = 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 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 flex-1 items-center">
        {customContent ?? defaultMiddle}
      </div>
      {base && (
        <nav className="flex shrink-0 items-center gap-0.5" aria-label="Recollection pages">
          <NavLink
            to={`${base}/logos`}
            end
            className={({ isActive }) =>
              `flex items-center gap-1.5 rounded-sm px-2.5 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground ${isActive ? 'bg-accent font-medium text-foreground' : 'text-muted-foreground'}`
            }
          >
            <BookOpen className="size-3.5" />
            Logos
          </NavLink>
          <NavLink
            to={`${base}/flux`}
            className={({ isActive }) =>
              `flex items-center gap-1.5 rounded-sm px-2.5 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground ${isActive ? 'bg-accent font-medium text-foreground' : 'text-muted-foreground'}`
            }
          >
            <Workflow className="size-3.5" />
            Flux
          </NavLink>
        </nav>
      )}
    </div>
  )
}