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

export default function Navbar() {
  const { user, logout } = useAuth()
  const navigate = useNavigate()

  async function handleLogout() {
    await logout()
    navigate("/login")
  }

  return (
    <nav className="navbar">
      <Link to="/" className="nav-brand">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ verticalAlign: 'middle' }}>
          <path d="M12 2L3 7v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-9-5z" fill="currentColor"/>
        </svg>
        <span>SecureAuth</span>
      </Link>
      
      <div className="nav-links">
        {user ? (
          <>
            <span style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}>
              Welcome, <strong style={{ color: "var(--text-primary)" }}>{user.username}</strong>
              {user.role === "admin" && <span style={{ marginLeft: "6px", fontSize: "0.75rem", background: "rgba(99,102,241,0.2)", padding: "2px 6px", borderRadius: "10px", color: "#818cf8", fontWeight: "700" }}>ADMIN</span>}
            </span>
            <button className="btn btn-secondary" style={{ padding: "0.4rem 0.9rem", fontSize: "0.85rem", width: "auto" }} onClick={handleLogout}>
              Sign Out
            </button>
          </>
        ) : (
          <>
            <NavLink to="/login" className={({ isActive }) => isActive ? "nav-link active" : "nav-link"}>
              Sign In
            </NavLink>
            <NavLink to="/register" className={({ isActive }) => isActive ? "nav-link active" : "nav-link"}>
              Register
            </NavLink>
          </>
        )}
      </div>
    </nav>
  )
}