import { Link } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { useAuth } from '@/hooks'
import LanguageSelector from './LanguageSelector'

export default function Navbar() {
  const { user, isAuthenticated, login, logout } = useAuth()
  const { t } = useTranslation('navbar')

  return (
    <nav className="border-b border-gray-200 bg-white shadow-sm">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex h-16 items-center justify-between">
          {/* Logo / Brand */}
          <div className="flex items-center">
            <Link
              to="/"
              className="flex items-center gap-2 text-xl font-bold text-primary-600 hover:text-primary-700"
            >
              <svg
                className="h-8 w-8"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={2}
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
                <rect x="9" y="3" width="6" height="4" rx="1" />
                <path d="M9 12l2 2 4-4" />
              </svg>
              <span>{t('brand')}</span>
            </Link>
          </div>

          {/* Navigation Links */}
          <div className="flex items-center gap-4">
            {/* Language Selector */}
            <LanguageSelector compact />
            
            {isAuthenticated ? (
              <>
                <Link
                  to="/dashboard"
                  className="rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
                >
                  {t('dashboard')}
                </Link>
                <div className="flex items-center gap-3">
                  <span className="text-sm text-gray-600">
                    {t('hello')},{' '}
                    <span className="font-medium text-gray-900">
                      {user?.full_name || user?.preferred_username}
                    </span>
                  </span>
                  <button
                    onClick={logout}
                    className="rounded-md bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200"
                  >
                    {t('logout')}
                  </button>
                </div>
              </>
            ) : (
              <button
                onClick={login}
                className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-700"
              >
                {t('login')}
              </button>
            )}
          </div>
        </div>
      </div>
    </nav>
  )
}