'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Settings, Sparkles, Palette, User, Database, Info, Key } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useLanguage } from '@/lib/i18n'

interface SettingsSection {
  id: string
  label: string
  icon: React.ReactNode
  href: string
}

interface SettingsNavProps {
  className?: string
}

export function SettingsNav({ className }: SettingsNavProps) {
  const pathname = usePathname()
  const { t } = useLanguage()

  const sections: SettingsSection[] = [
    { id: 'general', label: t('generalSettings.title'), icon: <Settings className="h-4 w-4" />, href: '/settings/general' },
    { id: 'ai', label: t('aiSettings.title'), icon: <Sparkles className="h-4 w-4" />, href: '/settings/ai' },
    { id: 'appearance', label: t('appearance.title'), icon: <Palette className="h-4 w-4" />, href: '/settings/appearance' },
    { id: 'profile', label: t('profile.title'), icon: <User className="h-4 w-4" />, href: '/settings/profile' },
    { id: 'data', label: t('dataManagement.title'), icon: <Database className="h-4 w-4" />, href: '/settings/data' },
    { id: 'mcp', label: t('mcpSettings.title'), icon: <Key className="h-4 w-4" />, href: '/settings/mcp' },
    { id: 'about', label: t('about.title'), icon: <Info className="h-4 w-4" />, href: '/settings/about' },
  ]

  const isActive = (href: string) => pathname === href || pathname.startsWith(href + '/')

  return (
    <nav className={cn('flex items-center gap-6 border-b border-border/40', className)}>
      {sections.map((section) => (
        <Link
          key={section.id}
          href={section.href}
          className={cn(
            'flex items-center gap-2 pb-3 pt-4 text-[11px] font-bold uppercase tracking-[0.15em] transition-all whitespace-nowrap border-b-2',
            isActive(section.href)
              ? 'border-[#D4A373] text-ink'
              : 'border-transparent text-muted-ink hover:text-ink'
          )}
        >
          {section.icon}
          <span>{section.label}</span>
        </Link>
      ))}
    </nav>
  )
}