/**
 * Layout for a single recollection: shared menubar and flipping card (Logos front / Flux back).
 */

import React, { useEffect } from 'react'
import { Link, useParams } from 'react-router-dom'
import { usePlatform } from '@/app/kosmos/KosmosContext'
import { RecollectionMenubarProvider } from './RecollectionMenubarContext'
import { RecollectionActionsProvider } from './RecollectionActionsContext'
import { RecollectionTitleContent } from './RecollectionTitleContent'
import { RecollectionMenubar } from './RecollectionMenubar'
import { RecollectionViewSwitcher } from './RecollectionViewSwitcher'
import { FlippingCardView } from './FlippingCardView'

export function RecollectionLayout() {
  const { recollectionId } = useParams<{ recollectionId: string }>()
  const { recollections, recordRecollectionAccess } = usePlatform()

  useEffect(() => {
    if (recollectionId) recordRecollectionAccess(recollectionId)
  }, [recollectionId, recordRecollectionAccess])

  const recollection = recollectionId ? recollections.find((p) => p.id === recollectionId) : null

  if (!recollectionId) return null
  if (!recollection) {
    return (
      <div className="flex flex-1 flex-col items-center justify-center gap-4 p-8">
        <p className="text-sm text-muted-foreground">Recollection not found.</p>
        <Link to="/recollections" className="text-sm text-primary hover:underline">
          Back to recollections
        </Link>
      </div>
    )
  }

  return (
    <RecollectionMenubarProvider>
      <RecollectionActionsProvider>
        <RecollectionTitleContent />
        <div className="relative flex min-h-0 flex-1 flex-col">
          <RecollectionMenubar />
          <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
            <FlippingCardView />
          </div>
          <RecollectionViewSwitcher />
        </div>
      </RecollectionActionsProvider>
    </RecollectionMenubarProvider>
  )
}