import { useState } from 'react'
import type { Note } from './types'
import { useNotes } from './hooks/useNotes'
import NoteList from './components/NoteList'
import NoteEditor from './components/NoteEditor'
import FloatingButton from './components/FloatingButton'

function App() {
  const { notes, addNote, updateNote, deleteNote } = useNotes()
  const [selectedId, setSelectedId] = useState<number | null>(null)
  const [creating, setCreating] = useState(false)

  const selectedNote =
    selectedId === null ? null : (notes.find((note) => note.id === selectedId) ?? null)

  const createNote = () => setCreating(true)
  const cancelCreate = () => setCreating(false)

  const handleCreate = (title: string, content: string) => {
    addNote(title, content)
    setCreating(false)
  }

  const handleUpdate = (id: number, patch: Partial<Pick<Note, 'title' | 'content'>>) => {
    updateNote(id, patch)
    setSelectedId(null)
  }

  const handleDelete = (id: number) => {
    deleteNote(id)
    setSelectedId(null)
  }

  const goBack = () => {
    if (creating) cancelCreate()
    else setSelectedId(null)
  }

  return (
    <main className="mx-auto w-full max-w-2xl flex flex-col min-h-dvh pb-28">
      <header className="sticky top-0 z-10 bg-white/95 backdrop-blur border-b border-gray-200 px-4 py-3">
        {creating || selectedNote ? (
          <div className="flex items-center gap-1">
            <button
              type="button"
              onClick={goBack}
              aria-label="Retour"
              className="flex items-center justify-center w-11 h-11 -ml-2 rounded-full text-xl text-gray-700 hover:bg-gray-100 active:bg-gray-200"
            >
              ←
            </button>
            <h1 className="text-lg font-semibold">Notes</h1>
          </div>
        ) : (
          <h1 className="text-lg font-semibold">Notes</h1>
        )}
      </header>

      <section className="flex-1 px-4 py-4">
        {creating ? (
          <NoteEditor
            key="create"
            mode="create"
            onCreate={handleCreate}
            onCancelCreate={cancelCreate}
          />
        ) : selectedNote ? (
          <NoteEditor
            key={selectedNote.id}
            mode="edit"
            note={selectedNote}
            onUpdate={handleUpdate}
            onDelete={handleDelete}
          />
        ) : (
          <NoteList notes={notes} onSelect={setSelectedId} />
        )}
      </section>

      <FloatingButton onClick={createNote} />
    </main>
  )
}

export default App