'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { usePathname, useSearchParams } from 'next/navigation'
import { cn } from '@/lib/utils'
import {
  Lightbulb,
  Bell,
  Tag,
  Archive,
  Trash2,
  Pencil,
  ChevronRight,
  Plus
} from 'lucide-react'
import { useLabels } from '@/context/LabelContext'
import { useLanguage } from '@/lib/i18n'
import { NotebooksList } from './notebooks-list'

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

  // 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-r-full mr-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">
        <NavItem
          href="/"
          icon={Lightbulb}
          label={t('sidebar.notes') || 'Notes'}
          active={isActive('/')}
        />
        <NavItem
          href="/reminders"
          icon={Bell}
          label={t('sidebar.reminders') || 'Rappels'}
          active={isActive('/reminders')}
        />
      </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>

      {/* Footer / Copyright / Terms */}
      <div className="mt-auto px-6 py-4 text-[10px] text-gray-400">
        <div className="flex gap-2 mb-1">
          <Link href="#" className="hover:underline">Confidentialité</Link>
          <span>•</span>
          <Link href="#" className="hover:underline">Conditions</Link>
        </div>
        <p>Open Source Clone</p>
      </div>
    </aside>
  )
}