"use client"
import React, { useState, useEffect } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

const navItems = [
  {
    name: 'Overview',
    href: '/',
    icon: '🏠',
    description: 'Dashboard overview'
  },
  {
    name: 'Analysis',
    href: '/analysis',
    icon: '📊',
    description: 'AI analysis & insights'
  },
  {
    name: 'Trading',
    href: '/trading',
    icon: '💰',
    description: 'Execute trades'
  },
  {
    name: 'Chart Trading',
    href: '/chart-trading-demo',
    icon: '📈',
    description: 'Advanced chart trading'
  },
  {
    name: 'Automation',
    href: '/automation-v2',
    icon: '🤖',
    description: 'Auto-trading settings'
  },
  {
    name: 'AI Learning',
    href: '/complete-learning',
    icon: '🧠',
    description: 'Complete AI learning system'
  },
  {
    name: 'Settings',
    href: '/settings',
    icon: '⚙️',
    description: 'Developer settings'
  }
]

export default function Navigation() {
  const pathname = usePathname()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  return (
    <nav className="bg-gray-900/50 backdrop-blur-sm border-b border-gray-800">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-14">
          <div className="flex items-center space-x-8">
            {navItems.map((item) => {
              // Only apply active styles after component has mounted to prevent hydration mismatch
              const isActive = mounted && pathname === item.href
              
              return (
                <Link
                  key={item.name}
                  href={item.href}
                  className={`flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 group ${
                    isActive 
                      ? 'bg-blue-600/20 text-blue-400 border border-blue-500/30' 
                      : 'text-gray-400 hover:text-gray-200 hover:bg-gray-800/50'
                  }`}
                >
                  <span className={`text-lg ${isActive ? 'text-blue-400' : 'text-gray-500 group-hover:text-gray-300'}`}>
                    {item.icon}
                  </span>
                  <span>{item.name}</span>
                </Link>
              )
            })}
          </div>
        </div>
      </div>
    </nav>
  )
}