'use client'

import dynamic from 'next/dynamic'
import { Note } from '@/lib/types'
import { NotesTabsView } from '@/components/notes-tabs-view'
import { NotesListView } from '@/components/notes-list-view'

const MasonryGridLazy = dynamic(
  () => import('@/components/masonry-grid').then((m) => m.MasonryGrid),
  {
    ssr: false,
    loading: () => (
      <div
        className="min-h-[200px] rounded-xl border border-dashed border-muted-foreground/20 bg-muted/30 animate-pulse"
        aria-hidden
      />
    ),
  }
)

export type NotesViewMode = 'masonry' | 'tabs' | 'list'

interface NotesMainSectionProps {
  notes: Note[]
  viewMode: NotesViewMode
  onEdit?: (note: Note, readOnly?: boolean) => void
  onSizeChange?: (noteId: string, size: 'small' | 'medium' | 'large') => void
  currentNotebookId?: string | null
  noteHistoryMode?: 'manual' | 'auto'
  onOpenHistory?: (note: Note) => void
  onEnableHistory?: (noteId: string) => Promise<void>
  onNoteCreated?: (note: Note) => void
}

export function NotesMainSection({
  notes,
  viewMode,
  onEdit,
  onSizeChange,
  currentNotebookId,
  noteHistoryMode = 'manual',
  onOpenHistory,
  onEnableHistory,
  onNoteCreated,
}: NotesMainSectionProps) {
  if (viewMode === 'list') {
    return (
      <div data-testid="notes-list">
        <NotesListView notes={notes} onEdit={onEdit} />
      </div>
    )
  }

  if (viewMode === 'tabs') {
    return (
      <div className="flex min-h-0 flex-1 flex-col" data-testid="notes-grid-tabs-wrap">
        <NotesTabsView
          notes={notes}
          onEdit={onEdit}
          currentNotebookId={currentNotebookId}
          noteHistoryMode={noteHistoryMode}
          onOpenHistory={onOpenHistory}
          onEnableHistory={onEnableHistory}
          onNoteCreated={onNoteCreated}
        />
      </div>
    )
  }

  return (
    <div data-testid="notes-grid">
      <MasonryGridLazy
        notes={notes}
        onEdit={onEdit}
        onSizeChange={onSizeChange}
        noteHistoryMode={noteHistoryMode}
        onOpenHistory={onOpenHistory}
      />
    </div>
  )
}