'use client'

import { useState, useEffect, useCallback } from 'react'
import { useSearchParams, useRouter } from 'next/navigation'
import { Note } from '@/lib/types'
import { getAllNotes, searchNotes } from '@/app/actions/notes'
import { getAISettings } from '@/app/actions/ai-settings'
import { NoteInput } from '@/components/note-input'
import { NotesMainSection, type NotesViewMode } from '@/components/notes-main-section'
import { NotesViewToggle } from '@/components/notes-view-toggle'
import { MemoryEchoNotification } from '@/components/memory-echo-notification'
import { NotebookSuggestionToast } from '@/components/notebook-suggestion-toast'
import { NoteEditor } from '@/components/note-editor'
import { BatchOrganizationDialog } from '@/components/batch-organization-dialog'
import { AutoLabelSuggestionDialog } from '@/components/auto-label-suggestion-dialog'
import { FavoritesSection } from '@/components/favorites-section'
import { RecentNotesSection } from '@/components/recent-notes-section'
import { Button } from '@/components/ui/button'
import { Wand2 } from 'lucide-react'
import { useLabels } from '@/context/LabelContext'
import { useNoteRefresh } from '@/context/NoteRefreshContext'
import { useReminderCheck } from '@/hooks/use-reminder-check'
import { useAutoLabelSuggestion } from '@/hooks/use-auto-label-suggestion'
import { useNotebooks } from '@/context/notebooks-context'
import { Folder, Briefcase, FileText, Zap, BarChart3, Globe, Sparkles, Book, Heart, Crown, Music, Building2, Plane, ChevronRight, Plus } from 'lucide-react'
import { cn } from '@/lib/utils'
import { LabelFilter } from '@/components/label-filter'
import { useLanguage } from '@/lib/i18n'
import { useHomeView } from '@/context/home-view-context'

