'use client'

import Link from 'next/link'
import { useState } from 'react'

export function UserMenu() {
  // TODO: Replace with actual auth state when authentication is implemented
  const [isAuthenticated] = useState(false)
  const [isMenuOpen, setIsMenuOpen] = useState(false)

  if (!isAuthenticated) {
    return (
      <div className="flex items-center gap-2">
        <Link
          href="/login"
          className="px-4 py-2 text-sm font-medium text-zinc-300 hover:text-white transition-colors"
        >
          Log in
        </Link>
        <Link
          href="/register"
          className="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-purple-600 to-pink-600 rounded-full hover:from-purple-700 hover:to-pink-700 transition-all"
        >
          Sign up
        </Link>
      </div>
    )
  }

  return (
    <div className="relative">
      <button
        onClick={() => setIsMenuOpen(!isMenuOpen)}
        className="flex items-center gap-2 p-1 rounded-full hover:bg-zinc-800 transition-colors"
      >
        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
          <span className="text-white text-sm font-medium">U</span>
        </div>
      </button>

      {isMenuOpen && (
        <>
          <div
            className="fixed inset-0 z-40"
            onClick={() => setIsMenuOpen(false)}
          />
          <div className="absolute right-0 top-full mt-2 w-48 bg-zinc-900 rounded-lg shadow-xl border border-zinc-800 py-1 z-50">
            <Link
              href="/profile"
              className="block px-4 py-2 text-sm text-zinc-300 hover:text-white hover:bg-zinc-800 transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              Profile
            </Link>
            <Link
              href="/upload"
              className="block px-4 py-2 text-sm text-zinc-300 hover:text-white hover:bg-zinc-800 transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              Upload Music
            </Link>
            <Link
              href="/playlists"
              className="block px-4 py-2 text-sm text-zinc-300 hover:text-white hover:bg-zinc-800 transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              My Playlists
            </Link>
            <hr className="my-1 border-zinc-800" />
            <button
              className="block w-full text-left px-4 py-2 text-sm text-zinc-300 hover:text-white hover:bg-zinc-800 transition-colors"
              onClick={() => {
                setIsMenuOpen(false)
                // TODO: Implement logout
              }}
            >
              Log out
            </button>
          </div>
        </>
      )}
    </div>
  )
}