'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useTranslations } from 'next-intl'
import { useAccount } from 'wagmi'
import { useConnectModal } from '@rainbow-me/rainbowkit'
import { shortenAddress } from '@/lib/utils'

const navItems = [
  { key: 'overview', href: '' },
  { key: 'posts', href: '/posts' },
  { key: 'trades', href: '/trades' },
  { key: 'analytics', href: '/analytics' },
] as const

interface NavbarProps {
  locale: string
}

export default function Navbar({ locale }: NavbarProps) {
  const t = useTranslations('nav')
  const pathname = usePathname()
  const { address, isConnected } = useAccount()
  const { openConnectModal } = useConnectModal()

  function isActive(href: string) {
    const full = `/${locale}${href}`
    if (href === '') return pathname === `/${locale}` || pathname === `/${locale}/`
    return pathname.startsWith(full)
  }

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 h-14 bg-[#000000] border-b border-[#141414] flex items-center px-6">
      {/* Logo */}
      <Link href={`/${locale}`} className="flex items-center gap-2 mr-10 shrink-0">
        <span className="text-[#f97316] font-bold text-lg leading-none">TS</span>
        <span className="text-white font-medium text-sm">TrumpSignal</span>
      </Link>

      {/* Center nav */}
      <div className="flex items-center gap-6 flex-1">
        {navItems.map((item) => (
          <Link
            key={item.key}
            href={`/${locale}${item.href}`}
            className={`text-[13px] transition-colors ${
              isActive(item.href) ? 'text-[#f97316]' : 'text-[#555555] hover:text-white'
            }`}
          >
            {t(item.key)}
          </Link>
        ))}
      </div>

      {/* Right side */}
      <div className="flex items-center gap-3 shrink-0">
        <button className="text-[13px] text-[#555555] hover:text-white border border-[#141414] rounded-full px-3 py-1 transition-colors">
          {t('language')} ▾
        </button>

        {isConnected && address ? (
          <button className="text-[13px] bg-[#141414] text-white border border-[#1a1a1a] rounded-full px-3 py-1">
            {shortenAddress(address)}
          </button>
        ) : (
          <button
            onClick={openConnectModal}
            className="text-[13px] bg-[#f97316] text-black font-medium rounded-full px-4 py-1.5 hover:bg-[#fb923c] transition-colors"
          >
            {t('connectWallet')}
          </button>
        )}
      </div>
    </nav>
  )
}