export default function HomePage() {

  const searchParams = useSearchParams()
  const router = useRouter()
  const { t } = useLanguage()
  // Force re-render when search params change (for filtering)
  const [notes, setNotes] = useState<Note[]>([])
  const [pinnedNotes, setPinnedNotes] = useState<Note[]>([])
  const [recentNotes, setRecentNotes] = useState<Note[]>([])
  const [showRecentNotes, setShowRecentNotes] = useState(true)
  const [notesViewMode, setNotesViewMode] = useState<NotesViewMode>('masonry')
  const [editingNote, setEditingNote] = useState<{ note: Note; readOnly?: boolean } | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [notebookSuggestion, setNotebookSuggestion] = useState<{ noteId: string; content: string } | null>(null)
  const [batchOrganizationOpen, setBatchOrganizationOpen] = useState(false)
  const { refreshKey } = useNoteRefresh()
  const { labels } = useLabels()
  const { setControls } = useHomeView()

  // Auto label suggestion (IA4)
  const { shouldSuggest: shouldSuggestLabels, notebookId: suggestNotebookId, dismiss: dismissLabelSuggestion } = useAutoLabelSuggestion()
  const [autoLabelOpen, setAutoLabelOpen] = useState(false)

  // Open auto label dialog when suggestion is available
  useEffect(() => {
    if (shouldSuggestLabels && suggestNotebookId) {
      setAutoLabelOpen(true)
    }
  }, [shouldSuggestLabels, suggestNotebookId])

  // Check if viewing Notes générales (no notebook filter)
  const notebookFilter = searchParams.get('notebook')
  const isInbox = !notebookFilter

  // Callback for NoteInput to trigger notebook suggestion and update UI
  const handleNoteCreated = useCallback((note: Note) => {


    // Update UI immediately by adding the note to the list if it matches current filters
    setNotes((prevNotes) => {
      // Check if note matches current filters
      const notebookFilter = searchParams.get('notebook')
      const labelFilter = searchParams.get('labels')?.split(',').filter(Boolean) || []
      const colorFilter = searchParams.get('color')
      const search = searchParams.get('search')?.trim() || null

      // Check notebook filter
      if (notebookFilter && note.notebookId !== notebookFilter) {
        return prevNotes // Note doesn't match notebook filter
      }
      if (!notebookFilter && note.notebookId) {
        return prevNotes // Viewing inbox but note has notebook
      }

      // Check label filter
      if (labelFilter.length > 0) {
        const noteLabels = note.labels || []
        if (!noteLabels.some((label: string) => labelFilter.includes(label))) {
          return prevNotes // Note doesn't match label filter
        }
      }

      // Check color filter
      if (colorFilter) {
        const labelNamesWithColor = labels
          .filter((label: any) => label.color === colorFilter)
          .map((label: any) => label.name)
        const noteLabels = note.labels || []
        if (!noteLabels.some((label: string) => labelNamesWithColor.includes(label))) {
          return prevNotes // Note doesn't match color filter
        }
      }

      // Check search filter (simple check - if searching, let refresh handle it)
      if (search) {
        // If searching, refresh to get proper search results
        router.refresh()
        return prevNotes
      }

      // Note matches all filters - add it optimistically to the beginning of the list
      // (newest notes first based on order: isPinned desc, order asc, updatedAt desc)
      const isPinned = note.isPinned || false
      const pinnedNotes = prevNotes.filter(n => n.isPinned)
      const unpinnedNotes = prevNotes.filter(n => !n.isPinned)

      if (isPinned) {
        // Add to beginning of pinned notes
        return [note, ...pinnedNotes, ...unpinnedNotes]
      } else {
        // Add to beginning of unpinned notes
        return [...pinnedNotes, note, ...unpinnedNotes]
      }
    })

    // Only suggest if note has no notebook and has 20+ words
    if (!note.notebookId) {
      const wordCount = (note.content || '').trim().split(/\s+/).filter(w => w.length > 0).length


      if (wordCount >= 20) {

        setNotebookSuggestion({
          noteId: note.id,
          content: note.content || ''
        })
      } else {

      }
    } else {

    }

    // Note: revalidatePath('/') is already called in the server action,
    // and the optimistic update above already adds the note to state.
    // No additional router.refresh() needed — avoids visible re-render flash.
  }, [searchParams, labels, router])

  const handleOpenNote = (noteId: string) => {
    const note = notes.find(n => n.id === noteId)
    if (note) {
      setEditingNote({ note, readOnly: false })
    }
  }

  // Enable reminder notifications
  useReminderCheck(notes)

  // Load settings + notes in a single effect to avoid cascade re-renders
  useEffect(() => {
    let cancelled = false

    const load = async () => {
      // Load settings first
      let showRecent = true
      let viewMode: NotesViewMode = 'masonry'
      try {
        const settings = await getAISettings()
        if (cancelled) return
        showRecent = settings?.showRecentNotes !== false
        viewMode =
          settings?.notesViewMode === 'masonry'
            ? 'masonry'
            : settings?.notesViewMode === 'tabs' || settings?.notesViewMode === 'list'
              ? 'tabs'
              : 'masonry'
      } catch {
        // Default to true on error
      }
      if (cancelled) return
      setShowRecentNotes(showRecent)
      setNotesViewMode(viewMode)

      // Then load notes
      setIsLoading(true)
      const search = searchParams.get('search')?.trim() || null
      const semanticMode = searchParams.get('semantic') === 'true'
      const labelFilter = searchParams.get('labels')?.split(',').filter(Boolean) || []
      const colorFilter = searchParams.get('color')
      const notebookFilter = searchParams.get('notebook')

      let allNotes = search ? await searchNotes(search, semanticMode, notebookFilter || undefined) : await getAllNotes()
      if (cancelled) return

      // Filter by selected notebook
      if (notebookFilter) {
        allNotes = allNotes.filter((note: any) => note.notebookId === notebookFilter)
      } else {
        allNotes = allNotes.filter((note: any) => !note.notebookId)
      }

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

      // Filter by color
      if (colorFilter) {
        const labelNamesWithColor = labels
          .filter((label: any) => label.color === colorFilter)
          .map((label: any) => label.name)

        allNotes = allNotes.filter((note: any) =>
          note.labels?.some((label: string) => labelNamesWithColor.includes(label))
        )
      }

      // Derive pinned notes from already-fetched allNotes (no extra server call)
      const pinnedFilter = notebookFilter
        ? allNotes.filter((note: any) => note.isPinned && note.notebookId === notebookFilter)
        : allNotes.filter((note: any) => note.isPinned && !note.notebookId)

      setPinnedNotes(pinnedFilter)

      // Derive recent notes from already-fetched allNotes (no extra server call)
      if (showRecent) {
        const sevenDaysAgo = new Date()
        sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7)
        sevenDaysAgo.setHours(0, 0, 0, 0)

        const recentFiltered = allNotes
          .filter((note: any) => {
            return !note.isArchived && !note.dismissedFromRecent && note.contentUpdatedAt >= sevenDaysAgo
          })
          .sort((a: any, b: any) => new Date(b.contentUpdatedAt).getTime() - new Date(a.createdAt).getTime())
          .slice(0, 3)

        if (notebookFilter) {
          setRecentNotes(recentFiltered.filter((note: any) => note.notebookId === notebookFilter))
        } else {
          setRecentNotes(recentFiltered)
        }
      } else {
        setRecentNotes([])
      }

      setNotes(allNotes)
      setIsLoading(false)
    }

    load()
    return () => { cancelled = true }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchParams, refreshKey]) // Intentionally omit 'labels' to prevent reload when adding tags
  // Get notebooks context to display header
  const { notebooks } = useNotebooks()
  const currentNotebook = notebooks.find((n: any) => n.id === searchParams.get('notebook'))
  const [showNoteInput, setShowNoteInput] = useState(false)

  useEffect(() => {
    setControls({
      isTabsMode: notesViewMode === 'tabs',
      openNoteComposer: () => setShowNoteInput(true),
    })
    return () => setControls(null)
  }, [notesViewMode, setControls])

  // Get icon component for header
  const getNotebookIcon = (iconName: string) => {
    const ICON_MAP: Record<string, any> = {
      'folder': Folder,
      'briefcase': Briefcase,
      'document': FileText,
      'lightning': Zap,
      'chart': BarChart3,
      'globe': Globe,
      'sparkle': Sparkles,
      'book': Book,
      'heart': Heart,
      'crown': Crown,
      'music': Music,
      'building': Building2,
      'flight_takeoff': Plane,
    }
    return ICON_MAP[iconName] || Folder
  }

  // Handle Note Created to close the input if desired, or keep open
  const handleNoteCreatedWrapper = (note: any) => {
    handleNoteCreated(note)
    setShowNoteInput(false)
  }

  // Helper for Breadcrumbs
  const Breadcrumbs = ({ notebookName }: { notebookName: string }) => (
    <div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
      <span>{t('nav.notebooks')}</span>
      <ChevronRight className="w-4 h-4" />
      <span className="font-medium text-primary">{notebookName}</span>
    </div>
  )

  const isTabs = notesViewMode === 'tabs'

  return (
    <div
      className={cn(
        'flex w-full min-h-0 flex-1 flex-col',
        isTabs ? 'gap-3 py-1' : 'h-full px-2 py-6 sm:px-4 md:px-8'
      )}
    >
      {/* Notebook Specific Header */}
      {currentNotebook ? (
        <div
          className={cn(
            'flex flex-col animate-in fade-in slide-in-from-top-2 duration-300',
            isTabs ? 'mb-3 gap-3' : 'mb-8 gap-6'
          )}
        >
          {/* Breadcrumbs */}
          <Breadcrumbs notebookName={currentNotebook.name} />

          <div className="flex items-start justify-between">
            {/* Title Section */}
            <div className="flex items-center gap-5">
              <div className="p-3 bg-primary/10 dark:bg-primary/20 rounded-xl">
                {(() => {
                  const Icon = getNotebookIcon(currentNotebook.icon || 'folder')
                  return (
                    <Icon
                      className={cn("w-8 h-8", !currentNotebook.color && "text-primary dark:text-primary-foreground")}
                      style={currentNotebook.color ? { color: currentNotebook.color } : undefined}
                    />
                  )
                })()}
              </div>
              <h1 className="text-4xl font-bold text-gray-900 dark:text-white tracking-tight">{currentNotebook.name}</h1>
            </div>

            {/* Actions Section */}
            <div className="flex flex-wrap items-center gap-3">
              <NotesViewToggle mode={notesViewMode} onModeChange={setNotesViewMode} />
              <LabelFilter
                selectedLabels={searchParams.get('labels')?.split(',').filter(Boolean) || []}
                onFilterChange={(newLabels) => {
                  const params = new URLSearchParams(searchParams.toString())
                  if (newLabels.length > 0) params.set('labels', newLabels.join(','))
                  else params.delete('labels')
                  router.push(`/?${params.toString()}`)
                }}
                className="border-gray-200"
              />
              {!isTabs && (
                <Button
                  onClick={() => setShowNoteInput(!showNoteInput)}
                  className="h-10 px-6 rounded-full bg-primary hover:bg-primary/90 text-primary-foreground font-medium shadow-sm gap-2 transition-all"
                >
                  <Plus className="w-5 h-5" />
                  {t('notes.addNote') || 'Add Note'}
                </Button>
              )}
            </div>
          </div>
        </div>
      ) : (
        /* Default Header for Home/Inbox */
        <div
          className={cn(
            'flex flex-col animate-in fade-in slide-in-from-top-2 duration-300',
            isTabs ? 'mb-3 gap-3' : 'mb-8 gap-6'
          )}
        >
          {/* Breadcrumbs Placeholder or just spacing */}
          {!isTabs && <div className="mb-1 h-5" />}

          <div className="flex items-start justify-between">
            {/* Title Section */}
            <div className="flex items-center gap-5">
              <div className="p-3 bg-white border border-gray-100 dark:bg-gray-800 dark:border-gray-700 rounded-xl shadow-sm">
                <FileText className="w-8 h-8 text-primary" />
              </div>
              <h1 className="text-4xl font-bold text-gray-900 dark:text-white tracking-tight">{t('notes.title')}</h1>
            </div>

            {/* Actions Section */}
            <div className="flex flex-wrap items-center gap-3">
              <NotesViewToggle mode={notesViewMode} onModeChange={setNotesViewMode} />
              <LabelFilter
                selectedLabels={searchParams.get('labels')?.split(',').filter(Boolean) || []}
                onFilterChange={(newLabels) => {
                  const params = new URLSearchParams(searchParams.toString())
                  if (newLabels.length > 0) params.set('labels', newLabels.join(','))
                  else params.delete('labels')
                  router.push(`/?${params.toString()}`)
                }}
                className="border-gray-200"
              />

              {/* AI Organization Button - Moved to Header */}
              {isInbox && !isLoading && notes.length >= 2 && (
                <Button
                  onClick={() => setBatchOrganizationOpen(true)}
                  variant="outline"
                  className="h-10 px-4 rounded-full border-gray-200 text-gray-700 hover:bg-gray-50 gap-2 shadow-sm"
                  title={t('batch.organizeWithAI')}
                >
                  <Wand2 className="h-4 w-4 text-purple-600" />
                  <span className="hidden sm:inline">{t('batch.organize')}</span>
                </Button>
              )}

              {!isTabs && (
                <Button
                  onClick={() => setShowNoteInput(!showNoteInput)}
                  className="h-10 px-6 rounded-full bg-primary hover:bg-primary/90 text-primary-foreground font-medium shadow-sm gap-2 transition-all"
                >
                  <Plus className="w-5 h-5" />
                  {t('notes.newNote')}
                </Button>
              )}
            </div>
          </div>
        </div>
      )}

      {showNoteInput && (
        <div
          className={cn(
            'animate-in fade-in slide-in-from-top-4 duration-300',
            isTabs ? 'mb-3 w-full shrink-0' : 'mb-8'
          )}
        >
          <NoteInput
            onNoteCreated={handleNoteCreatedWrapper}
            forceExpanded={true}
            fullWidth={isTabs}
          />
        </div>
      )}

      {isLoading ? (
        <div className="text-center py-8 text-gray-500">{t('general.loading')}</div>
      ) : (
        <>
          <FavoritesSection
            pinnedNotes={pinnedNotes}
            onEdit={(note, readOnly) => setEditingNote({ note, readOnly })}
          />

          {/* Recent notes section hidden in masonry mode — notes are already visible in the grid below */}
          {false && !isTabs && showRecentNotes && (
            <RecentNotesSection
              recentNotes={recentNotes}
              onEdit={(note, readOnly) => setEditingNote({ note, readOnly })}
            />
          )}

          {notes.filter((note) => !note.isPinned).length > 0 && (
            <div className={cn(isTabs && 'flex min-h-0 flex-1 flex-col')}>
              <NotesMainSection
                viewMode={notesViewMode}
                notes={notes.filter((note) => !note.isPinned)}
                onEdit={(note, readOnly) => setEditingNote({ note, readOnly })}
                currentNotebookId={searchParams.get('notebook')}
              />
            </div>
          )}

          {/* Empty state when no notes */}
          {notes.filter(note => !note.isPinned).length === 0 && pinnedNotes.length === 0 && (
            <div className="text-center py-8 text-gray-500">
              {t('notes.emptyState')}
            </div>
          )}
        </>
      )}
      {/* Memory Echo - Proactive note connections */}
      <MemoryEchoNotification onOpenNote={handleOpenNote} />

      {/* Notebook Suggestion - IA1 */}
      {notebookSuggestion && (
        <NotebookSuggestionToast
          noteId={notebookSuggestion.noteId}
          noteContent={notebookSuggestion.content}
          onDismiss={() => setNotebookSuggestion(null)}
        />
      )}

      {/* Batch Organization Dialog - IA3 */}
      <BatchOrganizationDialog
        open={batchOrganizationOpen}
        onOpenChange={setBatchOrganizationOpen}
        onNotesMoved={() => {
          // Refresh notes to see updated notebook assignments
          router.refresh()
        }}
      />

      {/* Auto Label Suggestion Dialog - IA4 */}
      <AutoLabelSuggestionDialog
        open={autoLabelOpen}
        onOpenChange={(open) => {
          setAutoLabelOpen(open)
          if (!open) dismissLabelSuggestion()
        }}
        notebookId={suggestNotebookId}
        onLabelsCreated={() => {
          // Refresh to see new labels
          router.refresh()
        }}
      />

      {/* Note Editor Modal */}
      {editingNote && (
        <NoteEditor
          note={editingNote.note}
          readOnly={editingNote.readOnly}
          onClose={() => setEditingNote(null)}
        />
      )}
    </div>
  )
}
