'use client'

import Link from 'next/link'
import { usePathname, useSearchParams, useRouter } from 'next/navigation'
import { cn } from '@/lib/utils'
import {
  Settings,
  Plus,
  ChevronRight,
  Lock,
  BookOpen,
  Bot,
  Inbox,
  FlaskConical,
  ArrowUpDown,
  Archive,
  MessageSquare,
  Sparkles,
  Trash2,
  User,
  LogOut,
  Shield,
  GripVertical,
  Users,
  Bell,
} from 'lucide-react'
import { useLanguage } from '@/lib/i18n'
import { useEffect, useMemo, useRef, useState } from 'react'
import { getAllNotes } from '@/app/actions/notes'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { useNotebooks } from '@/context/notebooks-context'
import { Notebook, Note } from '@/lib/types'
import { motion, AnimatePresence } from 'motion/react'
import { getNoteDisplayTitle } from '@/lib/note-preview'
import { CreateNotebookDialog } from './create-notebook-dialog'
import { NotificationPanel } from './notification-panel'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { signOut } from 'next-auth/react'
import { useNoteRefresh } from '@/context/NoteRefreshContext'

type NavigationView = 'notebooks' | 'agents'
type SortOrder = 'newest' | 'oldest' | 'alpha'

function NoteLink({
  title,
  isActive,
  onClick,
}: {
  title: string
  isActive: boolean
  onClick: () => void
}) {
  return (
    <motion.button
      initial={{ opacity: 0, x: -10 }}
      animate={{ opacity: 1, x: 0 }}
      onClick={onClick}
      className={cn(
        'w-full flex items-center gap-2 pl-12 pr-4 py-2 text-[12px] transition-colors rounded-lg text-left',
        isActive ? 'bg-white/50 text-foreground font-medium' : 'text-muted-foreground hover:text-foreground hover:bg-white/30'
      )}
    >
      <div className={cn(
        'w-1.5 h-1.5 rounded-full shrink-0',
        isActive ? 'bg-foreground' : 'bg-transparent border border-muted-foreground/30'
      )} />
      <span className="break-words line-clamp-2 leading-tight">{title}</span>
    </motion.button>
  )
}

