'use client'

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

interface SettingsNavProps {
  className?: string
}

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

  const tabs = [
    { id: 'general', label: t('generalSettings.title'), icon: <Settings size={14} />, href: '/settings/general' },
    { id: 'ai', label: t('aiSettings.title'), icon: <Sparkles size={14} />, href: '/settings/ai' },
    { id: 'billing', label: t('billing.title'), icon: <CreditCard size={14} />, href: '/settings/billing' },
    { id: 'appearance', label: t('appearance.title'), icon: <Palette size={14} />, href: '/settings/appearance' },
    { id: 'profile', label: t('profile.title'), icon: <User size={14} />, href: '/settings/profile' },
    { id: 'data', label: t('dataManagement.title'), icon: <Database size={14} />, href: '/settings/data' },
    { id: 'published', label: t('settings.publishedTitle') || 'Mes pages', icon: <Globe size={14} />, href: '/settings/published' },
    { id: 'integrations', label: t('integrations.title') || 'Intégrations', icon: <Plug size={14} />, href: '/settings/integrations' },
    { id: 'mcp', label: t('mcpSettings.title'), icon: <Key size={14} />, href: '/settings/mcp' },
    { id: 'about', label: t('about.title'), icon: <Info size={14} />, href: '/settings/about' },
  ]

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

  return (
    <nav className={`flex overflow-x-auto items-center gap-1 border-b border-border/40 pb-px ${className || ''}`}>
      {tabs.map((tab) => (
        <Link
          key={tab.id}
          href={tab.href}
          className="flex items-center gap-1.5 sm:gap-2.5 px-2 sm:px-4 py-3 text-[10px] font-bold uppercase tracking-[0.18em] transition-all relative whitespace-nowrap text-concrete hover:text-ink/60"
          style={{ color: isActive(tab.href) ? 'var(--ink)' : undefined }}
        >
          <span style={{ color: isActive(tab.href) ? 'var(--ink)' : 'var(--concrete)' }}>{tab.icon}</span>
          {tab.label}
          {isActive(tab.href) && (
            <motion.div
              layoutId="activeSettingsTabLine"
              className="absolute bottom-0 left-0 right-0 h-0.5 bg-ink"
              transition={{ type: 'spring', bounce: 0.1, duration: 0.8 }}
            />
          )}
        </Link>
      ))}
    </nav>
  )
}