Keep/keep-notes/components/sidebar.tsx

'use client'

import Link from 'next/link'
import { usePathname, useSearchParams } from 'next/navigation'
import { cn } from '@/lib/utils'
import {
  Lightbulb,
  Bell,
  Archive,
  Trash2,
  Plus,
  Sparkles,
} from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'
import { useLanguage } from '@/lib/i18n'
import { NotebooksList } from './notebooks-list'
import { useHomeViewOptional } from '@/context/home-view-context'

export function Sidebar({ className, user }: { className?: string, user?: any }) {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const { t } = useLanguage()
  const homeBridge = useHomeViewOptional()

  // Helper to determine if a link is active
  const isActive = (href: string, exact = false) => {
    if (href === '/') {
      // Home is active only if no special filters are applied
      return pathname === '/' &&
        !searchParams.get('label') &&
        !searchParams.get('archived') &&
        !searchParams.get('trashed')
    }

    // For labels
    if (href.startsWith('/?label=')) {
      const labelParam = searchParams.get('label')
      // Extract label from href
      const labelFromHref = href.split('=')[1]
      return labelParam === labelFromHref
    }

    // For other routes
    return pathname === href
  }

  const NavItem = ({ href, icon: Icon, label, active }: any) => (
    <Link
      href={href}
      className={cn(
        "flex items-center gap-4 px-6 py-3 rounded-e-full me-2 transition-colors",
        "text-sm font-medium tracking-wide",
        active
          ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground"
          : "text-muted-foreground hover:bg-muted/50 dark:hover:bg-muted/30"
      )}
    >
      <Icon className={cn("w-5 h-5", active ? "fill-current" : "")} />
      <span className="truncate">{label}</span>
    </Link>
  )

  return (
    <aside className={cn(
      "w-[280px] flex-none flex-col bg-white dark:bg-[#1e2128] overflow-y-auto hidden md:flex py-2",
      className
    )}>
      {/* Main Navigation */}
      <div className="flex flex-col gap-1 px-3">
        <NavItem
          href="/"
          icon={Lightbulb}
          label={t('sidebar.notes') || 'Notes'}
          active={isActive('/')}
        />
        <NavItem
          href="/reminders"
          icon={Bell}
          label={t('sidebar.reminders') || 'Rappels'}
          active={isActive('/reminders')}
        />
        {pathname === '/' && homeBridge?.controls?.isTabsMode && (
          <TooltipProvider delayDuration={200}>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  type="button"
                  className="w-full justify-start gap-3 rounded-e-full ps-4 pe-3 font-medium shadow-sm"
                  onClick={() => homeBridge.controls?.openNoteComposer()}
                >
                  <Plus className="h-5 w-5 shrink-0" />
                  <span className="truncate">{t('sidebar.newNoteTabs')}</span>
                  <Sparkles className="ms-auto h-4 w-4 shrink-0 text-primary" aria-hidden />
                </Button>
              </TooltipTrigger>
              <TooltipContent side="right" className="max-w-[240px]">
                {t('sidebar.newNoteTabsHint')}
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        )}
      </div>

      {/* Notebooks Section */}
      <div className="flex flex-col mt-2">
        <NotebooksList />
      </div>



      {/* Archive & Trash */}
      <div className="flex flex-col mt-2 border-t border-transparent">
        <NavItem
          href="/archive"
          icon={Archive}
          label={t('sidebar.archive') || 'Archives'}
          active={pathname === '/archive'}
        />
        <NavItem
          href="/trash"
          icon={Trash2}
          label={t('sidebar.trash') || 'Corbeille'}
          active={pathname === '/trash'}
        />
      </div>

    </aside>
  )
}