import { useState } from 'react'
import { NavLink } from 'react-router-dom'
import {
  LayoutDashboard,
  FileText,
  FolderOpen,
  Settings,
  Search,
  List,
  BookOpen,
  Palette,
} from 'lucide-react'
import clsx from 'clsx'
import ManualModal from '@/components/ManualModal'

const navigation = [
  { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
  { name: 'Templates', href: '/templates', icon: FileText },
  { name: 'Tópicos', href: '/topicos', icon: List },
  { name: 'Databooks', href: '/databooks', icon: FolderOpen },
  { name: 'Design', href: '/design', icon: Palette },
  { name: 'Busca', href: '/busca', icon: Search },
  { name: 'Configurações', href: '/configuracoes', icon: Settings },
]

export default function Sidebar() {
  const [manualOpen, setManualOpen] = useState(false)

  return (
    <>
      <aside className="w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 h-[calc(100vh-4rem)] flex flex-col transition-colors">
        <nav className="p-4 space-y-2 flex-1">
          {navigation.map((item) => (
            <NavLink
              key={item.name}
              to={item.href}
              className={({ isActive }) =>
                clsx(
                  'flex items-center gap-3 px-4 py-3 rounded-lg transition-colors',
                  isActive
                    ? 'bg-primary dark:bg-blue-600 text-white'
                    : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
                )
              }
            >
              <item.icon size={20} />
              <span className="font-medium">{item.name}</span>
            </NavLink>
          ))}
        </nav>

        {/* Manual Button */}
        <div className="p-4 border-t border-gray-200 dark:border-gray-800">
          <button
            onClick={() => setManualOpen(true)}
            className="w-full flex items-center gap-3 px-4 py-3 rounded-lg bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors font-medium"
          >
            <BookOpen size={20} />
            <span>Manual do Usuário</span>
          </button>
        </div>
      </aside>

      <ManualModal isOpen={manualOpen} onClose={() => setManualOpen(false)} />
    </>
  )
}