function SidebarCarnetItem({
  carnet,
  isActive,
  notes,
  activeNoteId,
  onCarnetClick,
  onNoteClick,
  isDragging,
  dragHandleProps,
}: {
  carnet: { id: string; name: string; initial: string; isPrivate?: boolean }
  isActive: boolean
  notes: { id: string; title: string }[]
  activeNoteId: string | null
  onCarnetClick: () => void
  onNoteClick: (noteId: string, carnetId: string) => void
  isDragging?: boolean
  dragHandleProps?: React.HTMLAttributes<HTMLDivElement>
}) {
  const { t } = useLanguage()
  return (
    <div className={cn('space-y-1 transition-opacity', isDragging && 'opacity-40')}>
      <div className="relative group/carnet">
        {/* Drag handle — visible on hover */}
        <div
          {...dragHandleProps}
          className="absolute left-1 top-1/2 -translate-y-1/2 p-1 rounded text-muted-foreground/30 hover:text-muted-foreground cursor-grab active:cursor-grabbing opacity-0 group-hover/carnet:opacity-100 transition-opacity z-10"
          title="Déplacer"
        >
          <GripVertical size={12} />
        </div>

        <motion.button
          whileHover={{ x: 4 }}
          onClick={onCarnetClick}
          className={cn(
            'w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 group',
            isActive ? 'memento-active-nav' : 'hover:bg-white/40'
          )}
        >
          <motion.div
            animate={{ rotate: isActive ? 90 : 0 }}
            className="text-muted-foreground"
          >
            <ChevronRight size={14} />
          </motion.div>
          <div className={cn(
            'w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border shrink-0',
            isActive
              ? 'bg-foreground text-background border-foreground'
              : 'bg-white/60 text-foreground border-border'
          )}>
            {carnet.initial}
          </div>
          <div className="flex-1 text-left min-w-0">
            <div className="flex items-center gap-2">
              <span className={cn(
                'text-[13px] font-medium transition-colors truncate',
                isActive ? 'text-foreground' : 'text-muted-foreground'
              )}>
                {carnet.name}
              </span>
              {carnet.isPrivate && <Lock size={10} className="text-muted-foreground shrink-0" />}
            </div>
          </div>
        </motion.button>
      </div>

      <AnimatePresence>
        {isActive && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}
            className="overflow-hidden space-y-0.5"
          >
            {notes.map(note => (
              <NoteLink
                key={note.id}
                title={note.title}
                isActive={activeNoteId === note.id}
                onClick={() => onNoteClick(note.id, carnet.id)}
              />
            ))}
            {notes.length === 0 && (
              <p className="pl-12 text-[11px] text-muted-foreground/50 py-2 italic font-light">{t('common.noResults')}</p>
            )}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

export function Sidebar({ className, user }: { className?: string; user?: any }) {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const router = useRouter()
  const { t } = useLanguage()
  const { notebooks, updateNotebookOrderOptimistic } = useNotebooks()
  const { refreshKey } = useNoteRefresh()
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
  const [notebookNotes, setNotebookNotes] = useState<Record<string, { id: string; title: string }[]>>({})
  const [activeView, setActiveView] = useState<NavigationView>('notebooks')
  const [sortOrder, setSortOrder] = useState<SortOrder>('newest')
  const [showSortMenu, setShowSortMenu] = useState(false)

  // ── Drag state ──
  const [draggedId, setDraggedId] = useState<string | null>(null)
  const [orderedNotebooks, setOrderedNotebooks] = useState<Notebook[]>([])
  const dragOverId = useRef<string | null>(null)
  // Prevents the sync effect from overwriting a just-saved drag order
  const isSavingRef = useRef(false)

  const currentNotebookId = searchParams.get('notebook')
  const currentNoteId = searchParams.get('openNote')

  const isInboxActive =
    pathname === '/' &&
    !searchParams.get('notebook') &&
    !searchParams.get('labels') &&
    !searchParams.get('archived') &&
    !searchParams.get('trashed')

  useEffect(() => {
    setActiveView(
      pathname.startsWith('/agents') || pathname.startsWith('/lab') ? 'agents' : 'notebooks'
    )
  }, [pathname])

  const displayName = user?.name || user?.email || ''
  const initial = displayName ? displayName.charAt(0).toUpperCase() : '?'

  // Sorted list for the sort dropdown (not used directly when dragging)
  const sortedNotebooks = useMemo(() => {
    const arr = [...notebooks]
    if (sortOrder === 'alpha') return arr.sort((a, b) => a.name.localeCompare(b.name))
    if (sortOrder === 'newest') return arr.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
    if (sortOrder === 'oldest') return arr.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
    return arr
  }, [notebooks, sortOrder])

  // Sync orderedNotebooks from server ONLY when not in the middle of a drag save
  useEffect(() => {
    if (isSavingRef.current) return
    setOrderedNotebooks(sortedNotebooks)
  }, [sortedNotebooks])

  const notebookIdsKey = useMemo(() => notebooks.map(nb => nb.id).sort().join(','), [notebooks])

  useEffect(() => {
    if (!notebookIdsKey) return
    let cancelled = false
    const load = async () => {
      const mappedEntries = await Promise.all(
        notebooks.map(async (nb: Notebook) => {
          const notes = await getAllNotes(false, nb.id)
          const mapped = notes.map((n: Note) => ({
            id: n.id,
            title: getNoteDisplayTitle(n, t('notes.untitled')),
          }))
          return [nb.id, mapped] as const
        })
      )
      if (cancelled) return
      setNotebookNotes(Object.fromEntries(mappedEntries))
    }
    load()
    return () => { cancelled = true }
  // refreshKey: reload note titles whenever any note is saved/created/deleted
  }, [notebookIdsKey, refreshKey, t])

  const handleCarnetClick = (notebookId: string) => {
    const params = new URLSearchParams()
    params.set('notebook', notebookId)
    params.set('forceList', '1')
    router.push(`/?${params.toString()}`)
  }

  const handleInboxClick = () => {
    router.push('/?forceList=1')
  }

  const handleNoteClick = (noteId: string, notebookId: string) => {
    const params = new URLSearchParams(searchParams.toString())
    params.set('notebook', notebookId)
    params.set('openNote', noteId)
    params.delete('forceList')
    router.push(`/?${params.toString()}`)
  }

  // ── Drag handlers ──
  const handleDragStart = (e: React.DragEvent, notebookId: string) => {
    setDraggedId(notebookId)
    e.dataTransfer.effectAllowed = 'move'
  }

  const handleDragOver = (e: React.DragEvent, notebookId: string) => {
    e.preventDefault()
    e.dataTransfer.dropEffect = 'move'
    if (dragOverId.current === notebookId) return
    dragOverId.current = notebookId

    if (!draggedId || draggedId === notebookId) return
    setOrderedNotebooks(prev => {
      const fromIdx = prev.findIndex(n => n.id === draggedId)
      const toIdx = prev.findIndex(n => n.id === notebookId)
      if (fromIdx === -1 || toIdx === -1) return prev
      const next = [...prev]
      const [item] = next.splice(fromIdx, 1)
      next.splice(toIdx, 0, item)
      return next
    })
  }

  const handleDrop = async (e: React.DragEvent) => {
    e.preventDefault()
    if (!draggedId) return
    const savedOrder = [...orderedNotebooks]
    setDraggedId(null)
    dragOverId.current = null
    // Block the sync effect so the server reload doesn't overwrite local order
    isSavingRef.current = true
    try {
      await updateNotebookOrderOptimistic(savedOrder.map(n => n.id))
      // Keep local order — server will return them in the right order next load
      setOrderedNotebooks(savedOrder)
    } catch {
      // On failure, revert to original server order
      isSavingRef.current = false
      setOrderedNotebooks(sortedNotebooks)
    } finally {
      // Allow sync again after 2 s (time for the server reload to settle)
      setTimeout(() => {
        isSavingRef.current = false
      }, 2000)
    }
  }

  const handleDragEnd = () => {
    if (draggedId) {
      // Drag cancelled without drop — restore
      setDraggedId(null)
      dragOverId.current = null
      isSavingRef.current = false
      setOrderedNotebooks(sortedNotebooks)
    }
  }

  const sortLabels: Record<SortOrder, string> = {
    newest: t('sidebar.sortNewest'),
    oldest: t('sidebar.sortOldest'),
    alpha: t('sidebar.sortAlpha'),
  }

  return (
    <>
      <aside
        className={cn(
          'hidden h-full min-h-0 w-72 shrink-0 flex-col lg:w-80 md:flex',
          'border-e border-border/40 bg-memento-sidebar backdrop-blur-md sidebar-shadow dark:border-white/6 dark:bg-[#252525] dark:backdrop-blur-none',
          className
        )}
      >
        {/* ── Top: Avatar + View Toggle ── */}
        <div className="p-6 flex items-center justify-between mb-4">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button
                type="button"
                className="shrink-0 rounded-full outline-none ring-offset-background transition-shadow hover:ring-2 hover:ring-primary/30 focus-visible:ring-2 focus-visible:ring-ring"
                aria-label={t('sidebar.accountMenu')}
              >
                <div className="w-10 h-10 rounded-full bg-secondary border border-black/10 flex items-center justify-center text-foreground font-memento-serif text-lg shadow-sm">
                  {user?.image ? (
                    <Avatar className="size-10 ring-1 ring-border/60">
                      <AvatarImage src={user.image} alt="" />
                      <AvatarFallback className="bg-secondary text-sm font-semibold text-[#1C1C1C]/60">{initial}</AvatarFallback>
                    </Avatar>
                  ) : (
                    <span>{initial}</span>
                  )}
                </div>
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="w-52 bg-popover border-border">
              <DropdownMenuItem asChild>
                <Link href="/settings/profile" className="flex items-center gap-2 cursor-pointer">
                  <User className="h-4 w-4" />
                  {t('sidebar.profile') || 'Profil'}
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/settings" className="flex items-center gap-2 cursor-pointer">
                  <Settings className="h-4 w-4" />
                  {t('nav.settings') || 'Paramètres'}
                </Link>
              </DropdownMenuItem>
              {(user as { role?: string } | undefined)?.role === 'ADMIN' && (
                <DropdownMenuItem asChild>
                  <a href="/admin" className="flex items-center gap-2 cursor-pointer">
                    <Shield className="h-4 w-4" />
                    {t('nav.adminDashboard') || 'Administration'}
                  </a>
                </DropdownMenuItem>
              )}
              <DropdownMenuSeparator />
              <DropdownMenuItem
                className="text-destructive focus:text-destructive"
                onClick={() => signOut({ callbackUrl: '/login' })}
              >
                <LogOut className="h-4 w-4 mr-2" />
                {t('sidebar.signOut') || 'Se déconnecter'}
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

          {/* Notification bell + Notebooks / Agents toggle */}
          <div className="flex items-center gap-2">
            <NotificationPanel />
            <div className="flex bg-white/50 p-1 rounded-full border border-border transition-all">
              <button
                onClick={() => { setActiveView('notebooks'); if (pathname !== '/') router.push('/') }}
                className={cn('p-1.5 rounded-full transition-all', activeView === 'notebooks' ? 'bg-foreground text-background' : 'text-muted-foreground hover:text-foreground')}
                title={t('nav.notebooks')}
              >
                <BookOpen size={14} />
              </button>
              <button
                onClick={() => { setActiveView('agents'); router.push('/agents') }}
                className={cn('p-1.5 rounded-full transition-all', activeView === 'agents' ? 'bg-foreground text-background' : 'text-muted-foreground hover:text-foreground')}
                title={t('nav.agents')}
              >
                <Bot size={14} />
              </button>
            </div>
          </div>
        </div>

        {/* ── Scrollable content ── */}
        <div className="flex-1 overflow-y-auto space-y-6 -mx-2 px-2 custom-scrollbar pb-4">

          <AnimatePresence mode="wait">
            {activeView === 'notebooks' ? (
              <motion.div
                key="notebooks"
                initial={{ opacity: 0, x: -10 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: 10 }}
                transition={{ duration: 0.2 }}
              >
                {/* Section header with sort button */}
                <div className="flex items-center justify-between px-4 mb-3">
                  <p className="text-[10px] font-bold text-muted-foreground tracking-widest uppercase">
                    {t('nav.notebooks')}
                  </p>
                  <div className="relative">
                    <button
                      onClick={() => setShowSortMenu(s => !s)}
                      className="p-1 text-muted-foreground hover:text-foreground transition-colors rounded"
                      title={t('sidebar.sortOrder')}
                    >
                      <ArrowUpDown size={12} />
                    </button>
                    <AnimatePresence>
                      {showSortMenu && (
                        <motion.div
                          initial={{ opacity: 0, scale: 0.9, y: -4 }}
                          animate={{ opacity: 1, scale: 1, y: 0 }}
                          exit={{ opacity: 0, scale: 0.9, y: -4 }}
                          className="absolute right-0 top-full mt-1 bg-card border border-border rounded-xl shadow-lg z-50 py-1 min-w-[140px]"
                        >
                          {(['newest', 'oldest', 'alpha'] as SortOrder[]).map(order => (
                            <button
                              key={order}
                              onClick={() => { setSortOrder(order); setShowSortMenu(false) }}
                              className={cn(
                                'w-full text-left px-4 py-2 text-[12px] transition-colors',
                                sortOrder === order
                                  ? 'font-bold text-foreground'
                                  : 'text-muted-foreground hover:text-foreground hover:bg-muted/40'
                              )}
                            >
                              {sortLabels[order]}
                            </button>
                          ))}
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </div>
                </div>

                {/* Inbox — Notes without notebook */}
                <button
                  onClick={handleInboxClick}
                  className={cn('sidebar-inbox-item', isInboxActive && 'active')}
                >
                  <div className={cn(
                    'w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border shrink-0',
                    isInboxActive
                      ? 'bg-foreground text-background border-foreground'
                      : 'bg-white/60 text-foreground border-border'
                  )}>
                    <Inbox size={14} />
                  </div>
                  <span className={cn(
                    'text-[13px] font-medium truncate',
                    isInboxActive ? 'text-foreground' : 'text-muted-foreground'
                  )}>
                    {t('sidebar.inbox')}
                  </span>
                </button>
                
                <button
                  onClick={() => {
                    const params = new URLSearchParams()
                    params.set('shared', '1')
                    params.set('forceList', '1')
                    router.push(`/?${params.toString()}`)
                  }}
                  className={cn('sidebar-inbox-item', searchParams.get('shared') === '1' && pathname === '/' && 'active')}
                >
                  <div className={cn(
                    'w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border shrink-0',
                    searchParams.get('shared') === '1' && pathname === '/'
                      ? 'bg-foreground text-background border-foreground'
                      : 'bg-white/60 text-foreground border-border'
                  )}>
                    <Users size={14} />
                  </div>
                  <span className={cn(
                    'text-[13px] font-medium truncate',
                    searchParams.get('shared') === '1' && pathname === '/' ? 'text-foreground' : 'text-muted-foreground'
                  )}>
                    {t('sidebar.sharedWithMe')}
                  </span>
                </button>

                <button
                  onClick={() => {
                    const params = new URLSearchParams()
                    params.set('reminders', '1')
                    params.set('forceList', '1')
                    router.push(`/?${params.toString()}`)
                  }}
                  className={cn('sidebar-inbox-item', searchParams.get('reminders') === '1' && pathname === '/' && 'active')}
                >
                  <div className={cn(
                    'w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border shrink-0',
                    searchParams.get('reminders') === '1' && pathname === '/'
                      ? 'bg-foreground text-background border-foreground'
                      : 'bg-white/60 text-foreground border-border'
                  )}>
                    <Bell size={14} />
                  </div>
                  <span className={cn(
                    'text-[13px] font-medium truncate',
                    searchParams.get('reminders') === '1' && pathname === '/' ? 'text-foreground' : 'text-muted-foreground'
                  )}>
                    {t('sidebar.reminders')}
                  </span>
                </button>

                {/* Divider */}
                <div className="mx-4 my-3 h-px bg-border/40" />

                {/* Notebooks list — draggable */}
                <div
                  className="space-y-1"
                  onDrop={handleDrop}
                  onDragOver={(e) => e.preventDefault()}
                >
                  {orderedNotebooks.map((notebook: Notebook) => {
                    const isActive = currentNotebookId === notebook.id
                    const notes = notebookNotes[notebook.id] || []
                    const isDragging = draggedId === notebook.id
                    return (
                      <motion.div
                        key={notebook.id}
                        layout
                        transition={{
                          type: 'spring',
                          stiffness: 300,
                          damping: 30,
                          mass: 0.8
                        }}
                      >
                        <div
                          draggable
                          onDragStart={(e) => handleDragStart(e, notebook.id)}
                          onDragOver={(e) => handleDragOver(e, notebook.id)}
                          onDragEnd={handleDragEnd}
                        >
                          <SidebarCarnetItem
                            carnet={{
                              id: notebook.id,
                              name: notebook.name,
                              initial: notebook.name.charAt(0).toUpperCase(),
                            }}
                            isActive={isActive}
                            notes={notes}
                            activeNoteId={currentNoteId}
                            onCarnetClick={() => handleCarnetClick(notebook.id)}
                            onNoteClick={handleNoteClick}
                            isDragging={isDragging}
                          />
                        </div>
                      </motion.div>
                    )
                  })}

                  <button
                    onClick={() => setIsCreateDialogOpen(true)}
                    className="w-full mt-4 flex items-center gap-3 px-4 py-2 text-[13px] text-muted-foreground hover:text-foreground transition-colors font-medium rounded-lg hover:bg-white/40"
                  >
                    <Plus size={16} />
                    <span>{t('notebook.create')}</span>
                  </button>
                </div>
              </motion.div>
            ) : (
              <motion.div
                key="agents"
                initial={{ opacity: 0, x: 10 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -10 }}
                transition={{ duration: 0.2 }}
              >
                <p className="text-[10px] font-bold text-muted-foreground tracking-widest uppercase mb-4 px-4">
                  {t('agents.intelligenceOS')}
                </p>
                <div className="space-y-1">
                  {[
                    { id: 'agents', href: '/agents', label: t('agents.myAgents'), icon: Bot },
                    { id: 'lab', href: '/lab', label: t('nav.lab'), icon: FlaskConical },
                  ].map(item => {
                    const isActive = pathname.startsWith(item.href)
                    return (
                      <Link
                        key={item.id}
                        href={item.href}
                        className={cn(
                          'w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 group',
                          isActive ? 'memento-active-nav' : 'text-muted-foreground hover:bg-white/40 hover:text-foreground'
                        )}
                      >
                        <div className={cn(
                          'w-8 h-8 rounded-full flex items-center justify-center border transition-colors shrink-0',
                          isActive
                            ? 'bg-foreground text-background border-foreground'
                            : 'bg-white/60 border-border group-hover:border-foreground/20'
                        )}>
                          <item.icon size={16} />
                        </div>
                        <span className="text-[13px] font-medium">{item.label}</span>
                      </Link>
                    )
                  })}
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>

        {/* ── Footer ── */}
        <div className="pt-4 p-5 border-t border-border space-y-1">
          <Link
            href="/archive"
            className="flex items-center gap-3 px-4 py-2 text-[13px] text-[#1C1C1C]/60 hover:text-[#1C1C1C] transition-colors font-medium rounded-lg hover:bg-white/30"
          >
            <Archive size={16} />
            <span>{t('sidebar.archive')}</span>
          </Link>
          <Link
            href="/trash"
            className="flex items-center gap-3 px-4 py-2 text-[13px] text-[#1C1C1C]/60 hover:text-[#1C1C1C] transition-colors font-medium rounded-lg hover:bg-white/30"
          >
            <Trash2 size={16} />
            <span>{t('sidebar.trash')}</span>
          </Link>
          <Link
            href="/settings"
            className="flex items-center gap-3 px-4 py-2 text-[13px] text-[#1C1C1C]/60 hover:text-[#1C1C1C] transition-colors font-medium rounded-lg hover:bg-white/30"
          >
            <Settings size={16} />
            <span>{t('nav.settings')}</span>
          </Link>
        </div>
      </aside>

      <CreateNotebookDialog
        open={isCreateDialogOpen}
        onOpenChange={setIsCreateDialogOpen}
      />
    </>
  )
}