'use client'

import { useState, useEffect } from 'react'
import { useSearchParams } from 'next/navigation'
import { Note } from '@/lib/types'
import { getNotes, searchNotes } from '@/app/actions/notes'
import { NoteInput } from '@/components/note-input'
import { NoteGrid } from '@/components/note-grid'

export default function HomePage() {
  const searchParams = useSearchParams()
  const [notes, setNotes] = useState<Note[]>([])
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    const loadNotes = async () => {
      setIsLoading(true)
      const search = searchParams.get('search')
      const labelFilter = searchParams.get('labels')?.split(',').filter(Boolean) || []
      
      let allNotes = search ? await searchNotes(search) : await getNotes()

      // Filter by selected labels
      if (labelFilter.length > 0) {
        allNotes = allNotes.filter(note =>
          note.labels?.some(label => labelFilter.includes(label))
        )
      }

      setNotes(allNotes)
      setIsLoading(false)
    }

    loadNotes()
  }, [searchParams])

  return (
    <main className="container mx-auto px-4 py-8 max-w-7xl">
      <NoteInput />
      {isLoading ? (
        <div className="text-center py-8 text-gray-500">Loading...</div>
      ) : (
        <NoteGrid notes={notes} />
      )}
    </main>
  )
}