import { NavLink, useLocation } from 'react-router-dom'
import { TreePine, FolderTree, Download } from 'lucide-react'

/**
 * Admin-Seiten-Navigation (horizontal)
 * Wechselt zwischen verschiedenen Admin-Seiten
 */
export default function AdminPageNav() {
  const location = useLocation()

  const pages = [
    { to: '/admin/hierarchy', label: 'Hierarchie', icon: TreePine },
    { to: '/admin/catalogs', label: 'Kataloge', icon: FolderTree },
    { to: '/admin/mediawiki-import', label: 'Wiki-Import', icon: Download }
  ]

  return (
    <nav style={{
      display: 'flex',
      gap: '8px',
      borderBottom: '2px solid var(--border)',
      marginBottom: '24px',
      flexWrap: 'wrap'
    }}>
      {pages.map(page => {
        const Icon = page.icon
        const isActive = location.pathname === page.to

        return (
          <NavLink
            key={page.to}
            to={page.to}
            style={{
              padding: '12px 20px',
              background: 'transparent',
              border: 'none',
              borderBottom: '3px solid transparent',
              cursor: 'pointer',
              fontSize: '16px',
              fontWeight: 500,
              color: isActive ? 'var(--accent)' : 'var(--text2)',
              borderBottomColor: isActive ? 'var(--accent)' : 'transparent',
              textDecoration: 'none',
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              transition: 'all 0.2s'
            }}
            onMouseEnter={(e) => {
              if (!isActive) {
                e.currentTarget.style.color = 'var(--text1)'
                e.currentTarget.style.background = 'var(--surface2)'
              }
            }}
            onMouseLeave={(e) => {
              if (!isActive) {
                e.currentTarget.style.color = 'var(--text2)'
                e.currentTarget.style.background = 'transparent'
              }
            }}
          >
            <Icon size={18} />
            <span>{page.label}</span>
          </NavLink>
        )
      })}
    </nav>
  )
}