'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,
} from 'lucide-react'
import { useLanguage } from '@/lib/i18n'
import { useNoteRefreshOptional } from '@/context/NoteRefreshContext'
import { useEffect, 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'

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',
        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="truncate">{title}</span>
    </motion.button>
  )
}

function SidebarCarnetItem({
  carnet,
  isActive,
  notes,
  activeNoteId,
  onCarnetClick,
  onNoteClick,
}: {
  carnet: { id: string; name: string; initial: string; isPrivate?: boolean }
  isActive: boolean
  notes: { id: string; title: string }[]
  activeNoteId: string | null
  onCarnetClick: () => void
  onNoteClick: (noteId: string) => void
}) {
  return (
    <div className="space-y-1">
      <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>

      <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)}
              />
            ))}
            {notes.length === 0 && (
              <p className="pl-12 text-[11px] text-muted-foreground/50 py-2 italic font-light">No notes yet</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 { refreshKey } = useNoteRefreshOptional()
  const { notebooks } = useNotebooks()
  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)

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

  // Determine if inbox is active (no notebook filter, on home page)
  const isInboxActive =
    pathname === '/' &&
    !searchParams.get('notebook') &&
    !searchParams.get('label') &&
    !searchParams.get('archived') &&
    !searchParams.get('trashed')

  // Sync activeView with current route
  useEffect(() => {
    if (pathname.startsWith('/agents') || pathname.startsWith('/lab')) {
      setActiveView('agents')
    }
  }, [pathname])

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

  useEffect(() => {
    if (!currentNotebookId) return
    if (notebookNotes[currentNotebookId]) return

    getAllNotes(false, currentNotebookId).then(notes => {
      const mapped = notes.map((n: Note) => ({
        id: n.id,
        title: getNoteDisplayTitle(n, t('notes.untitled') || 'Untitled'),
      }))
      setNotebookNotes(prev => ({ ...prev, [currentNotebookId!]: mapped }))
    })
  }, [currentNotebookId, refreshKey])

  // BUG FIX: clicking a carnet always forces list (editorial) view
  const handleCarnetClick = (notebookId: string) => {
    const params = new URLSearchParams()
    params.set('notebook', notebookId)
    // forceList resets to editorial view in home-client
    params.set('forceList', '1')
    router.push(`/?${params.toString()}`)
  }

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

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

  // Sort notebooks
  const sortedNotebooks = [...notebooks].sort((a: Notebook, b: Notebook) => {
    if (sortOrder === 'alpha') return a.name.localeCompare(b.name)
    if (sortOrder === 'newest') return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
    if (sortOrder === 'oldest') return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
    return 0
  })

  const sortLabels: Record<SortOrder, string> = {
    newest: t('sidebar.sortNewest') || 'Newest first',
    oldest: t('sidebar.sortOldest') || 'Oldest first',
    alpha: t('sidebar.sortAlpha') || 'A → Z',
  }

  return (
    <>
      <aside
        className={cn(
          'hidden h-full min-h-0 w-80 shrink-0 flex-col md:flex',
          'border-e border-border/40 bg-white/30 backdrop-blur-md sidebar-shadow dark:border-border/30 dark:bg-sidebar/90',
          className
        )}
      >
        {/* ── Top: Avatar + View Toggle ── */}
        <div className="p-6 flex items-center justify-between mb-4">
          {/* Avatar → profile */}
          <Link href="/settings/profile" className="shrink-0">
            <div className="w-10 h-10 rounded-full bg-slate-200 border border-border flex items-center justify-center text-foreground font-memento-serif text-lg shadow-sm hover:ring-2 hover:ring-primary/30 transition-all">
              {user?.image ? (
                <Avatar className="size-10 ring-1 ring-border/60">
                  <AvatarImage src={user.image} alt="" />
                  <AvatarFallback className="bg-primary/10 text-sm font-semibold text-primary">{initial}</AvatarFallback>
                </Avatar>
              ) : (
                <span>{initial}</span>
              )}
            </div>
          </Link>

          {/* Notebooks / Agents toggle */}
          <div className="sidebar-view-toggle">
            <button
              onClick={() => { setActiveView('notebooks'); if (pathname !== '/') router.push('/') }}
              className={cn('sidebar-view-toggle-btn', activeView === 'notebooks' && 'active')}
              title={t('nav.notebooks') || 'Notebooks'}
            >
              <BookOpen size={14} />
            </button>
            <button
              onClick={() => { setActiveView('agents'); router.push('/agents') }}
              className={cn('sidebar-view-toggle-btn', activeView === 'agents' && 'active')}
              title={t('nav.agents') || 'Agents'}
            >
              <Bot size={14} />
            </button>
          </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') || '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') || 'Sort order'}
                    >
                      <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') || 'Inbox'}
                  </span>
                </button>

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

                {/* Notebooks list */}
                <div className="space-y-1">
                  {sortedNotebooks.map((notebook: Notebook) => {
                    const isActive = currentNotebookId === notebook.id
                    const notes = notebookNotes[notebook.id] || []
                    return (
                      <SidebarCarnetItem
                        key={notebook.id}
                        carnet={{
                          id: notebook.id,
                          name: notebook.name,
                          initial: notebook.name.charAt(0).toUpperCase(),
                        }}
                        isActive={isActive}
                        notes={isActive ? notes : []}
                        activeNoteId={currentNoteId}
                        onCarnetClick={() => handleCarnetClick(notebook.id)}
                        onNoteClick={handleNoteClick}
                      />
                    )
                  })}

                  <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('notebooks.create') || 'New Carnet'}</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') || 'Intelligence OS'}
                </p>
                <div className="space-y-1">
                  {[
                    { id: 'agents', href: '/agents', label: t('agents.myAgents') || 'Mes Agents', icon: Bot },
                    { id: 'lab', href: '/lab', label: t('nav.lab') || 'Le Lab AI', icon: FlaskConical },
                    { id: 'chat', href: '/chat', label: t('nav.chat') || 'Conversations', icon: MessageSquare },
                  ].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>
                    )
                  })}

                  {/* General Chat button (opens floating panel) */}
                  <button
                    onClick={() => window.dispatchEvent(new Event('toggle-ai-chat'))}
                    className="w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 group text-muted-foreground hover:bg-white/40 hover:text-foreground"
                  >
                    <div className="w-8 h-8 rounded-full flex items-center justify-center border transition-colors shrink-0 bg-white/60 border-border group-hover:border-foreground/20">
                      <Sparkles size={16} />
                    </div>
                    <span className="text-[13px] font-medium">{t('ai.openAssistant') || 'Assistant IA'}</span>
                  </button>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>

        {/* ── Footer ── */}
        <div className="pt-4 p-5 border-t border-border space-y-1">
          {/* Notifications */}
          <Link
            href="/notifications"
            className="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/30"
          >
            <NotificationPanel />
            <span>{t('notification.notifications') || 'Notifications'}</span>
          </Link>
          <Link
            href="/archive"
            className="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/30"
          >
            <Archive size={16} />
            <span>{t('sidebar.archive') || 'Archives'}</span>
          </Link>
          <Link
            href="/trash"
            className="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/30"
          >
            <Trash2 size={16} />
            <span>{t('sidebar.trash') || 'Corbeille'}</span>
          </Link>
          <Link
            href="/settings"
            className="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/30"
          >
            <Settings size={16} />
            <span>{t('nav.settings') || 'Paramètres'}</span>
          </Link>
        </div>
      </aside>

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