'use client'

import { useState, useCallback } from 'react'
import dynamic from 'next/dynamic'
import type { Note } from '@/lib/types'
import { NotesEditorialView } from '@/components/notes-editorial-view'
import { getNoteById } from '@/app/actions/notes'

const NoteEditor = dynamic(
  () => import('@/components/note-editor').then(m => ({ default: m.NoteEditor })),
  { ssr: false }
)

interface ArchiveClientProps {
  notes: Note[]
}

export function ArchiveClient({ notes }: ArchiveClientProps) {
  const [editingNote, setEditingNote] = useState<{ note: Note; readOnly: boolean } | null>(null)

  const handleOpen = useCallback(async (note: Note, readOnly = false) => {
    const fresh = await getNoteById(note.id)
    if (fresh) setEditingNote({ note: fresh, readOnly })
  }, [])

  const handleClose = useCallback(() => {
    setEditingNote(null)
  }, [])

  if (editingNote) {
    return (
      <NoteEditor
        note={editingNote.note}
        readOnly={editingNote.readOnly}
        onClose={handleClose}
        onNoteSaved={() => {}}
        fullPage
      />
    )
  }

  return (
    <NotesEditorialView
      notes={notes}
      onOpen={handleOpen}
    />
  )
}