import { Link, useLocation, useNavigate } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'

function Navigation() {
  const location = useLocation()
  const navigate = useNavigate()
  const { user, logout } = useAuth()

  const handleLogout = async () => {
    await logout()
    navigate('/login')
  }

  const isActive = (path) => location.pathname === path

  return (
    <nav style={{
      background: 'var(--surface)',
      borderBottom: '1px solid var(--border)',
      padding: '0 1rem',
      position: 'sticky',
      top: 0,
      zIndex: 1000
    }}>
      <div style={{
        maxWidth: '1200px',
        margin: '0 auto',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: '60px'
      }}>
        {/* Logo/Title */}
        <Link to="/" style={{
          fontSize: '1.25rem',
          fontWeight: 600,
          color: 'var(--text1)',
          textDecoration: 'none'
        }}>
          🥋 Shinkan
        </Link>

        {/* Main Navigation */}
        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
          <Link
            to="/"
            style={{
              color: isActive('/') ? 'var(--accent)' : 'var(--text2)',
              textDecoration: 'none',
              fontWeight: isActive('/') ? 600 : 400
            }}
          >
            Dashboard
          </Link>
          <Link
            to="/exercises"
            style={{
              color: isActive('/exercises') ? 'var(--accent)' : 'var(--text2)',
              textDecoration: 'none',
              fontWeight: isActive('/exercises') ? 600 : 400
            }}
          >
            Übungen
          </Link>
          <Link
            to="/clubs"
            style={{
              color: isActive('/clubs') ? 'var(--accent)' : 'var(--text2)',
              textDecoration: 'none',
              fontWeight: isActive('/clubs') ? 600 : 400
            }}
          >
            Vereine
          </Link>
          <Link
            to="/profile"
            style={{
              color: isActive('/profile') ? 'var(--accent)' : 'var(--text2)',
              textDecoration: 'none',
              fontWeight: isActive('/profile') ? 600 : 400
            }}
          >
            Profil
          </Link>

          {/* User Menu */}
          <div style={{
            borderLeft: '1px solid var(--border)',
            paddingLeft: '1rem',
            marginLeft: '0.5rem',
            display: 'flex',
            alignItems: 'center',
            gap: '0.75rem'
          }}>
            <span style={{ color: 'var(--text2)', fontSize: '0.875rem' }}>
              {user?.name || user?.email}
            </span>
            <button
              onClick={handleLogout}
              style={{
                padding: '0.5rem 1rem',
                background: 'transparent',
                border: '1px solid var(--border)',
                borderRadius: '6px',
                color: 'var(--text2)',
                cursor: 'pointer',
                fontSize: '0.875rem'
              }}
            >
              Abmelden
            </button>
          </div>
        </div>
      </div>
    </nav>
  )
}

export default Navigation